Here is a very quick and easy way to implement image swap on hover on your website using jQuery.
With the jQuery javascript library already added to your website add the following javascript code between the head tags in your web page:
jQuery(function(){
$(".img-swap").hover(
function(){this.src = this.src.replace("_off","_on");},
function(){this.src = this.src.replace("_on","_off");
});
});
Then simply create your 2 images – normal state called xxxxxx_off.jpg and the hover state xxxxxx_on.jpg, add the css class “img-swap” to the image tag in your html and jQuery will do the rest … see demo below:
[...] thanks to Design Chemical, click on the link to see their example. « BulkLoader and [...]
ty. i think there is a mistake: not – jQuery(function(){ but – $(function(){
$ is a shortcut for “jQuery” so it will make no difference to the code. One reason you may want to use jQuery is if you are using other javascript libraries on your website, which also use the $ shortcut – e.g. prototype