Image Replacement Script (jQuery)

Question

I'm building an employee bios page where the client wants selected thumbnails to display in color at full opacity and all others at lower opacity in black and white. Which wouldn't be hard - the trouble is, every thumbnail has to have a color state and a black and white state. So my next thought was to swap out the black and white image (which would be resting within the div with a color background image) on mouseover.

$('.thumbnail').mouseenter(function(){
    var current = $(this); // cache thing
    var thishtml = current.html(); // get contents of thing
    current.html('').mouseleave(function(){ //empty the thing
        current.html(thishtml); //put the variable back in the thing
        });
});

My HTML would be as follows:

<div class = "thumbnail" style = "background-image: url(color.jpg);">
<img src="blackandwhite.jpg" />
</div>

Obviously, since I'm asking the question, my idea didn't work. The mouseover removes the innerHTML, and the variable is converted successfully, but it doesn't get inserted into the DIV again. What am I missing?

Diodeus - James MacFarlane · Accepted Answer · 2011-08-18 15:25:46Z

2

Instead of swapping HTML use css.

CSS:

.hidden {
     visibility:hidden
}

JS:

$(".thumbnail").hover(
  function () {
    $(this).find('img').addClass('hidden')
  }, 
  function () {
    $(this).find('img').removeClass('hidden')
  }
);

answered Aug 18, 2011 at 15:25

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Diodeus - James MacFarlane Over a year ago

Great. Click the check mark on the left to select this as the accepted answer. We both get rep points.

ShankarSangoli · Accepted Answer · 2011-08-18 15:25:06Z

0

When you empty the html there is nothing on which your mouseleave event will fire to set the html back again.

Working demo. In this demo I am just setting a character show that you can see the event getting fired, remove the character, it won't work.

answered Aug 18, 2011 at 15:25

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Comments

ldiqual · Accepted Answer · 2011-08-18 15:25:54Z

0

You don't need any Javascript to do that, just a piece of CSS:

 div.thumbnail {
   background-image: url(blackandwhite.jpg);
   opacity: 0.7;
 }
 div.thumbnail:hover {
   background-image: url(color.jpg);
   opacity: 1;
 }

answered Aug 18, 2011 at 15:25

ldiqual

15.4k7 gold badges55 silver badges94 bronze badges

Comments

JJ. · Accepted Answer · 2011-08-18 15:33:11Z

0

Try using .show() and hide() to make the blackandwhite.jpg image visible and hidden respectively.

$(".thumbnail").hover(
  function () {
    $(this).children("img").hide(); //hide b and w on mouse in
  }, 
  function () {
    $(this).children("img").show();  //showb and w on mouse out
  }
);

edited Aug 18, 2011 at 15:33

answered Aug 18, 2011 at 15:24

JJ.

5,5253 gold badges29 silver badges32 bronze badges

1 Comment

Diodeus - James MacFarlane Over a year ago

if "thumbnail" doesn't have a defined width and height, hiding the IMG will make the entire DIV disappear since it has no contents.

Kyle · Accepted Answer · 2012-11-13 12:58:37Z

0

Why not trying using the show and hide methods? Be sure to specify a width for the containing divs, or the entire thing will disappear when hiding or showing. I'm guessing the thumbnails are all the same size, so it will be easy to add CSS such as:

CSS:

.thumbnail
{
   width: 100px;
   height; 100px;
}

Javascript

$(document).ready(function()
{
   $('img', '.thumbnail').hide();//Start off hidden
   $('.thumbnail').mouseenter(function()
   {
      $('img', this).show();
   });
   $('.thumbnail').mouseleave(function()
   {
      $('img', this).hide();
   });
});

edited Nov 13, 2012 at 12:58

answered Aug 18, 2011 at 15:27

Kyle

4,46124 silver badges33 bronze badges

Collectives™ on Stack Overflow

Image Replacement Script (jQuery)

5 Answers 5

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related