I want the button to remain light grey once the user clicks on it. I am using “hover” and “active” but the active feauture does not work. How can I make the button stay on “hover state” once the user is on the page.
Using Dreamweaver CS5. http://fzares.com/index1.html
Need help ASAP. Thanks!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><head>
<meta http-equiv="FzAres, LLC" content="text/html; charset=utf-8" />
<title>FzAres, LLC</title>
<style type="text/css">
.headerTop { background-color:#66CC00; border-top:0px solid #000000; border-bottom:0px solid #e6e6e6; text-align:right; }
.adminText {
font-size:13px;
color:#000;
line-height:200%;
font-family:arial;
text-decoration:none;
text-align: left;
vertical-align: top;
}
.headerBar { background-color:#e6e6e6; border-top:0px solid #e6e6e6; border-bottom:0px solid #333333; }
.title { font-size:22px; font-weight:bold; color:#336600; font-family:arial; line-height:110%; }
.subTitle { font-size:13px; font-weight:normal; color:#666666; font-style:italic; font-family:arial; }
td { font-size:13px; color:#000000; line-height:150%; font-family:arial; }
.footerRow {
background-color:#e6e6e6;
border-top:10px solid #e6e6e6e;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: left;
font-style: normal;
color: #000;
}
.footerText {
font-size:13px;
color:#000;
line-height:100%;
font-family:arial;
}
a { color:#FF0000; color:#FF6600; color:#FF6600; }
</STYLE>
<style type="text/css">
#nav2 *{font:1em Arial, sans-serif;text-decoration:none;color:#fff;list-style:none;margin:0;padding:0; line-height:0} /*Reset browsers and apply basic formatting*/
#nav2 li{display:inline}
#nav2 li *{height:30px;float:left;cursor:pointer;cursor:hand}
#nav2 a{
background:url(images/1/left.jpg) left no-repeat;
padding-left:30px;
color: #333;
} /*Applys the left segment of the image and adds the grey bottom border*/
#nav2 .right{padding-right:30px}
#nav2 .center{
margin-right:-30px;
min-width:30px;
height:30px;
padding:7px 0;
voice-family: "\\"}\\"";
voice-family:inherit;
height:16px;
background-image: url(images/1/center.jpg);
background-repeat: repeat-x;
} /*Applys the seamless background*/
#nav2 .start{
background-image: url(images/1/farleft.jpg);
background-repeat: no-repeat;
background-position: left;
} /*Applys the far left corner*/
#nav2 .end{
padding-right:60px;
background-image: url(images/1/farright.jpg);
background-repeat: no-repeat;
background-position: right;
} /*Applys the far right corner*/
/*The following controls the hover states of the individual image slices. It's important to remember that IE6 will only recognise :hover when applied to a link element*/
#nav2 a:hover{
color: #000;
background-image: url(images/1/right.jpg);
}
#nav2 a.start:hover{
color: #000;
background-image: url(images/1/farlefthover.jpg);
}
#nav2 a:hover .end{
color: #000;
background-image: url(images/1/farrighthover.jpg);
background-position: right;
}
#nav2 a:hover .center{
color:#000;
background-image: url(images/1/centerhover.jpg);
}
#nav2 a:hover .right{
padding-right:60px;
margin-right:-30px;
position:relative;
color: #000;
background-image: url(images/1/lefthover.jpg);
background-position: right;
}
-->#nav2 *{font:1em Arial, sans-serif;text-decoration:none;color:#fff;list-style:none;margin:0;padding:0; line-height:0} /*Reset browsers and apply basic formatting*/
#nav2 a:active{
color: #000;
background-image: url(images/1/right.jpg);
}
#nav2 a.start:active{
color: #000;
background-image: url(images/1/farleftcurrent.jpg);
}
#nav2 a:active .end{
color: #000;
background-image: url(images/1/farrightcurrent.jpg);
background-position: right;
}
#nav2 a:active.center{
color:#000;
background-image: url(images/1/centercurrent.jpg);
}
#nav2 a:active .right{
padding-right:60px;
margin-right:-30px;
position:relative;
color: #000;
background-image: url(images/1/leftcurrent.jpg);
background-position: right;
}
</style>
<table width="103%" cellpadding="10" cellspacing="0" class="backgroundTable" bgcolor='#ffffff' >
<tr>
<td valign="top" align="center"><table width="600" cellpadding="0" cellspacing="0">
<tr bgcolor="#e6e6e6e">
<td width="638" height="215" valign="top" style="background-color:#e6e6e6;border-top:5px solid #e6e6e6;"><table width="600" cellpadding="0" cellspacing="0">
<tr>
<td><img src="FZ_topbar.jpg" alt="Antonio_top" width="640" height="101" border="0" align="absbottom" /><br />
<table width="615" border="0" cellpadding="0" cellspacing="0" id="nav2">
<tr>
<td width="548"><ul id="nav3">
<div id="active.cc">
<li><a href="index.html" target="_parent" class="start"><span class="right"><span class="center">Home</span></span></a></li>
<li><a href="profile.html" target="_parent"><span class="right"><span class="center">Profile</span></span></a></li>
<li><a href="services.html" target="_parent"><span class="right"><span class="center">Services</span></span></a></li>
<li><a href="markets.html" target="_parent"><span class="right"><span class="center">Markets</span></span></a></li>
<li><a href="#" target="_parent" id="active.cc"><span class="end"><span class="center">Contact</span></span></a></li>
</ul></td>
</tr>
</table></td>
</tr>
<tr bgcolor="#e6e6e6e">
<td width="600" height="215" valign="top" style="background-color:#e6e6e6;border-top:5px solid #e6e6e6;"><table width="640" cellpadding="5" cellspacing="0" bgcolor="#e6e6e6">
<tr> </tr>
<tr></tr>
<tr>
<td bgcolor="#e6e6e6" valign="top" style="background-repeat: no-repeat; background-image: none; background-color: #e6e6e6; background-attachment: scroll; font-size:16px; color:#000000; line-height:60%; font-family:Arial, Helvetica, sans-serif; font-weight: bold;"><table width="316" border="0" align="center" cellpadding="3" cellspacing="5">
<tr>
<td width="300" valign="top"><p><span style="font-size:15px;font-weight:bold;color:#333333;font-family:arial;line-height:150%;">FZ Ares, LLC</span></p>
570 Beatty Rd.<br>
Monroeville PA, 15146</span></p>
<p><a href="mailto:Antonio.fernandez@fzares.com">Antonio.fernandez@fzares.com</a></p>
<p> </p></td>
</tr>
</table></td>
</tr>
<tr>
</table>
</tr>
</table> </tr>
</table>
<table width="640" cellpadding="0" cellspacing="0">
<tr bgcolor="#FFFFFF">
<td width="638" valign="top" bgcolor="#e6e6e6" style="font-size:13px; color:#000000; line-height:150%; font-family:Arial, Helvetica, sans-serif;"><table width="631" height="61" border="0" align="center" cellpadding="2" cellspacing="1">
<tr>
<td width="625" valign="top" class="footerRow" ><table width="605" height="48" border="0" cellpadding="2" cellspacing="1">
<tr>
<td height="20" scope="col"><a href="contact.html" target="_parent"><img src="contact_bt.jpg" alt="contact" width="90" height="16" border="0" /></a></td>
</tr>
<tr>
<td height="25" valign="top"><p>Antonio J. Fernandez Ares, Ph.D., P.E.</p></td>
</tr>
</table></td>
</tr>
</table>
<table width="626" border="0" cellspacing="0" cellpadding="0">
<tr>
<th width="600" scope="col"><table width="610" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="520"> </td>
<td width="90"><img src="FZ_logo.jpg" width="90" height="43"></td>
</tr>
</table></th>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
:active refers to the moment a link is clicked. .active (one dot) is a class you put on the anchor to keep it highlighted. #current is what I use. Here is my tut on how to do it. http://www.visibilityinherit.com/code/current-page.php
Thank you I am new to the web world. How would I link to multiple images instead of one? My hover state is made up of multiple images that create the tab image.
#nav2 a:hover{
color: #000;
background-image: url(images/1/right.jpg);
}
#nav2 a.start:hover{
color: #000;
background-image: url(images/1/farlefthover.jpg);
}
#nav2 a:hover .end{
color: #000;
background-image: url(images/1/farrighthover.jpg);
background-position: right;
}
#nav2 a:hover .center{
color:#000;
background-image: url(images/1/centerhover.jpg);
}
#nav2 a:hover .right{
padding-right:60px;
margin-right:-30px;
position:relative;
color: #000;
background-image: url(images/1/lefthover.jpg);
background-position: right;
Thanks
You would have to give each a unique id each with the dif image.