Help with Images that change with list mouseover

I know some basic html and a little php. So I am basically web programming challenged. I am learning but I need some help. What I want to do is as follows:

1) Create a static list in a table cell.
2) When the mouse pointer is moved over the cell I want to have the next cell contain an image that changes and is unique for each item in the list. I have about 5 items currently in the list.

Does anyone have script that does this that I could obtain and modify, or provide me with guidance on how to do the above? Any help would be much appreciated.

imageman/rongreen:

1/12/04 - Works like a charm. Many thanks. thumbsup:

Try this:

<table border="0" cellspacing="0" bordercolor="#111111" width="100%" cellpadding="0">
<tr>
<td width="21%" onMouseOver="image1.src='image1.gif'" onMouseOut="image1.src='default_image.gif'">Item A</td>
<td width="79%" rowspan="5">
<p align="center"><img name="image1" src="default_image.gif"></td>
</tr>
<tr>
<td width="21%" onMouseOver="image1.src='image2.gif'" onMouseOut="image1.src='default_image.gif'">Item B</td>
</tr>
<tr>
<td width="21%" onMouseOver="image1.src='image3.gif'" onMouseOut="image1.src='default_image.gif'">Item C</td>
</tr>
<tr>
<td width="21%" onMouseOver="image1.src='image4.gif'" onMouseOut="image1.src='default_image.gif'">Item D</td>
</tr>
<tr>
<td width="21%" onMouseOver="image1.src='image5.gif'" onMouseOut="image1.src='default_image.gif'">Item E</td>
</tr>
</table>


If you dont want any image in the cell initially, just make the "default_image.gif" fully transparent OR the same colour as the background.

Hope this helps.

Murdz

you must use absolute reference to the image to make it cross-browser.

onMouseOver="document.images['image1'].src='image1.gif'"