The rollover impact – easy interplay that assists usability. In case your design is constant, a person will solely need to expertise the impact as soon as to know what it does all through your total web site, which makes my HCI man giggle with delight.
Article Continues Under
For years we’ve been preloading our on–state photographs to help the browser in its rollover presentation. Preloading will increase the burden of the preliminary obtain, however provides to usability by reducing the wait time for an on–state picture to look. Decreases, however might not remove. Even when preloaded, some browsers current momentary pauses previous to rendering the picture.
Apart from being annoying, this momentary pause could cause issues when a customer mouses over a component in passing or too quickly. If the mouse motion is just too quick, the browser doesn’t have time to render the picture and, worst–case state of affairs, can current you with a damaged picture icon.
For optimum usability, a rollover should be instantaneous – BAM! – or the impact is diminished. It’s drastically diminished in these instances when the on–state just isn’t preloaded correctly, or in any respect, and the browser has to return to the server for the file. Even with a excessive–velocity connection, this may drastically hamper the customer’s expertise.
The answer? Don’t swap photographs.
Observe: The next instance will show appropriately in IE5+ and Opera 6+. On this creator’s opinion, Mozilla/Netscape 6’s dealing with of the CSS leaves room for enchancment, which shall be addressed later.
Due to the marvel that’s CSS, we will spontaneously change the background coloration. For the reason that browser doesn’t need to reference a further file, the impact is fast and rewarding. (Clearly, this requires the cooperation of the designer: background colours should be stable; textual or iconic components can’t be anti–aliased; and, in these examples, the picture should be a GIF.)
The above was achieved on this web page by way of the next CSS:
img.ala {background: clear;}
a.ala {background: #fff;}
a.ala:hover {background: #fcc;}
…and the next HTML:
<a href="https://alistapart.com/article/rollovers/foo.html" class="ala"> <img class="ala" src="foo.gif" /></a>
That is a particularly sleek possibility because it offers a direct response to the customer’s actions, and has the additional advantage of being safely ignored by a browser that doesn’t perceive it.
By the way in which, if you wish to change the textual content coloration as a substitute of the background coloration, the CSS technique is similar; solely the picture preparation is totally different. As a substitute of the background picture being clear, the textual content is. In impact, you create a stencil for every aspect. The background coloration will present by way of your stencil revealing your textual content. Change the background coloration as proven, and also you’re in like Flynn.
Sadly, in my expertise (and I’m experiencing it now), NS6 sometimes doesn’t render the background coloration appropriately, so I beef up the CSS with redundant JavaScript.
So long as we’re including scripts, we will beef up our nav a bit, including affect and value to provide it that further “worth–added” taste.
Observe: the script that follows is designed to work with IE5+, Mozilla/Netscape 6 and Opera 6. If you’d like code that can work on different browsers, you should utilize the cross–platform DOM utilities embrace file, developed in a earlier ALA article.
{A number of readers have reported a “leaping” bug in IE6 on some platforms that impacts the DOM-based instance proven subsequent. We reported the bug to Microsoft in March, 2002. Due to all who despatched display screen photographs and experiences. – Ed.}
Sure, I do know the colour scheme is lower than beautiful, however I believe it makes the purpose. The JavaScripting ideas used right here are usually not tough; it’s merely a matter of utilizing the DOM to get at what you need. By manipulating a number of components, we will make our rollovers convey further data with out sacrificing efficiency.
The period of time it takes your rollovers to activate could seem trivial, however it’s only one extra method to tighten up your websites. I do know that my designers discover. I don’t know if the customers discover, however, you already know what? I don’t care. I simply care that they don’t discover a gap of their expertise.