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

Image preloading and onmouseover/out questions

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

<!-- Preload images

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

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">
</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 <bodytag 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 <bodytag
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

Aug 26 '06 #1
Share this Question
Share on Google+
2 Replies


P: n/a

sa**********@yahoo.com wrote:
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;"
onmouseout="this.src=imageout.src;"></a>

</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 <bodytag 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 <bodytag
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_d...r_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:

<URL: http://alistapart.com/articles/slidingdoors/ >
(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. :-)

--
Rob

Aug 28 '06 #2

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

Aug 28 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.