Mouseover Code - Hits Server Every Event

[Craig]

The code below hits the web server EVERY time the user mouses over one of
the buttons. If you move your mouse in/out 10 times, there are 20 hits to
the web server (10 for image.jpg and 10 for image-over.jpg).

Can someone tell me why does this code hit the server every time for the
mouseover image? It was actually generated by Adobe ImageReady, but I can't
figure out why it would - it's barely different than code I've used hundreds
of times that works perfectly.

<script type="text/javascript">
<!--

function newImage(arg) {
if (document.image s) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.image s && (preloadFlag == true)) {
for (var i=0; i<changeImages. arguments.lengt h; i+=2) {
document[changeImages.ar guments[i]].src = changeImages.ar guments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.image s) {
Home_over = newImage("image s/Home-over.gif");
Help_over = newImage("image s/Help-over.gif");
Chat_over = newImage("image s/Chat-over.gif");
Email_over = newImage("image s/Email-over.gif");
Button1_over = newImage("image s/Button1-over.jpg");
Button2_over = newImage("image s/Button2-over.gif");
Button3_over = newImage("image s/Button3-over.gif");
Button4_over = newImage("image s/Button4-over.gif");
Button5_over = newImage("image s/Button5-over.gif");
Button6_over = newImage("image s/Button6-over.gif");
Button7_over = newImage("image s/Button7-over.gif");
Button8_over = newImage("image s/Button8-over.gif");
preloadFlag = true;
}
}

// -->
</script>


(later in the HTML)

<a href="gallery.a spx"
onmouseover="ch angeImages('But ton1', 'images/Button1-over.jpg');
return true;"
onmouseout="cha ngeImages('Butt on1', 'images/Button1.jpg'); return
true;"
onmousedown="ch angeImages('But ton1', 'images/Button1-over.jpg');
return true;"
onmouseup="chan geImages('Butto n1', 'images/Button1-over.jpg'); return
true;">
<img name="Button1" src="images/Button1.jpg" width="133" height="30"
border="0" alt="Gallery Directory">
</a>

[Brian Genisio]

Re: Mouseover Code - Hits Server Every Event

Craig wrote:
[color=blue]
> The code below hits the web server EVERY time the user mouses over one of
> the buttons. If you move your mouse in/out 10 times, there are 20 hits to
> the web server (10 for image.jpg and 10 for image-over.jpg).
>
> Can someone tell me why does this code hit the server every time for the
> mouseover image? It was actually generated by Adobe ImageReady, but I can't
> figure out why it would - it's barely different than code I've used hundreds
> of times that works perfectly.
>
> <script type="text/javascript">
> <!--
>
> function newImage(arg) {
> if (document.image s) {
> rslt = new Image();
> rslt.src = arg;
> return rslt;
> }
> }
>
> function changeImages() {
> if (document.image s && (preloadFlag == true)) {
> for (var i=0; i<changeImages. arguments.lengt h; i+=2) {
> document[changeImages.ar guments[i]].src = changeImages.ar guments[i+1];
> }
> }
> }
>
> var preloadFlag = false;
> function preloadImages() {
> if (document.image s) {
> Home_over = newImage("image s/Home-over.gif");
> Help_over = newImage("image s/Help-over.gif");
> Chat_over = newImage("image s/Chat-over.gif");
> Email_over = newImage("image s/Email-over.gif");
> Button1_over = newImage("image s/Button1-over.jpg");
> Button2_over = newImage("image s/Button2-over.gif");
> Button3_over = newImage("image s/Button3-over.gif");
> Button4_over = newImage("image s/Button4-over.gif");
> Button5_over = newImage("image s/Button5-over.gif");
> Button6_over = newImage("image s/Button6-over.gif");
> Button7_over = newImage("image s/Button7-over.gif");
> Button8_over = newImage("image s/Button8-over.gif");
> preloadFlag = true;
> }
> }
>
> // -->
> </script>
>
>
> (later in the HTML)
>
> <a href="gallery.a spx"
> onmouseover="ch angeImages('But ton1', 'images/Button1-over.jpg');
> return true;"
> onmouseout="cha ngeImages('Butt on1', 'images/Button1.jpg'); return
> true;"
> onmousedown="ch angeImages('But ton1', 'images/Button1-over.jpg');
> return true;"
> onmouseup="chan geImages('Butto n1', 'images/Button1-over.jpg'); return
> true;">
> <img name="Button1" src="images/Button1.jpg" width="133" height="30"
> border="0" alt="Gallery Directory">
> </a>
>
>[/color]

Is the preloadImages function ever called? It needs to be called
someplace to load the images into the cache. If the user does not have
any cache capabilities in the given browser, then the preloadImages
function will not be useful, and each mouse over will request a new
image from the server.

Brian

[Craig]

Re: Mouseover Code - Hits Server Every Event

Oops, sorry - forgot to include that line of code from the HTML file... yes
it is, on body load:

<body bgcolor="#FFFFF F" leftmargin="0" topmargin="0" marginwidth="0"
marginheight="0 " onload="preload Images();">



"Brian Genisio" <BrianGenisio@y ahoo.com> wrote in message
news:3FF98C2F.1 090904@yahoo.co m...[color=blue]
> Craig wrote:
>[color=green]
> > The code below hits the web server EVERY time the user mouses over one[/color][/color]
of[color=blue][color=green]
> > the buttons. If you move your mouse in/out 10 times, there are 20 hits[/color][/color]
to[color=blue][color=green]
> > the web server (10 for image.jpg and 10 for image-over.jpg).
> >
> > Can someone tell me why does this code hit the server every time for the
> > mouseover image? It was actually generated by Adobe ImageReady, but I[/color][/color]
can't[color=blue][color=green]
> > figure out why it would - it's barely different than code I've used[/color][/color]
hundreds[color=blue][color=green]
> > of times that works perfectly.
> >
> > <script type="text/javascript">
> > <!--
> >
> > function newImage(arg) {
> > if (document.image s) {
> > rslt = new Image();
> > rslt.src = arg;
> > return rslt;
> > }
> > }
> >
> > function changeImages() {
> > if (document.image s && (preloadFlag == true)) {
> > for (var i=0; i<changeImages. arguments.lengt h; i+=2) {
> > document[changeImages.ar guments[i]].src =[/color][/color]
changeImages.ar guments[i+1];[color=blue][color=green]
> > }
> > }
> > }
> >
> > var preloadFlag = false;
> > function preloadImages() {
> > if (document.image s) {
> > Home_over = newImage("image s/Home-over.gif");
> > Help_over = newImage("image s/Help-over.gif");
> > Chat_over = newImage("image s/Chat-over.gif");
> > Email_over = newImage("image s/Email-over.gif");
> > Button1_over = newImage("image s/Button1-over.jpg");
> > Button2_over = newImage("image s/Button2-over.gif");
> > Button3_over = newImage("image s/Button3-over.gif");
> > Button4_over = newImage("image s/Button4-over.gif");
> > Button5_over = newImage("image s/Button5-over.gif");
> > Button6_over = newImage("image s/Button6-over.gif");
> > Button7_over = newImage("image s/Button7-over.gif");
> > Button8_over = newImage("image s/Button8-over.gif");
> > preloadFlag = true;
> > }
> > }
> >
> > // -->
> > </script>
> >
> >
> > (later in the HTML)
> >
> > <a href="gallery.a spx"
> > onmouseover="ch angeImages('But ton1', 'images/Button1-over.jpg');
> > return true;"
> > onmouseout="cha ngeImages('Butt on1', 'images/Button1.jpg'); return
> > true;"
> > onmousedown="ch angeImages('But ton1', 'images/Button1-over.jpg');
> > return true;"
> > onmouseup="chan geImages('Butto n1', 'images/Button1-over.jpg');[/color][/color]
return[color=blue][color=green]
> > true;">
> > <img name="Button1" src="images/Button1.jpg" width="133"[/color][/color]
height="30"[color=blue][color=green]
> > border="0" alt="Gallery Directory">
> > </a>
> >
> >[/color]
>
> Is the preloadImages function ever called? It needs to be called
> someplace to load the images into the cache. If the user does not have
> any cache capabilities in the given browser, then the preloadImages
> function will not be useful, and each mouse over will request a new
> image from the server.
>
> Brian
>[/color]

[Jim Dabell]

Re: Mouseover Code - Hits Server Every Event

Craig wrote:
[color=blue]
> The code below hits the web server EVERY time the user mouses over one of
> the buttons. If you move your mouse in/out 10 times, there are 20 hits to
> the web server (10 for image.jpg and 10 for image-over.jpg).[/color]

That's a caching problem, not a Javascript problem.

<URL:http://www.mnot.net/cache_docs/>

--
Jim Dabell

[Brian Genisio]

Re: Mouseover Code - Hits Server Every Event

Craig wrote:[color=blue]
> Oops, sorry - forgot to include that line of code from the HTML file... yes
> it is, on body load:
>
> <body bgcolor="#FFFFF F" leftmargin="0" topmargin="0" marginwidth="0"
> marginheight="0 " onload="preload Images();">
>
>
>[/color]

Well, it looks like a cache issue. You cannot guarantee that your user
has cache enabled. If they do not, or their browser doesnt even support
caching, then every time the image source is changed, that browser will
ask the server for the image again.

Is this an isolated test? What browser? What version? What are your
cache settings.?

Regardless of these answers, you likely do not have control over your
user base, and there is likely nothing you can do, if you continue to
use this method.

Possibly, some browsers allow you to check the cache settings, but I
dont know about that. If you could, you would be able to dynamically
choose to do mouse-overs, only if you know caching is supported????
Just a stab.

Brian

[Craig]

Re: Mouseover Code - Hits Server Every Event

Awesome link Jim, and you're exactly right about the problem.

Thanks so much,
Craig


"Jim Dabell" <jim-usenet@jimdabel l.com> wrote in message
news:aIKdncDhzK PMEGSiRVn-ug@giganews.com ...[color=blue]
> Craig wrote:
>[color=green]
> > The code below hits the web server EVERY time the user mouses over one[/color][/color]
of[color=blue][color=green]
> > the buttons. If you move your mouse in/out 10 times, there are 20 hits[/color][/color]
to[color=blue][color=green]
> > the web server (10 for image.jpg and 10 for image-over.jpg).[/color]
>
> That's a caching problem, not a Javascript problem.
>
> <URL:http://www.mnot.net/cache_docs/>
>
> --
> Jim Dabell
>[/color]

[Craig]

Re: Mouseover Code - Hits Server Every Event

You nailed it Brian, and I may look into trying to detect or manipulate
cache settings. Jim posted an excellent link that I'm reading over now and
looks like it will give me a lot of info that you suggested looking into...

Thanks so much for your help,
Craig

"Brian Genisio" <BrianGenisio@y ahoo.com> wrote in message
news:3FF99A42.7 030207@yahoo.co m...[color=blue]
> Craig wrote:[color=green]
> > Oops, sorry - forgot to include that line of code from the HTML file...[/color][/color]
yes[color=blue][color=green]
> > it is, on body load:
> >
> > <body bgcolor="#FFFFF F" leftmargin="0" topmargin="0" marginwidth="0"
> > marginheight="0 " onload="preload Images();">
> >
> >
> >[/color]
>
> Well, it looks like a cache issue. You cannot guarantee that your user
> has cache enabled. If they do not, or their browser doesnt even support
> caching, then every time the image source is changed, that browser will
> ask the server for the image again.
>
> Is this an isolated test? What browser? What version? What are your
> cache settings.?
>
> Regardless of these answers, you likely do not have control over your
> user base, and there is likely nothing you can do, if you continue to
> use this method.
>
> Possibly, some browsers allow you to check the cache settings, but I
> dont know about that. If you could, you would be able to dynamically
> choose to do mouse-overs, only if you know caching is supported????
> Just a stab.
>
> Brian
>[/color]

[HikksNotAtHome]

Re: Mouseover Code - Hits Server Every Event

In article <hahKb.52247$fq 1.15199@twister .rdc-kc.rr.com>, "Craig"
<someone@micros oft.com> writes:
[color=blue]
>You nailed it Brian, and I may look into trying to detect or manipulate
>cache settings. Jim posted an excellent link that I'm reading over now and
>looks like it will give me a lot of info that you suggested looking into...
>[/color]

Give up and save yourself the headache of trying to detect or manipulate my
cache settings, you can't. Its way outside the boundaries of javascript to
change them. As for attempting to detect it, you could try loading a file, time
it, and then try reloading it and compare the two times. If they are similar,
it came from the server both times. If they are disproportionat e enough, you
should be able to assume that its cached but dont bet on it.
--
Randy