470,613 Members | 2,222 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,613 developers. It's quick & easy.

Mouseover Code - Hits Server Every Event

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.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

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

// -->
</script>
(later in the HTML)

<a href="gallery.aspx"
onmouseover="changeImages('Button1', 'images/Button1-over.jpg');
return true;"
onmouseout="changeImages('Button1', 'images/Button1.jpg'); return
true;"
onmousedown="changeImages('Button1', 'images/Button1-over.jpg');
return true;"
onmouseup="changeImages('Button1', 'images/Button1-over.jpg'); return
true;">
<img name="Button1" src="images/Button1.jpg" width="133" height="30"
border="0" alt="Gallery Directory">
</a>
Jul 20 '05 #1
7 1154
Craig wrote:
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.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

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

// -->
</script>
(later in the HTML)

<a href="gallery.aspx"
onmouseover="changeImages('Button1', 'images/Button1-over.jpg');
return true;"
onmouseout="changeImages('Button1', 'images/Button1.jpg'); return
true;"
onmousedown="changeImages('Button1', 'images/Button1-over.jpg');
return true;"
onmouseup="changeImages('Button1', 'images/Button1-over.jpg'); return
true;">
<img name="Button1" src="images/Button1.jpg" width="133" height="30"
border="0" alt="Gallery Directory">
</a>


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

Jul 20 '05 #2
Oops, sorry - forgot to include that line of code from the HTML file... yes
it is, on body load:

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0"
marginheight="0" onload="preloadImages();">

"Brian Genisio" <Br**********@yahoo.com> wrote in message
news:3F**************@yahoo.com...
Craig wrote:
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.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1]; }
}
}

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

// -->
</script>
(later in the HTML)

<a href="gallery.aspx"
onmouseover="changeImages('Button1', 'images/Button1-over.jpg');
return true;"
onmouseout="changeImages('Button1', 'images/Button1.jpg'); return
true;"
onmousedown="changeImages('Button1', 'images/Button1-over.jpg');
return true;"
onmouseup="changeImages('Button1', 'images/Button1-over.jpg'); return true;">
<img name="Button1" src="images/Button1.jpg" width="133" height="30" border="0" alt="Gallery Directory">
</a>


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

Jul 20 '05 #3
Craig wrote:
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).


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

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

--
Jim Dabell

Jul 20 '05 #4
Craig wrote:
Oops, sorry - forgot to include that line of code from the HTML file... yes
it is, on body load:

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0"
marginheight="0" onload="preloadImages();">


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

Jul 20 '05 #5
Awesome link Jim, and you're exactly right about the problem.

Thanks so much,
Craig
"Jim Dabell" <ji********@jimdabell.com> wrote in message
news:aI********************@giganews.com...
Craig wrote:
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).


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

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

--
Jim Dabell

Jul 20 '05 #6
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" <Br**********@yahoo.com> wrote in message
news:3F**************@yahoo.com...
Craig wrote:
Oops, sorry - forgot to include that line of code from the HTML file... yes it is, on body load:

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0"
marginheight="0" onload="preloadImages();">


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

Jul 20 '05 #7
In article <ha*******************@twister.rdc-kc.rr.com>, "Craig"
<so*****@microsoft.com> writes:
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...


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 disproportionate enough, you
should be able to assume that its cached but dont bet on it.
--
Randy
Jul 20 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Casey | last post: by
7 posts views Thread by rkbnair | last post: by
2 posts views Thread by Dariusz Tomon | last post: by
1 post views Thread by giloosh | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.