How to add Hover images

TheMusician · 02-07-2009, 11:56 AM

Quote:

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 · 02-07-2009, 12:39 PM

Using MouseOver in JavaScript

CrazeD · 02-07-2009, 02:51 PM

Code:

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

Code:

<div align="center">
&nbsp;<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>&nbsp;&nbsp;&nbsp; </div>

And this is the modified HTML.

Try this out.

Member Login