Any JS'ers left? I need a little help?

[PicnicTutorials]

I've exhausted this thread... http://www.sitepoint.com/forums/showthread.php?t=627345 If you care to read it, cool, if not, in short I'm attempting to make a better image replacement to go along with a sprite navigation I'm making. Currently, there is no known method that works (WITH SPRITES) with css on/images off.

 

I'm attempting to incorperate Pauls method http://www.pmob.co.uk/temp/navimagereplace.htm with my sprite navigation. This works for the most part, but fails when it comes to :active and :focus psuedos in a few browsers. You'll notice :hover works fine!

 

Here is my little test page... http://www.visibilityinherit.com/projects/test.html see the problem enlies in the fact that the background image is applied to a non anchor element (hense my problem), but nessesary for the perfect image replacement! I have come to the conclusion that JS is my only fix for the lacking browsers!

 

So... Long story short... Can someone please help me add Tony's JS script http://csscreator.com/node/17498 (which adds support for active and focus on non anchors) to my little test page. After which, I'll incoperate it into my sprites nav. He gives his last and updated code at the bottom of his thread. I tried obviously, but I couldn't get it to work. Thanks!

Edited July 17, 2009 by Eric

[PicnicTutorials]

Check this out... Or you can do it like this (semantic, probably not!).

 

There are two examples in the code. One uses two active links (with same urls - obvious drawback). But, it works perfect, in all situations and in all browsers! You "could" remove the dead link, but then no good for search bots/screen readers. The other breaks in CSS Off situation, and has no text associated with the link. I don't know, food for thought. Let me know if anyone thinks of something I haven't.

[PicnicTutorials]

No need, I CSS'ed it!