Image swaping??

I need to make a little toolbox that has some "icons" in it. These icons should swap when mouse over and mouse out.

So I made this little script:

// This is the image swap code for the tool button menu
pic1 = new Image;
pic2 = new Image;
pic3 = new Image;
pic4 = new Image;
pic5 = new Image;
pic6 = new Image;

pic1.src = "images/buttons/homeout.jpg";
pic2.src = "images/buttons/homeover.jpg";
pic3.src = "images/buttons/emailout.jpg";
pic4.src = "images/buttons/emailover.jpg";
pic5.src = "images/buttons/helpout.jpg";
pic6.src = "images/buttons/helpover.jpg";
// Image swap code ends here

This is how I use it:

<A HREF="test" ONMOUSEOVER="Home.src = pic2.src" ONMOUSEOUT="Home.src = pic1.src"><IMG SRC="images/buttons/homeout.jpg" TITLE="Home" NAME="Home" BORDER="0"></A>


Now to the questions...

1. Is this the correct way to do it??
2. How do I make the images preload, so there is no delay when the user move over it??

/Smirre

Inside your <a> tag, instead of: Home.src = pic2.src, you'll need to use:

document.images.Home.src = pic2.src

Regaring preloading the images, actually the code above already does this.

You can actually just do it like Home.src as I think document is the default object, and Home is a child of it, but I too would do it with images, except I would use it more like this:

Code:

---

document.images['Home'].src = pic2.src

---

Then you can also get rid of name in favour of id as is required in newer versions of HTML.

So what you are basiclly saying is that I should change to ID instead of using name, and there by use the DOM model. Then I will do so. Thanks for the input.


/Smirre

Quote:

---

Originally posted by Rick Bull
You can actually just do it like Home.src as I think document is the default object, and Home is a child of it, but I too would do it with images.

---

Actually, document.Home would reference a form named "Home", not image I believe. In NS4, it would reference a LAYER, so definitely better to add the images object in :)

Why would it reference a form? Any time you give something a name it becomes a child of the parent (in most cases the document) so you could use document.imageName. I think that's true for NS 4.x too.

Quote:

---

Originally posted by Smirre
So what you are basiclly saying is that I should change to ID instead of using name, and there by use the DOM model.

---

Yeah I would, mainly just because I don't think name is avaliable in XHTML, and I think it clarifies your code you have document.images['id] rather than just document.imageName.