jQuery image swap on mouseover
| Script version: | 1.0 |
| Language: | jQuery |
| Rating: |  |
| Category: | No Category |
| Description: | This 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. |
| Instructions: | The 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. |
| Code: | |
Comments
Related Scripts:
Tags
[ images ] [ jquery ] [ hover ] [ swap ] [ rollover ] [View tag cloud]Back to main scripts page
Tag Cloud Submit a script
Latest Scripts Added
jQuery image swap on mouseover (jQuery)04 January 2012
This 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 ...
replace XML characters in a string using ASP.Net (ASP.Net)
12 December 2011
Sometimes you need to insert a string into an xml document. Before doing this, you need to ensure that your string does not contain any special xml characters. It is possible to use a CDATA section ...
How to remove title tag in ASP.Net (ASP.Net)
14 October 2011
This is not really a script, but a little trick that you can use to remove the title tag in ASP.net. In ASP.net, when the head tag is rendered, the title tag is automatically added. One of the real ...
ASP sort numerical array (ASP)
12 September 2011
This code is similar to the sort array script which sorts an array alphabetical, however it also sorts arrays based on numberical ordering, for example: dim numbers(4) numbers(0) = ...
Force file download in ASP.Net / c# (ASP.Net)
02 September 2011
this script allows you to force browsers to display a file save dialogue for any file type. It contains a string of allowed file types so users cannot change the querystring to downoad your ...