Preload Image for MouseOver

**TheGoldenShogun** · Sep 7th, 2001, 07:14 AM

I made some pretty cool looking buttons in Photoshop, saved them for web (about 4K) but when I put them on the web, the mouseover didn't work as good as I had anticipated. Here what I have in code.

<script language='JavaScript'>
var overOut = false
function imgSwap(src)
{

newName=src.name + "over.gif"

if (!overOut)
{
src.src=orderover.gif
overOut=true
}
else
{
src.src=src.name + '.gif'
overOut=false

}

}

</script>
<body>
<a href='http://www.whatever.com'><img src='order.gif' border='0' name='order' onMouseOver='imgSwap(this)' onMouseOut='imgSwap(this)'></a>

Is there a way to perhaps preload all the images onLoad of the page so that it's not looking for the new image everytime?

Thanks

**sebs** · Sep 7th, 2001, 10:54 AM

well yes...

var ImagesList;
ImageList = new Array();
ImageList[0] = new Image(110,25);
ImageList[0].src = yourPath
ImageList[1] = new Image(110,25);
ImageList[1].src = your Path

and use ImageList[1].src

something like:

function imgover(imgname,position){
imgname.src = ImageList[position].src;
}
function imgout(imgname,position){
imgname.src = ImageList[position].src;
}

**TheGoldenShogun** · Sep 7th, 2001, 11:49 AM

thanks, that code did make the mouseOver flow better, but still not as good as i had planned. Right now my images are 3.5 K, what's a good size for an image if you're working a mouseover?

**sebs** · Sep 7th, 2001, 12:27 PM

if it too slow, because your image size!

do it with layers! it will be faster!!

**TheGoldenShogun** · Sep 7th, 2001, 12:46 PM

Layers, you mean in Photoshop, I got plenty of layers, just have to cut back on the beveling and embossing things... I got my image size down to 2.1 so it's working better now, just made the image smaller.

**sebs** · Sep 7th, 2001, 01:05 PM

i meant layer in your html document,

gimmie a sec to build you an example!!

**sebs** · Sep 7th, 2001, 01:32 PM

i try it, and it did not had the result i espected,

it was not working if you pass your mouse over really quick,

is your page on the web, show me where i'll see if how slow it is!!

**TheGoldenShogun** · Sep 7th, 2001, 01:44 PM

it's just got the images right now..

http://www.visualwow.net/David/ROVC/storesam.html

let me know what you think.

**sebs** · Sep 7th, 2001, 01:54 PM

really nice,

i think you problem might be:

function imgSwap(src, imgNum)
{

newName=orderOver[imgNum]

if (!overOut)
{
src.src=newName
overOut=true
}
else
{
src.src=src.name + '.gif'
overOut=false

}
}

this line -----src.src=src.name + '.gif'

try putting your out images in the array so that you always use the array

so

Code:

<html>
<head>

</head>

<script language='JavaScript'>
var overOut = false
var orderOver = new Array();
orderOver[0] = "orderOver.gif";
orderOver[1] = "order.gif";
orderOver[2] = "photoOver.gif";
orderOver[3] = "photo.gif";

function imgSwap(src, imgNum)
{

	newName=orderOver[imgNum]

	if (!overOut)
	{
	src.src=newName
	overOut=true
	}
	else
	{
	src.src=newName
	overOut=false

	}

}


</script>

<body leftmargin='0' topmargin='0'>
<!-- Heading/Navigation Button Section -->
<table cellpadding='0' cellspacing='0' width='750px' height='550px' border='0'>
<tr><td width='130px' bgcolor='#009966' valign='top'><a href='http://www.msn.com'><img src='order.gif' border='0' name='order' onMouseOver='imgSwap(this, 0)' onMouseOut='imgSwap(this, 1)'></a><br>
<a href='http://www.msn.com'><img src='photo.gif' border='0' name='photo' onMouseOver='imgSwap(this, 2)' onMouseOut='imgSwap(this, 3)'></a><br>
</td>


<!-- Other Content Section -->
<td>&nbsp</td></tr>
</table>


</body>
</html>

let me know if there a difference,

btw, your picture look very nice, good job!

i like your photo button

**TheGoldenShogun** · Sep 7th, 2001, 02:09 PM

thanks for the feedback, I plugged your code into it and it's working as good as it with this connection I have. By the way, I'm doing this for a local area vet who wants to sell supplied online... do you know what the procedures are for getting credit card information? this is actually my first client (started the business two weeks ago) and I'm just trying to cover all my bases.

Thanks

scoutt · Sep 9th, 2001, 02:38 AM

Originally posted by TheGoldenShogun
thanks for the feedback, I plugged your code into it and it's working as good as it with this connection I have. By the way, I'm doing this for a local area vet who wants to sell supplied online... do you know what the procedures are for getting credit card information? this is actually my first client (started the business two weeks ago) and I'm just trying to cover all my bases.

Thanks

you would need to setup a merchant account to handle credit cards.

I can't right off hand remember the best merchants to get, but I can look fo rya a little later.

**sebs** · Sep 10th, 2001, 07:23 AM

www.verisign.com is good

Thread: Preload Image for MouseOver

Thread Tools

Display

Preload Image for MouseOver

Posting Permissions