Aug212007Advanced CSS Rollovers Tutorial on CreativePro.com
You don’t need JavaScript to add image rollovers to your Web pages. You can achieve the same effect with just CSS. I’ve written a tutorial for CreativePro.com that covers the basics of this technique and helps solve some of the problems (like the rollover image not showing up immediately) associated with basic CSS rollover techniques.
You can find the tutorial at http://www.creativepro.com/story/howto/25816.html.
2 Responses to “Advanced CSS Rollovers Tutorial on CreativePro.com”
Dave McFarland August 29th, 2007 at 8:47 am
Hi Bill,
There’s no way to add a timed delay in CSS. You must use JavaScript for that. However, you can use CSS to create drop down menus that don’t rely on JavaScript–you just can’t control the timing of the drop downs. You can check out the tutorial on this page: http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp
The new Dreamweaver CS3 also has a tool for adding drop down menus. It does use JavaScript, but it was built to produce HTML that uses very simple HTML that is completely accessible to screen readers.
Bill Patterson August 28th, 2007 at 10:59 am
We are changing out templates to CSS 508 compliant but our horiz menu is going to be CSS using text only in a drop down method, no graphics. I read your article and was wondering if you knew how to add a second delay on a mouseover without using javascript? We want to keep this as pure as possible for screen readers and therefore would like to add some delay so left hand navigational menus can be gotten to when mouseover the main horiz ones.