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
