Image Array

[surferdave]

Hello

I had created a page that has mouseover effects. on mouseover image#1 will show and on mouseout image#2 will show. Everytime the user mouseover and out the image is downloaded from the server.

So I created an image array so that ALL the images will be downloaded on the client side when they first enter the site. This prevent the download and upload of each image individually.

The image array works when I load the page on our locate server (LAN) and access the page from my workstation. ( I don't see downloading on the status bar on the bottom of my IE and it load much faster!)

But once I load it on the IIS server for the internet, the code stop working. It is making a round trip, downloading from the server evertime.

The site is located at http://www.pdpcenter.com/dreams/pdpweb/hookpage.htm

and here is some of the code I used

Thanks for your Help

dave

<SCRIPT LANGUAGE="JavaScript">
var Vedu = 0
var Vit = 1
var Vstaff = 2
var Vus = 3
var Vlinkbgin = 4
var Vlinkbgout = 5
var Vpdpimg = 6
var Vpdplogo = 7
var Vload = new Array();
Vload[0] = new Image;
Vload[0].src = "images/edu.gif";
Vload[1] = new Image;
Vload[1].src = "images/it.jpg";
Vload[2] = new Image;
Vload[2].src = "images/staff.jpg";
Vload[3] = new Image;
Vload[3].src = "images/us.jpg";
Vload[4] = new Image;
Vload[4].src = "images/linkbgin.gif";
Vload[5] = new Image;
Vload[5].src = "images/linkbgout.jpg";
Vload[6] = new Image;
Vload[6].src = "images/pdpimg.bmp";
Vload[7] = new Image;
Vload[7].src = "images/pdplogo.jpg";

function edu()
{
document.images['side'].src = Vload[Vedu].src
}
function it()
{
document.images['side'].src = Vload[Vit].src
}
function staff()
{
document.images['side'].src = Vload[Vstaff].src
}
function school()
{
document.images['side'].src = Vload[Vus].src
}
function over()
{
document.images['side'].src = Vload[Vpdpimg].src
}
function bgincomp()
{
comp.background=Vload[Vlinkbgin].src
}
function bgoutcomp(){
comp.background=Vload[Vlinkbgout].src
}
function bginit(){
itid.background=Vload[Vlinkbgin].src
}
function bgoutit(){
itid.background=Vload[Vlinkbgout].src
}
function bginstaff(){
staffid.background=Vload[Vlinkbgin].src
}
function bgoutstaff(){
staffid.background=Vload[Vlinkbgout].src
}
function bginus(){
usid.background=Vload[Vlinkbgin].src
}
function bgoutus(){
usid.background=Vload[Vlinkbgout].src
}

</script>

<table border="1" width="100%" height="66">
<tr>
<td width="15%" height="1" valign="top" align="center" background="images/linkbgout.jpg"
id="comp" onMouseOver= "edu(); edubar();bgincomp()" onMouseOut="over();startbar();bgoutcomp()">
<font color="#FFFFFF"><b><a href="edu.htm">Educational
Services</a></b></font>
</td>
<td width="11%" height="1" valign="top" align="center" background="images/linkbgout.jpg"
id="itid" onMouseOver="it();itbar();bginit()" onMouseOut="over();startbar();bgoutit()" >
<font color="#FFFFFF"><b><a href="it.htm">IT Solutions</a></b></font>
</td>

<td width="16%" height="1" valign="top" align="center" background="images/linkbgout.jpg"
id="staffid" onMouseOver="staff();staffbar();bginstaff()" onMouseOut="over();startbar();bgoutstaff()">
<font color="#FFFFFF"><b>
<a href="staff.htm">
Professional Staffing</a></b>
</font>
</td>
<td width="8%" height="1" valign="top" align="center" background="images/linkbgout.jpg"
id="usid" onMouseOver=" school();usbar();bginus()" onMouseOut="over();startbar();bgoutus()">
<font color="#FFFFFF"><b>
<a href="us.htm">
Contact Us</a></b>
</font>
</td>
</tr>

[requestcode]

Here is an example of preloading that might work better.
// Enter your images Here along with the directory if need be.

var imgs=new Array()
imgs[0]="owls3.jpg"
imgs[1]="hawks2.jpg"
imgs[2]="pic221.jpg"
imgs[3]="eagle1.jpg"

// Array used for preloading
var myimages=new Array()
// Do the preload
for(i=0;i<imgs.length;i++)
{
myimages[i]=new Image()
myimages[i].src=imgs[a]
}

[Roy Sinclair]

And replace those BMP files, they make your page HUGE which means people on dialup won't wait around.