Now I've looked at the samples and it seem it can't be done without having some kind of text as the link and they want to use their own font on the imgs. (I know... but they pay me and I do what they want... almost)
So can the same effect as a javascript img swap possible using CSS only?
At that point you use a unique set of images and css for each swap, probably assigned by id with the behavior outlined in a class. I haven't tested this, but I suspect you're looking for something like this:
<style type="text/css">
#foo { background: url(/img/foo.gif) no-repeat 0 0; }
#bar { background: url(/img/bar.gif) no-repeat 0 0; }
a.rollover:link { background-position: 0px 0px; }
a.rollover:visited { background-position: 0px 10px; }
a.rollover:hover { background-position: 0px 20px; }
a.rollover:active { background-position: 0px 30px; }
</style><a href="foo.html" id="foo" class="rollover"><img src="/img/clear.gif" height="10" width="20" alt="Foo" /></a>
<a href="bar.html" id="bar" class="rollover"><img src="/img/clear.gif" height="10" width="20" alt="Bar" /></a>
I'm not sure if this is entirely kosher. Maybe there's something more appropriate than a clear gif to make the link fill up some room? Would it be clickable if you simply gave foo and bar a height and width with display:block?
--
Ben Curtis
WebSciences International
http://www.websciences.org/
v: (310) 478-6648
f: (310) 235-2067
****************************************************** The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
