Cool & accessible javascript link effect
Some time ago Niclas Bergström asked me for some tips on a javascript link effect, similar to effects we’ve seen in flash since day one. The link would kind of switch when you hover it. The idea is fully by Niclas, so I’ll give all the cred for it to him.
A challange here and there is always nice, so I thought I’d take it on me. Javascript really isn’t my thing, but I think the result turned out pretty nice.
I had three main priorities when writing this
- Easy to use & implement
- Accessible & search engine friendly
- Semantically correct markup
I think i managed pretty well. Give it a try!
Here’s how it works:
Just add class="switch" to your existing links and include linkswitcher.js in
your document. Style your links with css. The switched link will use a class
called switchHover. View the source of the example css for further info. That’s
it!
Notice that you can’t apply a margin or padding to the a element itself. Apply
it to the parent element (in the example the li, see example 3)
The work is licensed under CreativeCommons Attribution-ShareAlike 2.5 license, which means that if you make modifications, you will have to share it under the same license. If you share it, I also want to be noted as the original author, with a link back to this site. The usage for any purpose, however, is totally up to you.