Image preloading and onmouseover/out questions

sachaburnett · Aug 26, 2006

Hi everyone!

I'm new to Javascript and am finding so much useful information on this
group, so thanks to you all!

I have a question about preloading images for onmouseover/out effects
and found so many different ways to do it on the Net but am not sure
about something. Right now I have the following code inside my <head>
tag:

<script language="JavaScript" type="text/JavaScript">

</script>

Then in my html body I have:

<a href="doc/doc.htm"
onmouseover="button1.src=imageon.src;"
onmouseout="button1.src=imageoff.src;">
<img name="button1" src="/images/imageoff.gif">
</a>

Here are my questions:

- I notice that some people use a FOR loop to load mulitple images. Are
there any advantages in using a FOR loop as opposed to using multiple
"new Image ()" and ".src" as I did above?

- Do you need to use onLoad in the <body> tag in order for the images
to properly preload. I see some examples where all the images to be
preloaded are inside a function. So the image preload code I have above
would be inside a function (eg., preLoader() ) and then the <body> tag
would look like <body onload="preLoader();">. Will it still work if I
only have what I have above or do I need to use onload? (my images are
very small and my Internet connection is really fast so I don't don't
if the images are actually being preloaded).

Thanks SO SO SO much!

Sacha

RobG · Aug 28, 2006

Hi everyone!

I'm new to Javascript and am finding so much useful information on this
group, so thanks to you all!

I have a question about preloading images for onmouseover/out effects
and found so many different ways to do it on the Net but am not sure
about something. Right now I have the following code inside my <head>
tag:

<script language="JavaScript" type="text/JavaScript">

The language attribute is deprecated, so remove it. Keep type, it's
required.

<!-- Preload images

Do not use HTML comments inside script elements, use proper JavaScript
comment delimiters: // or /*...*/

if (document.images) {
imageoff = new Image();
imageoff.src = '/images/imageoff.gif';

It is best to explicity declare variables with 'var'. Here imageoff is
global, but use var anyway, it makes your intent clear. Many
programming style guides say to declare all your variables in one
place, usually at the start of the scope in which they are used. So
all your global variables should be declared at the start of the script
element:

// Images for rollover
var imageon, imageoff;

So you can easily add comments on what they are for and get
self-documenting code.

imageon = new Image();
imageon.src = '/images/imageon.gif';
}

//--></script>

Then in my html body I have:

<a href="doc/doc.htm"
onmouseover="button1.src=imageon.src;"
onmouseout="button1.src=imageoff.src;">
<img name="button1" src="/images/imageoff.gif">

Using element names or ids as global variables is an IE-ism that is not
well supported by other browsers. It is considered a rather poor
design decision and shouldn't be relied on. Here it isn't necessary at
all, put the mouseover/out on the actual image:

<a href="..."><img onmouseover="this.src=imageon.src;"

</a>

Here are my questions:

- I notice that some people use a FOR loop to load mulitple images. Are
there any advantages in using a FOR loop as opposed to using multiple
"new Image ()" and ".src" as I did above?

Yes: less code and (probably) easier maintenance.

- Do you need to use onLoad in the <body> tag in order for the images
to properly preload.
No.

I see some examples where all the images to be
preloaded are inside a function. So the image preload code I have above
would be inside a function (eg., preLoader() ) and then the <body> tag
would look like <body onload="preLoader();">. Will it still work if I
only have what I have above
Yes.

or do I need to use onload?

No.

You should consider using CSS rollover buttons: use one image that has
the "on" and "off" images joined as one image. Use A: hover to slide
it left-right or up-down to show the other image, then back again when
the A is "unhovered". No pre-loading and no script. There is an
example here:

<URL:
http://www.search-this.com/website_design/css_rollover_buttons.aspx >

There is another one here:

<URL: http://www.alistapart.com/articles/taminglists/ >

If you have buttons or tabs of varying sizes, you might like the
sliding doors techique explained here:

(my images are
very small and my Internet connection is really fast so I don't don't
if the images are actually being preloaded).

Sounds prefect for rollover buttons.

sachaburnett · Aug 28, 2006

Hello Rob,

Thank you very much for your very informative advice! I had no idea
that using element names as global variables was an IE-ism --
especially since I'm a Firefox user!

I wasn't aware that I can put the onmouseover/out directly inside the
<img> tag. Does the "this.src" keyword refer to the image being
referenced?

So if I had mulitple images using the rollover effect, I would have:

<a href="doc/doc1.htm">
<img src="/images/image1off.gif
onmouseover="this.src=image1on.src;"
onmouseout="this.src=image1off.src;">
</a>

<a href="doc/doc2.htm">
<img src="/images/image2off.gif
onmouseover="this.src=image2on.src;"
onmouseout="this.src=image2off.src;">
</a>

.... and so on?

Sacha

JQuery - Preloading Images	0	Apr 18, 2019
Image issues	0	Apr 2, 2023
Javascript onmouseover/out vs. Opera browser	0	Aug 29, 2006
Help with preloading images	2	Jan 25, 2008
preloading mp3	0	May 27, 2007
Relative image URLs in HTML	3	Feb 13, 2023
Image upload not working in browser	4	Sep 9, 2022
Pyautogui, cv2 and cannot find image	0	Feb 7, 2023

Image preloading and onmouseover/out questions

sachaburnett

RobG

sachaburnett

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads