Web Design/Rollover
From Wikibooks, the open-content textbooks collection
Many web sites have "rollovers" -- when you move your mouse (or tab your cursor) over a picture, the picture changes. Then when you move your mouse (or cursor) elsewhere, that picture changes back to normal. ("Rollovers" are sometimes called "mouseovers").
In graphically intensive web sites, rollovers are useful to emphasize parts of the image you can click on -- as opposed graphics that look pretty but don't do anything when you click on them.
There are several different ways to implement rollovers. Many JavaScript books tell you how to implement rollovers in JavaScript. A few CSS books tell you how to implement rollovers in CSS.
This Web Design book has the freedom to tell you which one -- JavaScript or CSS -- is currently regarded as "Best Practice".
Contents |
[edit] "clean" JavaScript rollovers
... fill in details here ...
Does this require something like "Check an image or file exists with AJAX" to figure out which images have rolled-over version and which do not?
...or, since checking for files is slow, and the algorithm is already constraining filenames, using a filenameprefix of mo_ could flag only those imagaes where an _omo suffixed file can be expected.
[edit] rollovers with in-line JavaScript event handlers
... using onmouseover ...
... fill in details here ...
[edit] rollovers in CSS
With CSS level 2.1, you can use "hover" to create some rollover effects without JavaScript.
... fill in details here ...
CSS allows you to use text in your navigational links, (it just changes the style when you hover over them).
Since Google can't read "text" embedded in images, but it can read the text in CSS-styled navigation bars, CSS rollovers can give the linked-to pages better Google rankings (which is a good thing, right?).
Another way of using the CSS "hover" code is to use it to change the opacity of an image[1].
... fill in details here ...
However, some special effects are simply impossible to do using CSS. To implement those more complex effects, CSS is not enough you must rely on more complex technologies such as JavaScript or Flash.
[edit] rollovers in Flash
... fill in details here ...
[edit] navigation bars
... please help fill in ...
[edit] mystery meat
Some web sites use fairly generic icons without any text for the "normal" view, then when you mouse over them, suddenly the image changes to a more specific icon plus text to explain where clicking that icon will send you.
Many people regard this as a Bad Idea [2] [3] [4], because it forces users looking for something in particular to "scrub" every image with the mouse to see where each icon goes, rather than scanning the navigation with their eyeballs, and then moving the mouse pointer directly to the desired link.
