Javascript help

darin3200 · 09-03-2005, 09:19 PM

I was going to put this programming, but this is scripting so I'll put it here.
I want to several jpegs on a page, and when the user's mouse point goes over an image, that image will change to a different image. However the problem I'm having is when a hover over the second picture, the first image changes to the picture the second one was supposed to change to, and the second one doesn't change. Here is the code i'm using

Code:

<A HREF="http://site-to-link-to.com/pictures1/index.html" 
     onMouseOver="document.images.animate.src='picture1.gif';
                  return true" 
     onMouseOut="document.images.animate.src='picture1.jpg'">
    <IMG SRC="picture1.jpg" WIDTH="90" HEIGHT="90"
         HSPACE="0" VSPACE="0" BORDER="0" ALIGN=LEFT
         NAME="animate">
 </a>
<A HREF="http://site-to-link-to.com/pictures2/index.html" 
     onMouseOver="document.images.animate.src='picture2.gif';
                  return true" 
     onMouseOut="document.images.animate.src='picture.jpg'">
    <IMG SRC="picture2.jpg" WIDTH="90" HEIGHT="90"
         HSPACE="0" VSPACE="0" BORDER="0" ALIGN=LEFT
         NAME="animate"></a>

All help is greatly appreciated

spooon · 09-03-2005, 09:42 PM

Both images have the same name ("animate")!!! How does it know which one to change?

darin3200 · 09-03-2005, 11:26 PM

I've tried to change names but then it doesn't work. What changes do I ned to make?

spooon · 09-03-2005, 11:44 PM

Instead of "document.images.animate" I think it should be "document.images["animate"]" because images is an array or something.

darin3200 · 09-03-2005, 11:58 PM

Ok, you were right that is was a naming problem. I'm not familar with javascript that much and thought that the documents.images.animate part was some for of library routine or something built in not a name. So I changed the names to test and it works great
Thanks!

Code:

<A HREF="http://site-to-link-to.com/pictures2/index.html" 
     onMouseOver="testsrc='picture2.gif';
                  return true" 
     onMouseOut="test.src='picture.jpg'">
    <IMG SRC="picture2.jpg" WIDTH="90" HEIGHT="90"
         HSPACE="0" VSPACE="0" BORDER="0" ALIGN=LEFT
         NAME="test"></a>