Flickering graphics for rollovers

One common thing that crops up with graphical navigation bars is when they flicker whilst an image preloads (or the browser renders the change rather slowly) for example.

There are many traditional ways around this... Javascript preloaders being one example. How about a purely CSS, compliant version? Well here you go...

CSS background-position
Simple right? Well here goes... You need accessible links so you need a text equivalent... You need your links in a list too... OK let's get on with it:

<ul>
<li id="link1"><a href="http://www.google.com">google</a></li>
<li id="link2"><a href="http://www.yahoo.com">yahoo</a></li>
</ul>

That's the xhtml done... No seriously that's it - the rest is pure CSS - No JavaScript I promise!!

Ok so our nav bar is 40px in height.. And each is a graphic with the name of our link on it... When we rollover it displays with the graphics in inverse colours.. Cool?

OK so you need two graphics per link... One in the on state and one in the off state... Right? Wrong.

The way around the flicker is to have the two states on the same graphic and change the background position of the image... That way we have no flicker or preload issues...

ul #link1 a {
background:transparent url(/images/link1.gif) no-repeat scroll left top;
}
ul li a:hover, #main_nav li.selected a {
background-position:0pt -40px !important;
}

It really is that simple... We just move the graphic (background-position) up by the height of our original bar and voila!

Ok but our text still shows OVER the grpahic in our anchor tag? Well seeing as we're all CSS purists let's just move that with CSS...

ul li a {
display:block;
float:left;
height:0px !important;
overflow:hidden;
padding:40px 0pt 0pt;
}

Simple... Really nice, clean, accessible graphical navigation WITHOUT JavaScript.

Code examples written by Dom Smith, one of our coding buddies, from www.webmotivated.com

Accessiblity and DHTML Menus

The general consensus amongst users unfamiliar with what you can and can't do with web standards and accessibility is that javascript and accessibility don't mix? This is a total fallacy.

After much research the conclusion is that DHTML is fine. As long as the code is structured using lists and you give alternatives for users, such as "onkeypress" instead of "onclick" events ? basically drop-down-menus are perfectly feasible.

For example the top level DDM would have an "onclick" event to go to the top-level homepage. Then, for accessibility compatibility, we would add an "onkeypress" (and an access key) to the link so that users, unable to use a mouse, could also go directly to the page.

This is fine as the user will then see the full navigation on the subsequent page, or, for users using screen readers or non-visual browsers where the navigation would effectively be hidden, the navigation elements would be coded using pure web standards so that all of the navigation is "visible" to those users.

related link