Placing an image inside the javascript

JavaScript
1

I know this can be done, but how do you do it?

I think it would be done by using an id, but I don’t think an id can be placed in the css of this code.

In place of that.
, url("https://i.imgur.com/SIha2Gs.png");


 .playButtonb {
   position: relative;
   width: 260px;
   height: 260px;
   cursor: pointer;
   background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/SIha2Gs.png");
   border: 3px solid #0059dd;
 }
 
 .playButtonb.active {
   border: 3px solid #e77d19;
   background-image: linear-gradient( to right, transparent, transparent 83px, #e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px, transparent 260px), url("https://via.placeholder.com/260x260");
 }
2

Can you explain more clearly what you are trying to achieve here?

In the code you have posted, the image is a background image, which is being applied using CSS. CSS is the correct way to add a background image.

I don’t understand what you mean by “placing an image inside the javascript”. Please explain what you are trying to do, and why you feel you need to move the image.

1 Like
3

Using something like this:

var img = new Image();
var div = document.getElementById('foo');

img.onload = function() {
  div.appendChild(img);
};

img.src = 'path/to/image.jpg';
4

An image in the HTML and a background-image in the CSS are not the same thing.

I ask you again; what are you trying to do, and why do you feel you need to move the image? What effect are you trying to create which is not possible with your current code structure?

1 Like
5

It was just something that came to mind. I thought, what benefit might there be from putting an image in the javascrpt.

6

If the image is part of the content, then it belongs in the HTML.

If the image is purely decorative, then it generally belongs in the CSS.

JavaScript is used to control behaviour and interactions.

2 Likes
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.