toggle images using data- attribute

[turpentyne]

Maybe there's a better way to do this. but I thought I'd try.

I want to write a simple image toggle script that would work with multiple images.

When the user mouses over, change the src, using the data- attribute. Then on mouseout, revert to the original src.

Is this a dumb way to do it?

I got this far. it switches the src, but I'm not sure how to save the original src to revert back on mouseout.

$('.portfolio_thumbs').live('hover', function(){ 

    var thumbnail = $(this).attr("src");
    var whichThumb = $(this).data('color');

    if ($(thumbnail).attr("src") !== whichThumb){

        $(this).attr("src", whichThumb);

   } else {

        $(this).attr("src", thumbnail);
   }

});

The images in the html are like this:

<img src="images/portfolio/Image1.jpg" class="portfolio_thumbs" data-color="images/portfolio/Image1Color.jpg">

<img src="images/portfolio/Image2.jpg" class="portfolio_thumbs"  data-color="images/portfolio/Image2Color.jpg">

<img src="images/portfolio/Image3.jpg" class="portfolio_thumbs"  data-color="images/portfolio/Image3Color.jpg">

[iamthwee]

Maybe
http://stackoverflow.com/questions/2704334/using-jquery-how-do-you-change-the-image-on-hover-inside-of-a-div

[macgurl70]

One thing I have done before is use a tag attribute as a way to hover and keep the previous information:
Note, this is a very quick idea for some code, so I haven't tried it

$(".portfolio_thumbs").hover(function(){
   var imgSrc = $(this).attr("tag");

   $(this).attr("src","images/portfolio/"+imgSrc+"Color.jpg");
   }, function () {
   $(this).attr("src","images/portfolio/"+imgSrc+".jpg");
   });
});

with the html looking like

<img src="images/portfolio/Image1.jpg" class="portfolio_thumbs" tag="Image1"/>
<img src="images/portfolio/Image2.jpg" class="portfolio_thumbs" tag="Image2"/>
<img src="images/portfolio/Image3.jpg" class="portfolio_thumbs" tag="Image3"/>

It's just a thought, since I noticed you have named your images in a way that it could work. (if they are named that way).

And now, I need to practice this some more - been doing way too much in the xaml realm lately. But hopefully this can help you with a direction.