Creating rollovers / buttons without java

Not open for further replies.


Well I was fiddling with my personal site yesterday and I wanted to figure out a solution to do rollover buttons without java, in standard xhtml and css.

This presented two problems. One, creating the actual rollover effect, while still having a link in place, this to be done with divs. Two, preloading the rollover images (which was also done using java in the body tag).

Happy to say I managed to work out both problems.

First one I handled by using two-state div css selectors as in

div_rollover {} and div_rollover:hover{}, for one the background would be the initial image and for the second the background would be the rollver image.

Now the problem was that you cannot validly create a link from a div. so, what i did was create a transparent gif image with the exact size of the rollover images in the background, and place that inside the div, with a link on it. This solved my first problem.

Now for the preloading. This took me a bit to track down, but was eventually very simple. All you need to do is create an extra class say preload{} and set display:none. The you put the <img src="whatever" class="preload"> inside the actual page, wherever you want (I recommend somewhere to stay out of the rest of the code though). They will not show up in the actual layout, but will be load into the browser cache because the protocol demans so, even if they don't show up.

My methods work fine in Firefox. Unfortunately IE doesn't seem to live hover for divs, so the rollover effect doesn't work in IE, but the buttons are otherwise functional.
Not open for further replies.