| Welcome to WebmasterWorld Guest from 184.108.40.206 |
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
|Become a Pro Member|
|Pure CSS Rollover|
Swapping backgrounds on <a>: what about this solution?
I just came up with this idea:
<p><a href="#" title="click here to find out how to reach us"> </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 .
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?
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 ;)
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.
All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved