How to change image src in a div with javascript?

Question

I am using videojs to build a website to play videos and insert some images to the page at certain time point of the video being played. I used the code below to get the current time and insert an image in "imageContext" div.

<script type="text/javascript">
    var myPlayer = document.getElementById("example_video_1");
    var added = false;
    var ShowAds=function(){
        var time = myPlayer.currentTime;
        var img = document.createElement('IMG');
        div = document.getElementById("imageContext");
        div.style.width = '100px';
        div.style.height = '100px';
        div.style.display = 'inline-block';

        if(time > 30 && time <= 40 && !added){
            //img.onload = function(){
            div.appendChild(img);
            added = true;

            img.setAttribute("src",'/Applications/MAMP/htdocs/shqc.jpg');

            img.style.width = '100%';
            img.style.height = 'auto';
        }else if(time > 70){
            //change to another image in the same position
        }

    }
    myPlayer.addEventListener('timeupdate',ShowAds,false);
</script>

What if I want to show another image on the page when the time changes to, say, the 90th second? Or is there any way to delete the image on the page using javascript? Thanks!

To be clear, I have tried to put

img.setAttribute("src",'/Applications/MAMP/htdocs/yy.jpeg');

under else, it doesn't work

possible duplicate of [Programmatically change the src of an img tag](http://stackoverflow.com/questions/11722400/programmatically-change-the-src-of-an-img-tag) — Maytham Fahmi, Aug 21 '15 at 14:09
Just a style note: It is generally recommended that only constructor functions be named starting with a capital letter. — BCDeWitt, Aug 21 '15 at 14:10
What's up with using a path on your filesystem ("/Applications/MAMP/htdocs/shqc.jpg") as your image src? Are you not serving this off of a local server? — Josiah Keller, Aug 21 '15 at 14:16
@maytham-ɯɐɥıλɐɯ yes, it's duplicated, I didn't notice this one, thanks for pointing out. — Demonedge, Aug 21 '15 at 15:14

Aruna Tebel · Accepted Answer · 2015-08-21T14:14:28.263

5

You can set an id to the img element when you create it, (In case if you have multiple img tags inside the document)

img.setAttribute('id', 'myImg');

Then, check whether time equals 90 the same way you check whether it is between 30 and 40 and change the src of it like below.

if(time == 90 ){
    document.getElementById("myImg").src="/Applications/MAMP/htdocs/your_image.jpg";
}

In case if you want to delete the img element, since it has a parent (imageContext), you can do this,
var el = document.getElementById('myImg');
el.parentNode.removeChild(el);

edited Aug 21 '15 at 14:14

answered Aug 21 '15 at 14:07

Aruna Tebel

1,436
1
12
24

That is great! Glad to help :) – Aruna Tebel Aug 21 '15 at 15:13

pguetschow · Answer 2 · 2015-08-21T14:17:16.617

1

You can use this code:

document.getElementById("image").src="/PATH/To/Image/file.jpg";

edited Aug 21 '15 at 14:17

answered Aug 21 '15 at 14:11

pguetschow

5,176
6
32
45

Manu Masson · Answer 3 · 2015-08-21T14:09:38.153

0

I think all you need is this:

document.getElementById("myImg").src = //whatever

edited Aug 21 '15 at 14:09

answered Aug 21 '15 at 14:07

Manu Masson

1,667
3
18
37

score 0 · Answer 4 · edited May 23 '17 at 10:26

You could try creating and array of images locations.

var imageArray = new Array();

imageArray[0]= {
 image01: new Image(),
 image01.src: "my-image-01.png",
 imageCaption: "An image caption"
};

Then at the next interval just set the image attribute to the src of a picture in the array or just append the whole image.

if(time > 90 && time <= 100 && !added){
        div.appendChild(img);
        added = true;

        img.setAttribute("src",imageArray[0].src);

        img.style.width = '100%';
        img.style.height = 'auto';

Hope that helps. I used a little help from this other stack overflow question and answer: Creating an array of image objects

How to change image src in a div with javascript?

4 Answers4