Mouseover Images, No Javascript

Edit (December 2008): Changes to the code and styling of the Fog of Eternity site mean that examples shown on these pages may not work. The technique described should still work OK if you implement it yourself.

A limitation in web page design is the small number of standard fonts which you can use on a site to ensure the widest cross browser accessibility. There are only a few fonts which you can be confident that every person browsing the site will have on their PC. Using a rare or unusual font when designing a web page might look great on your own PC when you test the page, but if someone browses and they don’t have that font installed, the page will default to a standard font which may look unattractive or inappropriate. This page gets around that to some extent through the use of CSS, which specifies an “order of preference” for fonts. It defaults to Century Gothic, which is common but not entirely standard, but has a secondary font choice of Arial, which is a web standard font, for browsers without Century Gothic installed.

Still, despite being able to use CSS to list an order of preference for fonts, obviously I want web pages to appear as close as possible to my original design vision as possible. And in some situations I’m pretty confident that a font I’m using is rare enough that almost nobody will have it installed on their computer. Now I’m not going to use such a font for the main content of a page, but I might want to use it for menus and buttons. And particularly if I’m using such buttons as hyperlinks, I want people to know it’s clickable. So just as a usual hyperlink changes colour when your mouse hovers over it, I want my unusual buttons to do the same.

It’s relatively easy to make buttons and links that look attractive when the mouse hovers over them. Some solutions make use of Javascript, but this is undesirable for accessibility because if someone is browsing with Javascript disabled then obviously they won’t be able to see the mouseover animation. But for an accessible button it’s completely possible to use just CSS to achieve the desired effect. To demonstrate this I’m going to make a link to a Camarilla roleplaying web page I have in development, using a font based on the movie ‘28 Days Later’.

The mouseover effect is created through the use of a CSS class and the background-image and related properties. I’ve given the <a> tag for the link a CSS class called “mouseover”. And I’ve given that class a background-image property that links to the image file shown on the right. This single image will be used for both the default and the mouseover properties of the link, because I want the image to load when the page first loads and for there to be no delay in loading a second image when the mouse first hovers over the link.

I can do this because background images are clipped by the size of the area they are the background for. The full image is 48 pixels in height, but the <a> tag surrounds a spacer.png file which is sized to be only 24 pixels in height.

The HTML code for the link looks like this:

<a class=”mouseover” href=”http://www.themeritocracyprevails.com” title=”The Meritocracy Prevails”><img src=”http://www.fogofeternity.com/images/spacer.png” alt=”The Meritocracy” height=”24px” width=”221px” /></a>

This means viewing normally we’ll see only the top half of the background image – i.e. the black text. But using CSS we can set the properties of the background image to change when the mouse hovers over it.

a.mouseover, a:visited.mouseover
{
width: 221px;
height: 24px;
background-repeat: no-repeat;
background-position: 0px 0px;
background-image: url(‘http://www.fogofeternity.com/images/2007.11.14_mouseover.png’);
}

a:hover.mouseover
{
background-position: 0px -24px;
}

So in the CSS we have the default position of the background image, but when the mouse hovers over that link, the background image is shifted vertically up by 25px. This means that the black text is hidden and the red text is visible, giving the mouseover effect. Notice that while 50% of the image height is 24px we’ve actually shifted the background by 25px. No particular secret here, dependent on the image you sometimes have to tweak it by a pixel or two either way to get a smooth mouseover effect.

That’s pretty much it, save for glitch in Mozilla based browsers. The CSS already provided works fine on Internet Explorer 6 & 7, but Mozilla based browsers such as Firefox don’t render the image correctly, and clip it so that it doesn’t appear fully as demonstrated in the image on the right. It took me a little while to resolve this issue, as it’s not something that can be corrected using “standard” CSS. Instead I need to add a mozilla specific property to the CSS.

a.mouseover, a:visited.mouseover
{
width: 221px;
height: 24px;
background-repeat: no-repeat;
background-position: 0px 0px;
background-image: url(‘http://www.fogofeternity.com/images/2007.11.14_mouseover.png’);
display: -moz-inline-box;
}

Once the Mozilla glitch is corrected the mouseover link should be working fine. With the basics of accessible mouseover buttons it’s easy enough to start incorporating them into menu lists etc. and to develop a much wider functionality within a site.