« slightestBox (lightbox/litebox replacement) How I Spent My Winter Vacation »
jQuery Image Swap
jQuery does a fantastic job at simplifying JavaScript. Below is an example for those of you still relying on DreamWeaver’s Image Rollover (MM Image Swap). The better alternative is using proper image replacement techniques.
$('img#nav1').hover(function() {
$(this).attr("src","/images/headerNav/1-over.gif");
}, function() {
$(this).attr("src","/images/headerNav/1.gif");
});
<img src="1.gif" id="nav1" />
And there you have it! Coming up next is the SEO case study of duffynewport.com.
Friday, October 12th, 2007 at 11:28 am and is filed under i came as a rant, jQuery, work. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
October 5th, 2008 at 11:41 am
Wow, man, this is the *only* comprehensive rollover technique I could dig up in several hours worth of googling. No kidding, try “jquery simple rollover” and look at what the cat drags in. Boy, thank you very much. Now what I’d like to know is how to trigger those crazed smooth state transitions that jquery can do, you know the last argument, slide, wipe, all that jazz..?
November 20th, 2008 at 9:28 am
Doesn’t work!
$(‘img#nav1′).hover(function() {
$(this).attr(“src”,”/marketingbootcamp.eu/_devsite/media/images/menu_home-on.png”);
}, function() {
$(this).attr(“src”,”/marketingbootcamp.eu/_devsite/media/images/menu_home-off.png”);
});
Absolutely nothing happens – not js message. All paths above have been triple checked of course.
November 22nd, 2008 at 12:10 am
It fails only in IE6, works in major browsers (FF/Opera/Safari/IE7+, etc). This is mostly just a test of the power of jQuery and its (mostly) cross browser/platform capabilities.
December 1st, 2008 at 1:04 am
You might also be interested in trying:
http://code.google.com/p/jquery-swapimage/
Quite powerful IMHO
December 11th, 2008 at 8:19 pm
Good find Tim, here’s a link to the functional examples: http://labs.xddnet.com/jquery-swapimage/example/example.html
April 1st, 2009 at 11:58 am
You know how long it took me to find this awesomly simple piece of code? Why bother with a plugin when this is easier.
Thank you thank you thank you.
Hope all is well
April 13th, 2009 at 3:33 am
Thanks for the easy but useful tip. I also found this article on swapping images with jQuery very useful. It explains the details behid this technique.
2Mathijs, You have an error in your code. Use similar quotes in the first line:
$(‘img#nav1′).hover(function() {
July 22nd, 2009 at 10:59 am
Great starting point, but this is still a pretty traditional JavaScript approach. If you name your files consistently, you can leverage jQuery’s iteration to simplify this a lot:
$(function() { $(".hoverswap").hover( function () { $(this).attr("src", $(this).attr("src").replace(/.gif/, "-over.gif")); }, function () { $(this).attr("src", $(this).attr("src").replace(/-over.gif/, ".gif")); } ); });This way the code only has to be called once, and will apply to all image tags that have class=”hoverswap” (provided a corresponding image ending with -over.gif exists).
July 22nd, 2009 at 11:06 am
Spot on Sean, that should save a good chunk of time for those wishing to do an image swap with jQuery.
Also, thanks to everyone who has commented and proved to me that I really should clean up the comments section of each post, as is its rather crap.
August 8th, 2009 at 3:49 pm
exactly what i was looking for with the hoverswap class.
thanks sean
October 27th, 2009 at 6:48 am
It only fails in IE6 because of the comma at the end of the first nested function. It’s unnecessary. Remove it, and it works fine.
March 29th, 2010 at 12:30 pm
Just came across this, it was a big help, thanks so much.
April 28th, 2010 at 4:15 am
Glad it helped you out, cheers!
May 8th, 2010 at 7:08 pm
Thanks to everyone who posted ideas above, they were a great help.
I just started working with jquery, and started writing my own scripts today.
I wanted to create a mouse over with images, without relying on Dreamweaver script, and came across your ideas.
Building off of them, I created a little script that will work for any image, weather, gif, png, jpeg, etc. and you don’t have to be overly specific with filenames.
Simply give every img a custom attribute (ie. ‘over’), and give make it’s value the path and file of the image you want to appear on mouse over (ie. ‘images/mypic.png’). Make sure to give the img a class the same class you set in your function (ie. ‘swapImage’).
Markup:
Script:
$(function() { var origImg =""; $(".swapImage").hover ( function() { origImg = ($(this).attr("src")); $(this).attr("src", ($(this).attr("over"))); }, function() { $(this).attr("src", origImg); } ); });I know there are probably better ways to pull this off, but this looked to be the best way to reuse my script for every basic image mouseover.
June 16th, 2010 at 5:48 am
Is there a way to add a fadein / fadeout effect to the image replacment action ?
Thanks
December 7th, 2010 at 1:32 am
Thanks for sharing…
http://www.raghibsuleman.com/jQuery-image-replacement
March 16th, 2011 at 6:42 pm
$(“:image”).each(function() {
var $this = $(this);
$this.data(“OriginalImageSrc”, $this.attr(“src”)).hover(function() { $this.attr(“src”, $this.attr(“src”).replace(“-a”, “-b”)); }, function() { $this.attr(“src”, $this.data(“OriginalImageSrc”)) });
});
March 21st, 2011 at 8:13 pm
Great post, clear and concise, will be using this – thanks.
March 22nd, 2011 at 6:52 am
[...] bei: jQuery Image Swap | For Your Lungs Only. Share and [...]
March 30th, 2011 at 6:04 pm
I’m always finding new things to do with jQuery. The more I learn, the bigger a fan I become.
May 15th, 2011 at 4:52 am
The loan suppose to be essential for guys, which want to ground their own company. In fact, it’s comfortable to get a collateral loan.
June 6th, 2011 at 5:45 pm
Always, good students have lots of assignments, so they are pressured by time to perform essays, however they should always count on the highly qualified term paper services, which can write A+ customized research papers.
June 20th, 2011 at 5:34 am
Did anyone ever answer Fario’s question?
I want rollover to trigger an image swap, but faded a little. Even taking one second would be ample to make it look a bit smoother.
I managed to copy some javascript code that worked, but lost that somehow, silly me. In any case, am I right in thinking I need to put a URL to a jquery script library somewhere in the header?
October 7th, 2011 at 12:34 am
Excellent jQuery solution! Thanks for sharing!