[thelist] [Javascript] unobtrusive scripting, rollovers and IE7, oh my!
Christian Heilmann
codepo8 at gmail.com
Wed Jul 19 02:41:42 CDT 2006
> >
> > I'm working with unobtrusive scripting for the first time in order
> > to get a lot of extraneous cruft out of my markup.
> >
> > I'm using Scott Andrew's attachEvent code (http://
> > www.scottandrew.com/weblog/articles/cbs-events), which is working
> > fine. It's my home-grown rollover code that is throwing the error.
>
> i've been using a fantastically easy function, Simple Swap (http://
> jehiah.com/archive/simple-swap) which works universally and with zero
> configuration, for rollovers. basically the same idea, but this adds
> pre-caching of the rollover image on page load, a nice touch.
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
The trick when using addEvent() (instead of the YUI ones, cheers for
the plug Matt ;-) ) is also to use getTarget() to retrieve the element
that triggered the event:
function getTarget(e){
var target = window.event ? window.event.srcElement : e ? e.target : null;
if (!target){return false;}
while(target.nodeType!=1 && target.nodeName.toLowerCase()!='body'){
target=target.parentNode;
}
return target;
}
The while loop works around an issue of Safari, as it sends the text
inside a link as the target rather than the link itself.
Check the source of automatedRollover for the rest:
http://beginningjavascript.com/Chapter6/automatedRollover.js
However, YUI goes so much further with this, as you can also send
objects to the event listener and change scope and so on and so forth.
Brilliant job.
--
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