Image Hover Script

[jgd12345]

Hi, I'm sure I've done this before but my mind has gone blank and I can't seem to find it anywhere. The problem is I've got 2 images (ie image.gif, image2.gif). When you hover over image.gif I want it to display "Image 1" in a table below and when you hover over image2.gif I want it to display "Image 2" in the table. Originally the table is blank.

The table has the following format:

<table>
<tr>
<td></td>
</tr>
</table>

Hope you can help. Thanx

 

[dwarfthrower]

Like so?
[tt]
<img src=&quot;image1.gif&quot; onMouseOver=&quot;document.getElementById('imgDesc').innerText='Image 1';&quot;>
<img src=&quot;image2.gif&quot; onMouseOver=&quot;document.getElementById('imgDesc').innerText='Image 2';&quot;>
<table>
<tr>
<td id=&quot;imgDesc&quot;></td>
</tr>
</table>
[/tt]

 

[jpbrassard]

Give the <td> element an id = for this example, &quot;imgDisp&quot;. In script, write this function:

[tt]function DispImgName(which,show){
var oTD = document.getElementById('imgDisp');
if (show == true) {
oTD.innerText = which.id;
} else {
oTD.innerText = '&nbsp;' //non-breaking space so you don't lose space cohesion
}
return;
}[/tt]

And in the markups for the images, do something like this:

<img src=&quot;image1.gif&quot; id=&quot;Image1&quot; onmouseover=&quot;DispImgName(this,true)&quot; onmouseout=&quot;DispImgName(this,false)&quot;>

HTH,
jp