Welcome to WebmasterWorld Guest from 54.224.160.42

Forum Moderators: not2easy

Message Too Old, No Replies

Pure CSS Rollover

Swapping backgrounds on <a>: what about this solution?

     
11:43 am on Aug 7, 2002 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 5, 2002
posts:142
votes: 0


I just came up with this idea:

CSS:
a{width:100px;display:block;text-decoration:none;}
a:link{background:#000 url(off.gif);color:transparent;}
a:hover{background:#000 url(on.gif);color:transparent;}

html:
<p><a href="#" title="click here to find out how to reach us">&nbsp;</a></p>

Assume the link image is 100 px wide. It works on IE and Mozilla. It has a title attribut. Even users of text only browser should be able to find out what that link does, although it's a &nbsp;.

One could even have a a:visited with a different background-image to make clear that link has already been followed. Same goes for a:active.

I don't like my own idea too much, but... what do you think?

11:48 am on Aug 7, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 4, 2002
posts:5044
votes: 0


Looks alright. There are a few tutorials dotted around on this subject, though not being gfx gifted I tend to go with plain text rollovers.

Couple of points without testing:


  • Text browsers/screen readers don't 'click'. Better to use 'follow this link'
  • You could make it slightly more robust by enclosing the a's in a 100px wide div.

Other than that, looks like a nice job and that you're enjoying the whole css trip ;)

Nick

2:03 pm on Aug 7, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:May 1, 2002
posts:351
votes: 0


Another really nice effect with CSS: you can nest images or blocks of text and show/hide them on mouseover. Eric Meyer demonstrates the effect [meyerweb.com], which I think is pretty cool.