Mouseover HTML not working correctly

[SpaceSquad]

Well i have to make this web-based story dealie in one of my classes, and so we need to add all the bad looking corny stuff to make the grade.

Most people are using Fireworks...but it leaves like 5 lines of javascript and like 10 lines of HTML for each mouseover image...I like to keep my code good looking.

So I found a great piece of code that works great..and doesnt even use Javascript. The only problem is that I can't seem to use this code twice on the same page...and I need to do a home button, Start Story button, etc.

Here is the code:

<a href="index.html"
        onmouseover="document.NAME.src='home1.gif'"
        onmouseout ="document.NAME.src='home2.gif'">
  <img name=NAME src='orig-picture'>
  </a>

Thanks in advance

[krohnjw]

You are changing the NAME variable with each entry, no?

[Iturea]

Your problem lies with this line:

<img name=NAME src='orig-picture'>

The src points to nothing.

You need something like this:

<a href="index.html" onmouseover="document.NAME.src='home1.gif';" onmouseout="document.NAME.src='home2.gif';">
  <img name="NAME" src='home2.gif' alt="image" id="NAME" border="0" />
</a>

by the way, the code within the mouseover and mouseout event is Javascript. :-)

[bwcc]

As what krohnjw said - remember that each time you use that document call, you have to change the name of the doc is it calling:

Instance #1:
<a href="" onmouseover="document.myimage.src='pic1.jpg'" 
onmouseout="document.myimage.src='pic2.jpg'">
<img name="myimage" src="pic2.jpg"></a>

Instance #2:
<a href="" onmouseover="document.yourimage.src='pic3.jpg'"
 onmouseout="document.yourimage.src='pic4.jpg'">
<img name="yourimage" src="pic4.jpg"></a>

[SpaceSquad]

kay..thanks...i feel dumb...

What I meant by haveing "no javascript" is that I don't need to put seperate Javascript code in my head tag...this way I get a less bloated code.