Causality in Web sites is a must these days. People want action, plain and simple. Not only does it add greater functionality for the user, it gives you a whole other dimension for design.
When I visit a site with static buttons and unchanging link styles I get confused (something I’m quite proficient at actually). I’ve grown so accustom to being shown visually that “this is a place I can do something”, it throws me when it’s not there.
So, to make sure your site is up to snuff, here’s a simple guide on how to add a bit of cause and effect to your link graphics.
The Setup
Unless its a simple colour or style change for text links, generally what is required is two images being switched when the mouse “hovers” over the link. Before CSS, this was done with mouseover events in image tags. Thankfully CSS makes this (and Net life in general) MUCH cooler, but even with CSS there are good ways to do things and better ways.
First, we need some graphics. Let’s use the button we created in the how to make simple glass-like buttons in Photoshop tutorial from a couple weeks back. Opening this image in Photoshop, I make a quick saturation colour change and I get my hover effect.
A common method of image switching uses the :hover pseudo-class and the background-image property, which requires two separate images. The first (or “off”) image is set as the a:link background-image, while the second (“on” or “hover”) image is set as the a:hover background-image. As so:
a:link {
display:block;
width:250px; height: 100px;
background-image: url(imagefile-off.png);
background-repeat: no-repeat;
background-position: 0 0;
}
a:hover {
background-image: url(imagefile-on.png);
}
As you can see, this works reasonably well. Particularly because in this example your browsers already loaded the images into the cache (as they were displayed above).
However, a real buzzkill is when you go put your mouse over an image and you have to wait a few seconds for the new (“on”) image to load.
What is needed is a way to load both graphics when the page initially loads, so when the user eventually “hovers” on the image, the “on” graphic is primed and ready to go.
The 2 For 1 Solution
To get around this load-time lag, the solution is to combine both the “off” and “on” images into one graphic file. Simply make a new image with the same width but twice the height of your original and place the “off” image in the top half and your “on” image in the bottom half.
Now when the graphic loads, it is loading both pictures together. Generally, this will also cut down overall filesize (due to colour sharing, the 2-in-1 image is likely to be smaller than the combined total of the previous “on” and “off” images).
Now, to get the hover effect, we again use the :hover pseudo-class. This time, however, we don’t switch out the images, we simply change its position:
a:link {
display:block;
width:250px; height: 100px;
background-image: url(imagefile-off.png);
background-repeat: no-repeat;
background-position: 0 0;
}
a:hover {
background-position: 0 -100px;
}
The first bit of code is the same as or first example, the second resets the image’s position as “0” for the left positioning, and “-100” for the top positioning – effectively raising the image so the bottom half of our image is displayed.
As you can see, the result is the same, but this time no lag. To test this, clear your browser’s cache (under Tools or Options) and view the following page:
Hover Image Example (HTML page)
Alternative
If for some odd reason you don’t like this method, another option is to simply set the hover (“on”) image as the background of a CSS element that doesn’t currently have (nor require) a background image and set the element’s background-position to some outlandish position that wont ever be displayed on your page (background-position: 1000px 1000px; works well).
Though it is not in a viewable area, it is still loaded into cache when the page is, and will cause no lag on the troublesome first hover over. However, for me it’s just a bit hackish, and I hate hacks.
Notes
In the examples above, I use the CSS long-hand to explain things, but you can just as easily do this with the shorthand background property.
For additional examples, just take a look around this site – specifically, the top menu tabs use this method.
Good luck and let me know any variations or troubles you have in the comments below.
10