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: [EMAIL PROTECTED]
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: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]



Reply via email to