Quick and dirty animated image rollovers with jQuery

 

Here's a recent addition to my little bag of tricks - it adds a subtle touch to the everyday image rollover effect with a minimal amount of additional code.

An example of the effect can be seen here:

http://labs.ehousestudio.com/code/jquery_rollovers/

Sexy, eh? Easy to implement too. Here's how it's done.

Start with the element to which you want to add the rollover effect. We're going to use a simple image for this example.

 

 

Now, you'll need to wrap the image in a container of some sort that will act as the trigger - this can technically be any element you want but for sans-javascript users and usability reasons, it should probably be an anchor. (Adding a rollover effect to an element that doesn’t take you anywhere after you click it is the same as underlining text that isn’t a link.) So here’s what we have now:

Here’s where purists will kick me in the shins. We need to add an extraneous, semantically-useless piece of markup. I know, I know… kick me now.

That's it for the markup - let's style it:

a {
	display:block;
	width:200px;
	height:200px;
	background:#ccc;
	position:relative;
	}

a .rollover {
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:180px; /* (totalWidth - (borderLeftWidth + borderRightWidth)) */
	height:180px; /* (totalHeight - (borderTopWidth + borderBottomWidth)) */
	border:10px solid #666;
	background:transparent;
	}

This is pretty straightforward. We assign dimensions to the wrapper element and give it a position value of relative. The rollover element is positioned absolutely to the top-left of the wrapper and has a border value of 10px. (Obviously, the border widths and colors can be adjusted to your own whims.) Since there is 20px of border on each size, adjust the width and height accordingly so that the span is exactly the size of the wrapper (as denoted in the css comments above).

The concludes the CSS portion of the program. Let's get our hands dirty with some jQuery:

(I'm going to assume that you are familiar with at least the basics of jQuery which are not really in the scope of this article. If not, check out this tutorial: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery to help get you started.)

After including the jQuery file in your document, go ahead and call the jQuery object:

(Of course the rest of the code we write will go inside the jQuery function.)

In order to be able to fade the rollover in to a specific opacity level, we need to set the initial opacity of the rollover to 0. Add this to your script:

$(".rollover").css({'opacity':'0'});

The only thing left is to create the hover function. This is how you do it:

$('a').hover(
	function() {
		$(this).find('.rollover').fadeTo(500, 0.60);
	},
	function() {
		$(this).find('.rollover').fadeTo(500, 0.00);
	}
);

Notice that I’m fading the rollover element in to 60% opacity in one half second. You can adjust these values accordingly.

Here’s the end result:

That’s it! Now you have a custom animated rollover for your images.

Why, Oh Why?

My two year old loves candy; don't we all? She walks around with her hands held out muttering 'moe emems peas' (adult translation: 'more M&M’s please… we think'). There’s nothing more enjoyable than gorging yourself on candy - eye-candy included. So why is an accessibility and usability nerd telling you about how to add eye-candy to your site? Well take a look at that example again and roll over the image… What is the muscle inside your skull telling you? In addition to giving your users a visual clue that you’re supposed to click on the image, it also adds a touch of aesthetic elegance to the element. Why is that important? Well, just as my daughter walks around muttering and wiping her chocolate covered fingers on our walls, windows and dog, users want eye-candy; studies show that people appear to use aesthetics to judge appeal and perceived usability (reference article: http://www.webcredible.co.uk/user-friendly-resources/web-usability/aesthetics-usability.shtml). Therefore, a subtle focus on adding improved aesthetics to your site, in addition to continuing to pay more attention to usability, can make even this chocolate-covered nerd happy.

You can download the referenced example source files at http://labs.ehousestudio.com/code/jqueryrollovers.zip.

Any questions? Comment below or find me on twitter at http://www.twitter.com/eHouseDev.