jQuery image swap on mouseover

CategoryNo Category
   5.8 (0 votes)
DescriptionThis simple bit of code allows you to quickly create image rollovers. The code was modified from a version by Sam Colletts on http://webdevel.blogspot.com/2008/04/rollover-images-with-jquery.html

It works by having two images with the names xxxx_on.xxx and xxxx_off.xxx (works for all image file types) then when you mouse over the image it is replaced with the _on version and when you mouse off, it is replaced with the _off version.
InstructionsThe header code needs to go after the jQuery script include.

The image needs to be contained in a parent tag with the class 'imgSwap' and the image name must have _off at the end of it. when you mouse over the image, the javascript will get the name of the image and replace _off with _on.
You can have more than one image on the page at once, you can have more than one image inside the container and each image swap will work independently.

If you have an image with more than one '_off' in the image name, only the last one will be replaced, eg myimage_off-101_off.jpg will be converted to myimage_off_101_on.jpg on mouseover.

No comments have been added
Leave your comment/rating

Related Scripts:

No related scripts were found.


Back to main scripts page