Rollovers without JavaScript

JavaScript has it’s places, but it should rarely be used for hover overs (In menus and such). However, this is where it is used most, simply because many people are unaware of the alternative. Using stylesheets, and anchor tags (Or any other tag for that matter), hover overs are easy. I also reccomend CSS sprites, which use 1 image for a series of buttons, but since the browser only needs to download 1 file, they all load faster. Your menu, both pre and post hover should be 1 image, so no preloading needs to be done.

All browsers should support the :hover attribute on most elements.

The css is similar to this:

#link1 {
    width:150px;
    height:30px;
    background-image:url('images/menu.jpg');
    background-position: 0 0;
}

#link1:hover {
    background-image:url('images/menu.jpg');
    background-position: 0 -150px;
}

#link1 span {
    display:none
}

and the html like this

<a id="link1" href="index.html"><span>Home</span></a>

The span tags are for search engines, and eventually I’ll figure out a way of showing them if images are disabled. They also show up when stylesheets are disabled.

One Reply to “Rollovers without JavaScript”

  1. Hey great info man, thanks. Never knew you could do that

Leave a Reply