CSS, HTML, Web

CSS – Image Replacement in Navigation (“Rollovers”)

In This Lesson

Making “Simple” rollovers with css
Making “Advanced” rollovers with css image replacement
Additional image replacement methods
Eliminating the split-second “blip”
Video tutorial walk-through

“Simple” CSS Rollovers

Using HTML Generated Text Links with Uniform Background Images

The navigational bar below, “#navbar1”, is an example of using image replacement for links while still making it so that screen readers can read the relevant text. This example also makes it so that text links are readable and available to seeing users even when they disable all images in their browsers.

In this example, the following are true:

  • The link text is true HTML text
  • The colored gradient backgrounds are actual images
  • This model uses 2 images: one for normal-state, and another for the hover-state.

“Advanced” CSS Rollovers

Using Specialty Font in Buttons = Using 2 Background Images Per Link

The next navigational bar, “#navbar2”, is an example of using image replacement for links while still making it so that screen readers can read the relevant text. This example also makes it so that text links are readable and available to seeing users even when they disable all images in their browsers.

In this example, the following are true:

The text you see by default is image-based text. The text was created in Adobe Illustrator and saved on a gradient background sized at 100px wide x 30px tall. This is so you can use a special font to control the look and feel of the design without worrying that the end-user’s computer won’t have the font to display properly. If they lack your special font specified simply with CSS, the user’s browser would substitute a different font which you likely have no control over. Youcan go to http://typetester.org to see which font options are safe!

  • There are a total of 8 images used below: 4 distinct links each having both normal and hover states.
  • There is still a text-based HTML link underneath each image so that:
    • if screen readers hit the link, they can still read the text and
    • if a user disables images in a browser, a seeing person can still see the text link
  • If you disable the images in your browser, you will see the difference in how these links all look. Give it a try.

Review the code and read the comments to understand how this is achieved. (NOTE: when you open the css page in the browser, you can copy the code into a new CSS file to see the color-coding, which is easier to read!!!)

*Why would anyone disable images???: It’s not uncommon for people with phone browsers or small pda devices to do this, especially since the main function for using these device browsers is to get information fast without a bunch of complication.

Information on Other Image Replacement Methods

Important Notes

There are other methods for using image replacement, but the problem with most of them is that you will either make the text invisible to a screen reader or to a sighted viewer (or both). Here are some methods that will do these no-no’s:

  • Fahrner Image Replacement (FIR)
    • uses “display: none;” property….it also hides the text from many screen readers!
  • using “visibility: hidden;” ….hides it from pretty much everyone
  • “text-indent: -999em;” (or some negative value)….hides it from sighted people if images are disabled
    • this might be an acceptable method, though, for a Skip-Navigation since sighted people can easily and quickly scroll or tab down to the content area.

Argh! Why do hover images “blip” the first time I roll over them???

An image will not load until it is called by the browser for the first time, and it takes a split second for even small images to load. Because hover images are not used (or “called out”) by the browser until the hover event occurs, it must load itself for the first time when it is first activated by the hover event. After the first time each is activated, you’ll notice that the problem disappears. That is because the image is now stored in the browser’s cache, or temporary memory.

Okay, so how can I avoid that problem?

You can either use a javascript image preloader script, OR you can do some tricky css to preload the images. You can place the same hover images inside of a
<div> tag with a special “id” that is set to the “display” property value of “none”. Here’s an example of a “How-To”:

First: Place some code in your linked css file:

#preloader { display: none; }

Next: Place some HTML markup at the beginning or end of your HTML file:

<div id="preloader">
<img src="image-folder-path/image-01.jpg" width="1" height="1" alt="" />
<img src="image-folder-path/image-02.jpg" width="1" height="1" alt="" />
<img src="image-folder-path/image-03.jpg" width="1" height="1" alt="" />
</div>


The images will load to the browser’s cache even though they are not visible in this special div, and that way people will not see the flash on screen upon first hover. NOTE: you only need to preload the hover-state images, NOT the normal-state images. Notice that the “alt” values are empty. Because these images are not intended to have any semantic or contextual meaning, you can leave the alt tags blank. “Alt” is still required on img tags at all times, but a blank value indicates that it is “decorative” or otherwise meaningless.

 

Video Demos to Illustrate Implementation of Lessons Above

Each of the videos below are sequential and are 5 minutes in length or shorter.