pre-loading images (script?)

[VR]

Hi,

I am trying to have a menu item (which is an HTML img) to
change as a mouse moves over it. So, my code looks
something like this:

<a
onmouseover="ActivateImage('MyImage');"
onmouseout="InactivateImage('MyImage');"
href="javascript:void(FollowLink('MyImage'));">
<IMG height="22" src="Image1.gif" name="MyImage">
</a>

<script>
function ActivateImage(ImageName)
{
document.images(ImageName).src = "Image2.gif"
}

function InactivateImage(ImageName)
{
document.images(ImageName).src = "Image1.gif"
}
</script>
I have about 20 images setup in the similar way on my
page.

The problem is that when the page is loading, it seems
that only the images that are specified in my HTML are
loaded. The other images start loading as I move mouse
over original images. So, since it takes a whlie for those
alternate images to load, the very first time I move mouse
over an image and then quickly move it away the switch
doesn't happen.

Is there any way to make sure that my alternate images get
loaded with my page right away? Or should I use a
different approach all together?

Thanks a lot for any help.

VR

[Joe Gass]

You need to use javascript for this, I personally use Macromedia Dreamweaver
to set this kind of thing up
Try a search on google for "preloading images"

"VR" <an*******@discussions.microsoft.com> wrote in message
news:04****************************@phx.gbl...

Hi,

I am trying to have a menu item (which is an HTML img) to
change as a mouse moves over it. So, my code looks
something like this:

<a
onmouseover="ActivateImage('MyImage');"
onmouseout="InactivateImage('MyImage');"
href="javascript:void(FollowLink('MyImage'));">
<IMG height="22" src="Image1.gif" name="MyImage">
</a>

<script>
function ActivateImage(ImageName)
{
document.images(ImageName).src = "Image2.gif"
}

function InactivateImage(ImageName)
{
document.images(ImageName).src = "Image1.gif"
}
</script>
I have about 20 images setup in the similar way on my
page.

The problem is that when the page is loading, it seems
that only the images that are specified in my HTML are
loaded. The other images start loading as I move mouse
over original images. So, since it takes a whlie for those
alternate images to load, the very first time I move mouse
over an image and then quickly move it away the switch
doesn't happen.

Is there any way to make sure that my alternate images get
loaded with my page right away? Or should I use a
different approach all together?

Thanks a lot for any help.

VR

[Munsifali Rashid]

You need to use JavaScript to preload the images. However, preloading
images is sometimes ignored if a user has changed their browser's settings.
The safest way to do this, is to load all the images into two or more
layers, and then show/hide the layers accordingly.

Mun


"VR" <an*******@discussions.microsoft.com> wrote in message
news:04****************************@phx.gbl...

Hi,

I am trying to have a menu item (which is an HTML img) to
change as a mouse moves over it. So, my code looks
something like this:

<a
onmouseover="ActivateImage('MyImage');"
onmouseout="InactivateImage('MyImage');"
href="javascript:void(FollowLink('MyImage'));">
<IMG height="22" src="Image1.gif" name="MyImage">
</a>

<script>
function ActivateImage(ImageName)
{
document.images(ImageName).src = "Image2.gif"
}

function InactivateImage(ImageName)
{
document.images(ImageName).src = "Image1.gif"
}
</script>
I have about 20 images setup in the similar way on my
page.

The problem is that when the page is loading, it seems
that only the images that are specified in my HTML are
loaded. The other images start loading as I move mouse
over original images. So, since it takes a whlie for those
alternate images to load, the very first time I move mouse
over an image and then quickly move it away the switch
doesn't happen.

Is there any way to make sure that my alternate images get
loaded with my page right away? Or should I use a
different approach all together?

Thanks a lot for any help.

VR

[Vic]

Do you have by any chance any links/samples of using layers?

Thanks for your help.

VR

"Munsifali Rashid" <mun@**RemoveToReply**vefuk.com> wrote in message
news:Oc**************@TK2MSFTNGP09.phx.gbl...

You need to use JavaScript to preload the images. However, preloading
images is sometimes ignored if a user has changed their browser's settings. The safest way to do this, is to load all the images into two or more
layers, and then show/hide the layers accordingly.

Mun


"VR" <an*******@discussions.microsoft.com> wrote in message
news:04****************************@phx.gbl...

Hi,

I am trying to have a menu item (which is an HTML img) to
change as a mouse moves over it. So, my code looks
something like this:

<a
onmouseover="ActivateImage('MyImage');"
onmouseout="InactivateImage('MyImage');"
href="javascript:void(FollowLink('MyImage'));">
<IMG height="22" src="Image1.gif" name="MyImage">
</a>

<script>
function ActivateImage(ImageName)
{
document.images(ImageName).src = "Image2.gif"
}

function InactivateImage(ImageName)
{
document.images(ImageName).src = "Image1.gif"
}
</script>
I have about 20 images setup in the similar way on my
page.

The problem is that when the page is loading, it seems
that only the images that are specified in my HTML are
loaded. The other images start loading as I move mouse
over original images. So, since it takes a whlie for those
alternate images to load, the very first time I move mouse
over an image and then quickly move it away the switch
doesn't happen.

Is there any way to make sure that my alternate images get
loaded with my page right away? Or should I use a
different approach all together?

Thanks a lot for any help.

VR

[Vic]

Thanks.

VR

"Joe Gass" <jo*@dontspamme.com> wrote in message
news:OW*************@TK2MSFTNGP10.phx.gbl...

You need to use javascript for this, I personally use Macromedia Dreamweaver to set this kind of thing up
Try a search on google for "preloading images"

"VR" <an*******@discussions.microsoft.com> wrote in message
news:04****************************@phx.gbl...

Hi,

I am trying to have a menu item (which is an HTML img) to
change as a mouse moves over it. So, my code looks
something like this:

<a
onmouseover="ActivateImage('MyImage');"
onmouseout="InactivateImage('MyImage');"
href="javascript:void(FollowLink('MyImage'));">
<IMG height="22" src="Image1.gif" name="MyImage">
</a>

<script>
function ActivateImage(ImageName)
{
document.images(ImageName).src = "Image2.gif"
}

function InactivateImage(ImageName)
{
document.images(ImageName).src = "Image1.gif"
}
</script>
I have about 20 images setup in the similar way on my
page.

The problem is that when the page is loading, it seems
that only the images that are specified in my HTML are
loaded. The other images start loading as I move mouse
over original images. So, since it takes a whlie for those
alternate images to load, the very first time I move mouse
over an image and then quickly move it away the switch
doesn't happen.

Is there any way to make sure that my alternate images get
loaded with my page right away? Or should I use a
different approach all together?

Thanks a lot for any help.

VR