CODEWITHSUNDEEP
jquery
JSon
JSon

Reputation: 17

how to dynamically replace images in a div

my problem sounds simple but I have not been able to figure it out. I'm trying to add a new img into a div tag(#box) through links. The problem I'm running into is that the first link works and then I can't get the second link to replace the previous img in the div tag called (#box) I have provided this hope it helps:

fiddle

<body>
<p id="link1"><a href="#">image1</a></p>
<p id="link2"><a href="#">image2</a></p><br />
<div id="box"></div>
</body>

Upvotes: 1

Views: 112

Answers (5)

Ivan Pavić
Ivan Pavić

Reputation: 538

In my experience with image with changeing div use:

html:

<div id="box"><img id="imgId" src=""></div>

and jQuery:

$(function(){
    var url = "";    
    $("#link1").on("click",function(){
            var url = your.url;
            $('#imgId').attr("src", url);
    });


    $("#link2").on("click",function(){
        var url = your.url;
            $('#imgId').attr("src", url);
    });


});

and with this u can have as many pictures as u like changeing in same div

PS if u don't like your img beeing empty on load u can use

display:none;

css attribute

and then use .show(); function when clicking first time or set url to some default value

Upvotes: 0

UserProtocol
UserProtocol

Reputation: 59

You can try this one..

HTML:

<p id="link1"><a href="#">image1</a></p>
<p id="link2"><a href="#">image2</a></p>

<br />
<div ><img src="http://www.jasonsanchez.3owl.com/test/images/dhltest.jpg" id="box" >       </a></div>

JS:

$("#link1").on("click",function(){
    $('#box').attr("src", "http://www.jasonsanchez.3owl.com/test/images/dhltest.jpg"); 
});


$("#link2").on("click",function(){

   $('#box').attr("src", "http://www.jasonsanchez.3owl.com/test/images/ibmtest.jpg"); 
});

Upvotes: 0

max li
max li

Reputation: 2467

You can just change the attribute when click on the second image.

$("#link2").on("click",function(){
    $("#box img").attr('src','http://www.jasonsanchez.3owl.com/test/images/ibmtest.jpg');
});

Upvotes: 0

Ohgodwhy
Ohgodwhy

Reputation: 50808

You can't append to an <img/> element.

$("#box>img").append

to

$('#box').append

As a side note, that development account may have just been terminated for hotlink TOS'ing

Here's the jsFiddle

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388446

The problem is instead of changing the contents of #box, you are trying to append the new elements to the already added img element

Since what you need is to replace the image in the #box element, you can use .html()

In this scenario, looks like you can use

$(function(){
    $("#link1").on("click",function(){
        $("#box").html('<a href="http://www.jasonsanchez.3owl.com"><img src="http://www.jasonsanchez.3owl.com/test/images/dhltest.jpg" alt="dhl" target="_new" style="border:none;"/>');
    });


    $("#link2").on("click",function(){
        $("#box").html('<a href="http://www.jasonsanchez.3owl.com"><img src="http://www.jasonsanchez.3owl.com/test/images/ibmtest.jpg" alt="ibm" target="_new" style="border:none;"/>');
    });

});

Demo: Fiddle

Upvotes: 1

Related Questions