JavaScript is disabled!

easyImgSwap

easyImgSwap( click );

This jQuery plugin makes it possible to toggle the source of matching images between their default (value of src attribute) and their background-image. It works for both regular images and image type inputs.
The swapping is triggered on hovering the image and on focus/blur. By passing true as first parameter the swapping toggles on click.

Returns

jQuery object

Arguments

click [ Boolean | optional ]
If true swapping will be triggered on click, otherwise on hover and focus/blur (default: false).
Images can recieve focus when they're an input[type='image'] or a descendant of <a> or <button>.

Requirements

The image/input needs to have a background-image on the element itself. If there's no such image on the element image swapping will not be initiated on that element.
For the best result both the default image and its background image should to have the same dimensions.

The background-image can be positioned outside the elements visible area if needed. This is probably only the case if the images used for swapping have transparent parts.

DOM alterations

This method changes the value of the src attribute of the matching images/inputs.

Examples

HTML:

<!-- please don't mind the not very usefull alt texts ;) -->

<p><a href="#"><img src="images/button.png" alt="button"></a></p>
<div><a href="#"><img src="images/button.png" alt="button"></a></div>
<p><img src="images/button.png" alt="button"></p>
<p><input type="image" src="images/button.png" alt="button"></p>
<p><button><img src="images/button.png" alt="button"></button></p>

CSS:

p img, input[type='image'] {
    background: url(images/button_highlight.png) transparent no-repeat -9999px 0;
}

Here $("input:image, img").easyImgSwap(); would make the input and all images (except for the second one as it has no background-image) swap to button_highlight.png on hover or when it recieves focus. When the hovering stops or the focus is lost the input/images swap back to button.png.

Changing the code to $("input:image, img").easyImgSwap(true);, passing true as parameter, makes the images/input toggle on click (again except the second image).

Downloads

jquery.easyimgswap-1.0.js (2.23kB)

Versions