Just a simple script I use to automate image rollovers that may be of use to others. Just include this javascript:
$(function() {
$('.rollover').hover(function() {
var currentImg = $(this).attr('src');
$(this).attr('src', $(this).attr('hover'));
$(this).attr('hover', currentImg);
}, function() {
var currentImg = $(this).attr('src');
$(this).attr('src', $(this).attr('hover'));
$(this).attr('hover', currentImg);
});
});
This will pick up an image that looks as follows, and setup the rollover image:
<img src="first.gif" hover="second.gif" class="rollover"/>
31 Comments
do you know how to do this INSIDE a wordpress post? I am not a programmer but I am trying to figure this out.
For wordpress, I would add this javascript in a script block inside one of the template files, like header.php for your theme. Then in your wordpress post, just make sure your embedded image has the “hover” and “class” attributes (you can manually set those if you go to your html view if you use the rich text editor or wysiwyg editor).
Nice and easy to use script. Too bad it isnt w3c valid.
Simple and quite elegant idea. However, this would break the compliance w/ XHTML so I personally would try a different approach
In attempt to comply with standards, I think taking an approach using the new custom data attributes presented for HTML 5 would solve compliance issues in the future:
http://www.w3.org/html/wg/html5/#custom
So rather than using the attribute ‘hover’, we could use ‘data-hover’, and still be standards compliant (once html 5 is in place).
Long this is not met.
This is invalid markup and should never be used!
Custom attributes do not make html invalid. Valid html is not the same as a valid DTD. I’d suggest reading the following post in regards to Dojo and the topic of validating the html vs. validating the DTD.
HTML 5 also has a specification for allowing custom data attributes that John Resig commented about awhile back.
Great idea and very light code. Thanks a lot.
Thanks for the script. Neat and clean. Regarding the W3C Compliance….I simply used the name attribute of the img instead of the “made up” hover attribute. Since the name attribute is a recognised attribute it worked perfectly fine and was compliant with w3c standards. All good
(Unless of course you use the name attribute elsewhere in your code)
Great script! Thanks! Is there a simple way to have a surrounding tag also call the img swap?
I’d like to have text adjacent to the image also cause the image rollover.
I meant to say “…a surrounding ANCHOR tag…”
Simple and effective
Hi, thanks for a very useful piece of code. I simplified it a bit for my implementation:
[code]]czozNjA6XCINCiAgICAkKFwnaW1nW2hvdmVyXVwnKS5ob3ZlcihmdW5jdGlvbigpIHsNCiAgICAgICAgdmFyIGN1cnJlbnRJbWcgPSAkKHtbJiomXX10aGlzKS5hdHRyKFwnc3JjXCcpOw0KICAgICAgICAkKHRoaXMpLmF0dHIoXCdzcmNcJywgJCh0aGlzKS5hdHRyKFwnaG92ZXJcJykpOw0KICAge1smKiZdfSAgICAgJCh0aGlzKS5hdHRyKFwnaG92ZXJcJywgY3VycmVudEltZyk7DQogICAgfSwgZnVuY3Rpb24oKSB7DQogICAgICAgIHZhciBjdXtbJiomXX1ycmVudEltZyA9ICQodGhpcykuYXR0cihcJ3NyY1wnKTsNCiAgICAgICAgJCh0aGlzKS5hdHRyKFwnc3JjXCcsICQodGhpcykuYXR0cihcJ2h7WyYqJl19b3ZlclwnKSk7DQogICAgICAgICQodGhpcykuYXR0cihcJ2hvdmVyXCcsIGN1cnJlbnRJbWcpOw0KICAgIH0pOw0KXCI7e1smKiZdfQ==[[/code]
This version doesn't require a special class on the image. It just performs the rollover on any image that has the custom "hover" attribute.
@Anon: The new code doesnt seem to work for me.
Thanks for the helpful idea for image rollover. Considering the discussiona above regarding compliance, here is something even simpler and clearly compliant – if you’re able to name your images in a consistent fashion, such as “myimage_orig.jpg” and “myimage_rollover.jpg”:
$(‘img.hover’).hover(function() {
$(this).attr(’src’, $(this).attr(’src’).replace( /_orig/i, ‘_rollover’ ));
}, function() {
$(this).attr(’src’, $(this).attr(’src’).replace( /_rollover/i, ‘_orig’ ));
});
All you need to do is class the image as “hover” (or whatever)
Thanks for the great script.
Does anyone have a simple online demo of that example?? It seems really usefull but it just doesn’t work for me. Maybe i did something wrong…
Help would be appreciated
Regards
Ok guys forget about it!!!
I found the stupid mistake…
Thanks anyway
Very nice code… I like its small size. However all my page content shifts with the larger image. Is it possible to have it above all the other content so this won’t happen?
To be compliant merely change the code as so:
$(function() {
$(‘.rollover’).hover(function() {
var currentImg = $(this).attr(’src’);
$(this).attr(’src’, $(this).attr(‘onmouseover’));
$(this).attr(‘onmouseover’, currentImg);
}, function() {
var currentImg = $(this).attr(’src’);
$(this).attr(’src’, $(this).attr(‘onmouseover’));
$(this).attr(‘onmouseover’, currentImg);
});
});
Then write your image tag as so:
The image line didn’t appear as it thought I was trying to write html into the code. Write as so without the ((( )))
((()))
Opps, didn’t like that either. Basically instead of hover=”second.gif” in your body code, write onmouseover=”second.gif”
thanks for the snippet, very handy. i changed the hover attribute to use the A’s rel attribute. this makes it validate.
Could anyone show me where exactly in header.php i should put the java snippet?
Hello, can someone send a link to a sample ? Would be great, Thx.
Hey all. I used this code as it was with ‘hover’ attribute and it worked properly (who cares about W3C if it works?
). But when I changed it to ‘onmouseover’ it stopped working. Simply on mouseover images were disappearing when I moved my mouse over them. No idea why.
So, it can be W3C compilant in some way 
Also, I used ‘name’ attribute and it works fine
That is brilliant! I had no idea you could assign a hover() function to a class like that!
Thank you!
Any way to add a fade in effect to this rollover since it uses jQuery?
I like it! How could I modify this script to have a third image when option is clicked? I tried setting the image manually on the target page which seemed to work in firefox but that rather defeats the object because my code is then spread across the pages again.
You could add additional event handlers using the mousedown and mouseup events, and grab the image from a different attribute.