Image rollovers using jQuery and HTML5 data-* attributes
I have always found that there has never been a really simple way of swapping one image for another when you rollover it. We could use CSS and replace our img tags with elements with background images, and use the :hover pseudo-class to switch them round. But then we lose the semantic value of the image — it wouldn't actually appear in our document's hypertext, couldn't be saved, hyperlinked, etc.
Therefore we generally always have to rely on Javascript for this. However, a lot of methods that implement this just seem messy — especially the awful Javascript code (MM_swapImage) that Adobe Dreamweaver generates. My proposed solution is to use jQuery, a clean Javascript code library, as well as using the relatively new HTML5 data-* attributes.
A lot of us will have found that in the past we have stored metadata in some HTML element, most commonly in the rel or lang attributes, for use in AJAX applications, for example. While this method worked, those attributes are meant to store specific data, not our custom data. Luckily, as part of the new HTML5 spec, data-* attributes have been incorporated. These are custom attributes that we can call whatever we want and store whatever data we want in. They must start with the prefix data-, then followed by at least one lowercase character. Some examples:
<div class="staff-member" data-department="sales">John Smith</div> <a href="index.php" data-colour="blue">Open</div> ...
However, we shouldn't make data-* attributes when a more suitable attribute already exists for the data we want to store. For example, the following should not be implemented due to there already being the more relevant lang attribute:
<title data-language="en">My Website<title>
If you want to find out more about custom data-* attributes, have a read of the W3C specification.
Back to our image rollover solution... I am going to have our images as img elements as normal, but include a custom data-* attribute in those elements to store the source of our rollover image.
<img src="images/product-thumbnail.jpg" data-hover-src="images/product-thumbnail-hover.jpg" width="100" height="100" alt="My product" />
We now need to implement a few lines of jQuery to swap the images around when we move the mouse cursor over our original image. First, we need the jQuery library included. I'm including the latest version (1.7.1 at the time of writing) using the jQuery CDN hosted file:
<html> <head> ... <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script language="javascript"> ... // our jQuery code to go here ... </script> </head> <body> ... </body> </html>
Now our actual jQuery code:
$('img[data-hover-src]').hover(function() {
$(this).attr('tmp', $(this).attr('src'));
$(this).attr('src', $(this).attr('data-hover-src'));
$(this).attr('data-hover-src', $(this).attr('tmp'));
$(this).removeAttr('tmp');
}).each(function() {
$('<img />').attr('src', $(this).attr('data-hover-src'));
});
This code finds any img elements that have our custom attribute data-hover-src and then implements our hover state, by creating a temporary attribute that we use to swap round the original and hover image sources around.
