[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