By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
457,761 Members | 1,188 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 457,761 IT Pros & Developers. It's quick & easy.

pre-loading images (script?)

P: n/a
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
Nov 18 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
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

Nov 18 '05 #2

P: n/a
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

Nov 18 '05 #3

P: n/a
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


Nov 18 '05 #4

P: n/a
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


Nov 18 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.