[thelist] [Javascript] unobtrusive scripting, rollovers and IE7, oh my!

Christian Heilmann codepo8 at gmail.com
Wed Jul 19 04:13:04 CDT 2006


> > If wouldn't call using bespoke invalid attributes unobtrusive, but
> > that's just me. The bleeding ego rollover does the same but works
> > without invalid attributes:
> >
> > http://www.dnolan.com/code/js/rollover/
> >
> > I've extended this to use addEvent in the 6th chapter of my book:
> > http://beginningjavascript.com/Chapter6/exampleAutomatedRollover.html
>
> Nice.  If for some reason you prefer your image filenames to describe
> the image rather than what you're using it for, you can always try
> something like <img src="emptyCircle.gif?rollover=solidCircle.gif">
> and scripting your way around that!
>
> I thought CSS was *the* unobtrusive way to do rollovers, with a hover
> HTC behavior for IE if necessary (if you want rollovers on elements
> that aren't hyperlinks).

Even on hyperlinks, as you do not need the HTC then. If you use one
big picture and use background-position you even have no trouble with
preloading:

http://wellstyled.com/css-nopreload-rollovers.html

However, JavaScript allows you to extend the hover functionality to
reach things that aren't in reach for CSS (as - on today's browsers -
you can only affect elements inside the one you hover over, not
others).

An example is the parent rollover which changes the background of the
parent element when you roll over the links.

http://www.beginningjavascript.com/Chapter6/exampleParentCSSRollover.html

I knew it was a good idea to write that chapter :-)

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/



More information about the thelist mailing list