Cross-fading disjointed image rollover
This advanced technique uses CSS-sprites and JavaScript to change an image which is not directly associated to the link. It uses accessible and clean mark-up, with unobtrusive JavaScript, and a little CSS. Content, presentation and behaviour are completely separated. The JavaScript acts on the XHTML using the style sheet.
The JavaScript is configurable and completely reusable by changing four variables.
Related Submissions:
- Creating a Fading Header Since I’ve gotten lots of emails asking me how I created the fading header graphic for Bits and Pixels I’m going to write a tutorial...
- Timed CSS Stylesheet Switch Using PHP Today I’m going to show you a pretty clever technique for changing the Cascading Style Sheet by time using PHP. ...
- XML Image Scroller Gallery AS2 Free flash image gallery configurable through the XML file, supports autoplay, image description, mirror thumbnail and roll over effect. ...
- How to Build a CSS Image Viewer the Clever Way Image Viewers are fairly common on websites now-a-days. Most use some form of JavaScript to change images, some use Flash. This is a problem if...
- 5 Step Style Sheet Weight Loss Program Does your style sheet ever feel bloated and overweight? If you notice some love handles growing on your style sheets, it may be time to...