Preload Image for MouseOver

Printable View

Sep 7th, 2001, 07:14 AM
TheGoldenShogun

Preload Image for MouseOver

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
:cool:
Sep 7th, 2001, 10:54 AM
sebs

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;
}
Sep 7th, 2001, 11:49 AM
TheGoldenShogun

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?
Sep 7th, 2001, 12:27 PM
sebs

if it too slow, because your image size!

do it with layers! it will be faster!!
Sep 7th, 2001, 12:46 PM
TheGoldenShogun

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.
Sep 7th, 2001, 01:05 PM
sebs

i meant layer in your html document,

gimmie a sec to build you an example!!
Sep 7th, 2001, 01:32 PM
sebs

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!!
Sep 7th, 2001, 01:44 PM
TheGoldenShogun

it's just got the images right now..

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

let me know what you think.

:cool:
Sep 7th, 2001, 01:54 PM
sebs

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'>  <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>  <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
Sep 7th, 2001, 02:09 PM
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
:cool:
Sep 9th, 2001, 02:38 AM

Quote:

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
:cool:

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. :)
Sep 10th, 2001, 07:23 AM
sebs

www.verisign.com is good