jquery hover-swap

An unobtrusive, cross-browser, XHTML compliant solution for image & input rollovers.

• Supports arbitrary image sizes for rollovers that “pop”.

• Supports transparent png’s in Internet Explorer 6.

Source: http://github.com/davebelais/jquery-hoverswap/raw/master/jquery.hoverswap.js

Minified: http://github.com/davebelais/jquery-hoverswap/raw/master/jquery.hoverswap.min.js

usage

To initialize:

$('img[longdesc]').hoverswap();

For the above example you would set the longdesc atrribute on your img tag to the URL of your roll-over image.

<img longdesc="images/image_over.png" src="images/image.png" alt="Image Name" />

Slightly faster execution could be achieved by adding a class ( rollover in this case ) to your images.

<img class='rollover' longdesc="images/image_over.png" src="images/image.png" alt="Image Name" />

…and using the following:

$('.rollover').hoverswap();

Alternately, you can pass an options object:

$('input:image#submit').hoverswap({

 url:'images/submit_over.png'

});

In this example we set the URL manually instead of looking for an attribute, because form inputs do not have an unused attribute of the correct type. If you don’t care whether of not your markup validates, you can add a longdesc attribute anyway ( it will display the same in a browser ). The url option can also be an array, or an object consisting of key:value pairs wherein the key is the src url and the value is the rollover URL.

What makes this script different can be seen by setting the align option to any css alignment value e.g. “center”, “center top”,”top left”, “100% 75%”, etc.. The following is used for the menu on this site:

$('.rollover').hoverswap({

 align:'center'

});

In this scenario, the hover image does not need to be the same size as the original. The rollover image is aligned according to your alignment value. By default this is set to null, in which case the images are assumed to be the same size.

Note: When  align is set the rollover is triggered by the hover event of  the rollover image’s direct parent rather than the image itself.  Set align when creating menus, or applying rollovers to images that have no siblings ( e.g. wherein the image is the sole descendant of an anchor ).
»Issue Tracking