Using CSS to create rollover image links without javascript

Accessible, gracefully degrading and media format compatible styling solutions

Using Javascript of Microsoft's JScript to implement image rollovers is the more established method of interacting with user actions and events. However, some may prefer not to have to write the function.

Being that rollovers are mainly an aesthetic choice and feature, they belong more to the realm of content presentation than behaviour because like font and colour choices and combinations, using rollovers serves a little more than visually informing the user that the element is clickable.

Secondly, not all media support javascripting of visual elements. Aural, Mobile and other non-traditional web browsing tools either do not support images altogether or the images were not necessarily designed for their screen-sizes, and so the rollover elements are not suitable for use in these media. If one uses CSS in place of javascript t implement rollovers, it will be possible to quickly target the interactivity to certain browsers and media using the media="screen" or media="aural" attribute of a style tag and beyond visual rollovers, corresponding voice changes can be used to create the same effect or emphasis in non-visual browsers.
Thirdly, it is relatively more complicated to cater for media that do not need rollovers and the coding is generally more involving to create in Javascript as opposed to CSS judging by the number of lines of code required to implement the same effect using either method.

Lastly, using CSS to implement clickable rollovers triggered by the :hover pseudo-class ensures a gracefully degrading solution for browsers that do not support CSS or images.

XHTML Markup

- Create a link as you would in plain XHTML markup
- Place the link_text in a SPAN tag with a class (or ID) to be able to control it in CSS (use class to be able to have more than one such item in any given page) this class will implement invisibility.
- Add a class attribute for the link anchor that places a background images and swaps it on mouse0ver using a :hover pseudo-class.
<a xhref="http://www.cmsproducer.com/#" title="Descriptive title of my link destination" class="link_href"><span class="link_text">my Link Text</span></a>

CSS
Style the class that you chose for your link text as you would like but include the following key entries:

link_text

{/*make the link text transparent*/
visibility: hidden;
}

.link_href
{/*Display this image in the link area*/
background: url(imagepath/mouseout_button.gif) no-repeat;
}

.link_href:hover
{/*Display this image in the link area when you mouseover*/
background: url(imagepath/mouseover_button.gif) no-repeat;
}

CSS rollover demo

<style type="text/css">
a.css_rollover_demo
{
background: url(files/out_button.jpg) no-repeat left;
width: 70px;
height: 40px;
}

a.css_rollover_demo:hover
{
background: url(files/over_button.jpg) no-repeat left;
text-decoration: none;
}

a.css_rollover_demo span
{
visibility: hidden;
}
</style>

<a class="css_rollover_demo"><span>CSS rollover demo</span></a>

Description of Strategy
As long as CSS is supported by the browser, the link text will be invisible and the background image will be displayed. The pair will still be clickable as a link because the invisible link text is still linked (do not use display:none; as it will completely remove the link text, the link and the space it occupies)image will display. If CSS is turned off, the background image, and the :hover effect will be turned off; but the previously invisible link text will now be visible thus ensuring graceful degradation. Non-visual/traditional web browsers will be able to access the link-text, title and and alt attributes with this setup thus ensuring accessibility.