jQuery hoverImage plugin
At the project I’m currently reviewing they’ve used a lot of hover effects for images and links containing images. You can use CSS’s :hover for it, but that means you’ll have to add a new CSS line for each hover image and that it doesn’t work in IE6 for images. So they’ve decided to use a different approach. On all these images that needed a swap effect, they’ve added some JavaScript in the “onmouseover” and “onmouseout” and that’s something I wasn’t pleased with cause it was all cluttering the html, it asked for typo’s and they were registering handlers on the wrong events(they should have used "onmouseenter" and "onmouseleave"). And then I noticed they have jQuery registered on that same page.
Writing a plugin
I really love the cross-browser compatibility jQuery gives me out of the box and the ease of use. So it was time to write a jQuery plug-in. Let’s not bother you any longer with an introduction and show you the code for such a simple plug-in.
(function($) {
$.fn.extend({
hoverImage: function(options) {
var defaults = { src: "-hover", preload: true, replaceEnd: "" };
options = $.extend(defaults, options);
var append = options.src.indexOf(".") == -1;
var splitter;
if (append) {
splitter = options.replaceEnd + ".";
}
return this.each(function() {
var obj = $(this);
var img = obj.is("[src]") ? obj : obj.children("[src]:first").eq(0);
if (!img.is("[src]")) {
return true;
}
var oSrc = img.attr("src");
img.data("oSrc", oSrc);
var hSrc = options.src;
if (append) {
hSrc = oSrc.split(splitter).join(hSrc + ".");
}
img.data("hSrc", hSrc);
if (options.preload) {
new Image().src = hSrc;
}
obj.hover(function() { img.attr("src", img.data("hSrc")); },
function() { img.attr("src", img.data("oSrc")); });
});
}
});
})(jQuery);
So what does this code do?
It is a default plug-in with some settings.
- src
You can define a complete URL to an image to use on hover OR the string to append to the default src of the image. The default value for this is “-hover” which means that if the default src of your image is “mybutton.gif” on hover that will be replaced by “mybutton-hover.gif”.
- preload
Determines if you would like to preload the hover image. The default is true so your hover effect will show almost instantly.
- replaceEnd
This is an extra option to replace a value at the end of the default image src on hover. If your default image url is “mybutton-default.gif” and your hover image url is “mybutton-hover.gif” you need to replace “-default” at the end of the image url.
If the object on which this plug-in is called does not have a “src” attribute, it wil try to get the first child that has. The hover effect will still take place on hovering the parent, but the child its image src will be changed.
Here’s a sample of html in which the plug-in is used.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>hoverImage test page</title>
<script src="/ClientScript/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="/ClientScript/jquery.hoverImage.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(".standardImage").hoverImage({replaceEnd: "-standard"});
$(".hoverImage").hoverImage();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img class="standardImage" src="Imgs/button-standard.gif" />
<img class="hoverImage" src="Imgs/button.gif" />
<a class="hoverImage" href="#" style="display:block; width:100%;border:solid 1px black;">
<img src="Imgs/button.gif" />
</a>
</div>
</form>
</body>
</html>
Works like a charm!
Cheers and have fun!
Wesley