I do think the CSS-only approach is a nobel goal and is moving in the right direction. A fairly big problem with using CSS nowadays though is browser adherance to standards (read: IE!). It's not too bad if you stick with CSS1, but anything above that tends to become an issue, and of course it is what's above CSS1 that is of interest for the most part :)
But yes, I agree completely with Nikola, and that's why I said (and I'm pretty sure I did send this message) that we might be trying to get too clever with the CSS-only approach. Going with Javascript and images is slightly less convenient to maintain, but it will likely be more cross-browser, and will degrade nicely in browser with scripting is diabled (you'd only see the usual non-hover state of the image all the time).
Speaking of maintenance convenience... I don't like to plug products, but I've come to really like Xara WebStyle for buttons and things like this. It makes changes very easy. I have a rather complex application I built at work, and one of the requirements was a TON of tabbed dialog screens (the "sheets" were all dHTML-based, and the tabs were image-based because that was the way to achieve the look-and-feel they wanted). Anyway, we're talking about something in the neighborhood of 400 or so tab images because there was around 100 unique tabs throughout the system and each tab has four different versions (normal, hover, disabled and highlighted). WebStyle makes it incredibly easy to create the images in a wizard-like way, so when someone needs a new tab or slightly different verbiage, no problem, only takes a second to generate the image. For interface element graphics that you think might change with any kind of frequency (and to me this means AT ALL!), a program like WebStyle can be your best friend.
-- Frank W. Zammetti Founder and Chief Software Architect Omnytex Technologies http://www.omnytex.com
Nikola Milutinovic wrote:
Robert Hunt wrote:
After some analysis and trial & error, I've found** that the correct JS syntax in this application is:
{HTMLElement}.style.backgroundImage = 'url( ' + img1.src + ')';
where {HTMLElement} would be "this" as in:
<a href="xxx" onmouseover="this.style.backgroundImage = 'url(' + img1.src + ')';" ...>
Why are you using background? Why not a regular image?
<a href="..." onMouseOver="img1.src = 'img1_over.gif'" onMouseOut="img1.src = 'img1.gif'">
<img name="img1" id="img1" src="img1.gif">
</a>
Or you can use DOM style: onMouseOver="document.getEllementByID( "img1" ).src = 'img1_over.gif'"
Watching the Tomcat access log and using permutations of CSS and the FrankZ/jscript-caching-strategy to achieve the rollover effects, I've found that the background image is requested:
IExplore 6.0 Netscape 7.2 CSS each mouseover once per page JS each mouseover once per page
Try the real image, that is pre-fetched in a script.
So, as has been 99% of my experience, NS does it right, IE leaves a bit to be desired. <heavy sigh> It appears that when ".style.backgroundImage" is modified in IE, another HTTP GET request is triggered. I'm going to see if I can do a "swap" with a hidden element that (already) has the desired style and see if I can fake out IE.
I understand what you want to do. You want your rollover to be done in CSS, no JScript or JavaScript involved. I'm afraid ther is no ellegant way of doing it. Using the background is awkward. That <a> ellement has to wrap something other than thin air. So you'll be placing a transparent GIF or something else traslucent inside the tag.
No, image rollovers work best the traditional way.
Nix.
--------------------------------------------------------------------- To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
--------------------------------------------------------------------- To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
