How to add Hover images

[TheMusician]

<div align="center">
 <table border="0" width="530" height="509" cellpadding="0" background="BaselineMapIntroRev1.jpg" style="border-collapse: collapse">
<tr>
<td width="218" rowspan="2" height="509">
<p align="right"><a href="pleasantvalley.htm">
<img border="0" src="Trans.gif" width="218" height="509"></a></td>
<td width="177" height="310">
<p align="right"><a href="willard.htm">
<img border="0" src="TransW.gif" width="177" height="310"></a></td>
<td width="135" height="310">
<p align="right"><a href="floris.htm">
<img border="0" src="TransF.gif" width="135" height="310"></a></td>
</tr>
<tr>
<td height="199" colspan="2" width="312">
<p align="right"><a href="chantilly.htm">
<img border="0" src="TransC.gif" width="312" height="199"></a></td>
</tr>
</table>
<p>    </div>

I have this code. Each cell in the table is entirely taken up by the Trans_.gif images you see here. I want to be able to see them replaced by Anim_.gif files upon hovering; can I do this? And yes, the Anim_.gifs are all exactly the same size as the Trans'.

 

[office politics]

Using MouseOver in JavaScript

 

[CrazeD]

a.pleasantValley,
a.willard,
a.floris,
a.chantilly {
	background:url(Trans.gif) no-repeat;
	width:218px;
	height:509px;
	display:block;
	}

a.willard { background:url(TransW.gif) no-repeat;width:177px;height:310px; }
a.floris { background:url(TransF.gif) no-repeat;width:135px;height:310px; }
a.chantilly { background:url(TransC.gif) no-repeat;width:312px;height:199px; }

a.pleasantValley:hover { background:url(Anim.gif) no-repeat; }
a.willard:hover { background:url(AnimW.gif) no-repeat; }
a.floris:hover { background:url(AnimF.gif) no-repeat; }
a.chantilly:hover { background:url(AnimC.gif) no-repeat; }

Add this to your CSS

<div align="center">
 <table border="0" width="530" height="509" cellpadding="0" background="BaselineMapIntroRev1.jpg" style="border-collapse: collapse">
<tr>
<td width="218" rowspan="2" height="509">
<p align="right"><a class="pleasantValley" href="pleasantvalley.htm"></a></td>
<td width="177" height="310">
<p align="right"><a class="willard" href="willard.htm"></a></td>
<td width="135" height="310">
<p align="right"><a class="floris" href="floris.htm"></a></td>
</tr>
<tr>
<td height="199" colspan="2" width="312">
<p align="right"><a class="chantilly" href="chantilly.htm"></a></td>
</tr>
</table>
<p>    </div>

And this is the modified HTML.

Try this out.