tomcat-users mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Frank W. Zammetti" <>
Subject Re: Reducing network traffic for rollover images
Date Mon, 04 Oct 2004 05:53:20 GMT
I agree, and I actually had typed up almost an identical message but 
then decided not to send it (for some reason that I don't really recall).

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 

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

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=" = '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:
> For additional commands, e-mail:

To unsubscribe, e-mail:
For additional commands, e-mail:

View raw message