CODEWITHSUNDEEP
jqueryhtmlimage
Tomas
Tomas

Reputation: 33

change the image src when the div is clicked

I have an image and div:

<img class="img-responisve pull-left" id="thumb" src="color/40252_mercury_palette_490x437.jpg"/>
<div class="thumbnail color a" style="background-image:url(color/40292_charcoal_palette_230x128.jpg)"></div>

When I click on the div, the image with id="thumb" should change to the same image that is in the divs background just a bit bigger. Here is what i tried, but it doesn't work:

$(".a").click(function(){
    var r1 = $(this).attr("src").replace("230x128.","490x437.");
    $('#thumb').attr("src", r1);
});

Upvotes: 0

Views: 389

Answers (3)

Pratik Shah
Pratik Shah

Reputation: 828

Check out the below code

$('div.a').click(function(){
  $('img.img-responisve').attr("src", $(this).css('background-image').replace('url(','').replace(')',''));
});
img.img-responisve {
  width: 300px;
  height: auto;
  display: block;
  float: left;
  }

div.a {
  width: 180px;
  height: 180px;
  background-image: url('http://i.cdn.turner.com/v5cache/CARTOON/site/Images/i80/tj_tom_180x180.png');
  border: 1px solid #000;
  display: block;
  float: left;
  cursor: pointer;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="img-responisve pull-left" id="thumb" src="http://img1.wikia.nocookie.net/__cb20150128155039/disney/images/f/f3/Baby_Tom-29.png"/>
<div class="thumbnail color a"></div>

Upvotes: 0

Alien
Alien

Reputation: 3668

as Frederic Nault said, $(this).attr("src") can not get the image path, you should use .css()

like below

$(".a").click(function(){
    var r1 = $(this).css('background-image').slice(4,-1).replace("230x128.","490x437.");
    $('#thumb').attr("src", r1);
});

Upvotes: 1

Michał
Michał

Reputation: 2484

You should refer to background-image of the div:

$("div.a").click(function(){
    var r1 = $(this).css("background-image").replace('url(','').replace(')','').replace("230x128.","490x437.");
    $('#thumb').attr("src", r1);
});

Upvotes: 0

Related Questions