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, 11:56 AM   #1 (permalink)
Newb Techie
Join Date: Feb 2009
Location: Northern Virginia
Posts: 4
Default How to add Hover images

<div align="center">
&nbsp;<table border="0" width="530" height="509" cellpadding="0" background="BaselineMapIntroRev1.jpg" style="border-collapse: collapse">
<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>
<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>
<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, 12: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, 02: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

a.chantilly {
	background:url(Trans.gif) no-repeat;

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">
&nbsp;<table border="0" width="530" height="509" cellpadding="0" background="BaselineMapIntroRev1.jpg" style="border-collapse: collapse">
<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>
<td height="199" colspan="2" width="312">
<p align="right"><a class="chantilly" href="chantilly.htm"></a></td>
<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 02:15 AM
How to add more space to my Vista partition ingeborgdot Microsoft Windows and Software 5 01-18-2009 01:49 PM
CSS for Bringing Up Images Last Rex100 Programming 1 08-05-2008 04:29 PM
NASA Images Osiris Web Graphics and Design 0 07-27-2008 12:08 PM

Our Communities

Our communities encompass many different hobbies and interests, but each one is built on friendly, intelligent membership.

» More about our Communities

Automotive Communities

Our Automotive communities encompass many different makes and models. From U.S. domestics to European Saloons.

» More about our Automotive Communities

Marine Communities

Our Marine websites focus on Cruising and Sailing Vessels, including forums and the largest cruising Wiki project on the web today.

» More about our Marine Communities

Copyright 2002- Social Knowledge, LLC All Rights Reserved.

All times are GMT -5. The time now is 12:58 AM.

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