Mouseover Code - Hits Server Every Event

C

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.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].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>
 
C

Craig

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 said:
Craig said:
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].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>
Click to expand...


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
Click to expand...
 
B

Brian Genisio

Craig said:
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].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>
Click to expand...


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
 
B

Brian Genisio

Craig said:
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();">
Click to expand...

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
 
C

Craig

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

Thanks so much,
Craig
 
C

Craig

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Rollover scripts in MasterPage dont seem to work 0
need help: Noobie 3
Image Ready Rollovers 2
Problem with preloading images on IE on Windows XP 2
IE.6 shows blank images sporadically 2
Source code issues 2
Preloading and switching images ... 1
Layers issue in Netscape 4.x - tabs question 3

Members online

No members online now.
Total: 31 (members: 0, guests: 31)
Robots: 435

Forum statistics

Threads
473,770
Messages
2,569,583
Members
45,075
Latest member
MakersCBDBloodSupport

Latest Threads

Top