CSS rollovers - no javascript!
I have seen a couple of examples of css roll over buttons on the web but they changed a simple square block of colour and I wanted something more stylish - more like what you do with graphical javascript rollovers. I decide the way to do it was to use an image as the background and change it in the style for a:hover and a:visited.
First of all I made 4 graphics. The first was a 15px square transparent gif and the other three were coloured buttons also 15px square.
I then coded a link and included the transparent_15.gif before the links text: This is a link to another page.
This is the link to the demo page
Notice I have added both a title tag for the link and an alt tag for the image to help with Accessability.
Then I added the css:
a { background-image: url(orangeround_15.gif); background-repeat: no-repeat; background-position: 0px 3px; color: #000000; text-decoration: underline}
a:hover { background-image: url(greenround_15.gif); background-repeat:
no-repeat; background-position: 0px 3px; color: #000000} body { font-family: Arial, Helvetica, sans-serif; font-size: 12px}
p { padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px} a:visited { background-image: url(greenroundtick_15.gif);
background-repeat: no-repeat; background-position: 0px 3px; color: #000000 }
The orange button appears as the link style background and the transparent gif ensures the text is moved to the right the correct amount. When you mouse over the link the a:hover style comes into play which changes the background to the green button. When you have visited the link and come back the a:visited style shows the green button with tick as a background. You could also add images for a:active if you wished. You could do this without the transparent gif by adding 15px left padding but we can use this technique for links in the middle of a paragraph of text.
Next short: It's a start
Previous short: Leith Hill walk
