How to add Hover images - Techist - Tech Forum

Go Back   Techist - Tech Forum > Internet > Web Graphics and Design
Click Here to Login
Closed Thread
 
Thread Tools Display Modes
 
Old 02-07-2009, 12:56 PM   #1 (permalink)
Newb Techie
 
Join Date: Feb 2009
Location: Northern Virginia
Posts: 4
Default How to add Hover images

Quote:
<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 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>&nbsp;&nbsp;&nbsp; </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'.
__________________

TheMusician is offline  
Old 02-07-2009, 01:39 PM   #2 (permalink)
It's all just 1s and 0s
 
office politics's Avatar
 
Join Date: Jan 2004
Location: in the lab
Posts: 6,555
Send a message via MSN to office politics
Default Re: How to add Hover images

Using MouseOver in JavaScript
__________________

office politics is offline  
Old 02-07-2009, 03:51 PM   #3 (permalink)
Wizard Techie
 
CrazeD's Avatar
 
Join Date: Feb 2006
Location: Maine
Posts: 3,736
Send a message via AIM to CrazeD Send a message via MSN to CrazeD
Default Re: How to add Hover images

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.
__________________

Intel Q9400 | Gigabyte EP45-UD3P | G.Skill 2x2GB DDR2 1000 | XFX HD5870

Need website help? PM me!
CrazeD is offline  
Closed Thread

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Automatically add a user during imaging color Programming 1 02-07-2009 03:15 AM
How to add more space to my Vista partition ingeborgdot Microsoft Windows and Software 5 01-18-2009 02:49 PM
CSS for Bringing Up Images Last Rex100 Programming 1 08-05-2008 05:29 PM
NASA Images Osiris Web Graphics and Design 0 07-27-2008 01:08 PM



Copyright 2002- Social Knowledge, LLC All Rights Reserved.

All times are GMT -5. The time now is 12:33 PM.


Powered by vBulletin® Version 3.8.8 Beta 1
Copyright ©2000 - 2017, vBulletin Solutions, Inc.