tomcat-users mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Robert Hunt" <robert-h...@comcast.net>
Subject Re: Reducing network traffic for rollover images
Date Sat, 02 Oct 2004 16:47:59 GMT
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 + ')';" ...>

or some other js variable obtained by, like say, document.getElementById().



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


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.


-- BUT --

Through all of this, my original question remains; Is there a way to provide 
suggestions/hints/minor-coercion to an HTTP client (via headers or other 
response codes/messages) that would coax IE (and perhaps other browser 
implementations) to cache the image at least once per page load?

Thanks!

-- RH


** Googling for "style.backgroundImage" led me to 
http://www.dreamstart.nl/sitedata/www.dreamstart.nl/js/menu.js.cfm



----- Original Message ----- 
From: Robert Hunt
To: tomcat-user@jakarta.apache.org
Sent: Friday, October 01, 2004 6:32 PM
Subject: Re: Reducing network traffic for rollover images


Frank,

Thanks for the code snippet.  However, I'm having a bit of trouble mapping
your jscript to the CSS that currently creates the rollover/hover  effect:

    a.glink:hover {   background-image:
url("../images/glblnav_selected.gif");   }


I've tried several permutations for the anchor that has the effect

   <a ... onmouseover="this.style.backgroundImage = img1">

   <a ... onmouseover="this.style.backgroundImage.src = img1.src">


and on and on and none work -- no js exceptions are triggered, but there's 
no effect. 


---------------------------------------------------------------------
To unsubscribe, e-mail: tomcat-user-unsubscribe@jakarta.apache.org
For additional commands, e-mail: tomcat-user-help@jakarta.apache.org


Mime
View raw message