Technical Discussion
  >> Web Design / HTML / Web hosting Forum


Register (or login) on our website and you will not see this ad.


These posts have been archived and can no longer be replied to or modified.
  Print Thread
Standard User smoot
(newbie) Sat 12-Jun-10 17:47:41
Print Post

Menu question


[link to this post]
 
Hi,

The code below is for a simple menu where the background color changes on mouseover. But I'd also like the text color to change... I'm sure this is very basic but I just can't get it to work, any ideas?

Thanks.

----------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
font-family: Tempus Sans ITC;
}
.cells {
border: 1px solid #333333;
background-color: #66CCCC;
text-align: center;
}
.navlinks {
text-decoration: none;
font-weight: bold;
}
-->
</style></head>

<body>
<table border="0" cellpadding="3" cellspacing="10">
<tr>
<td width="140" class="cells" onmouseover="style.backgroundColor='#FC3'; "onmouseout="style.backgroundColor='#6CC'"><a href="Home" class="navlinks">Home</a></td>
<td width="140" class="cells" onmouseover="style.backgroundColor='#FC3'; "onmouseout="style.backgroundColor='#6CC'"><a href="Music" class="navlinks">Music</a></td>
<td width="140" class="cells" onmouseover="style.backgroundColor='#FC3'; "onmouseout="style.backgroundColor='#6CC'"><a href="Designs" class="navlinks">Designs</a></td>
<td width="140" class="cells" onmouseover="style.backgroundColor='#FC3'; "onmouseout="style.backgroundColor='#6CC'"><a href="Paintings" class="navlinks">Paintings</a></td>
<td width="140" class="cells" onmouseover="style.backgroundColor='#FC3'; "onmouseout="style.backgroundColor='#6CC'"><p><a href="Cards" class="navlinks">Cards</a></p></td>
</tr>
</table>
</body>
</html>
Standard User deleted
(deleted) Sat 12-Jun-10 18:00:25
Print Post

Re: Menu question


[re: smoot] [link to this post]
 
You can do this with CSS rather than managing the events yourself (onmouseover etc)

Try the following - I only changed the first cell.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
font-family: Tempus Sans ITC;
}
.menu
{
background-color: white;
}
.menu a
{
color:Black;
text-decoration:none;
}
.menu:hover
{
background-color: black;
}
.menu:hover a
{
color: white;
text-decoration:none;
}
-->
</style></head>

<body>
<table border="0" cellpadding="3" cellspacing="10">
<tr>
<td width="140" class="menu"><a href="Home">Home</a></td>
<td width="140" class="cells" onmouseover="style.backgroundColor='#FC3'; "onmouseout="style.backgroundColor='#6CC'"><a href="Music" class="navlinks">Music</a></td>
<td width="140" class="cells" onmouseover="style.backgroundColor='#FC3'; "onmouseout="style.backgroundColor='#6CC'"><a href="Designs" class="navlinks">Designs</a></td>
<td width="140" class="cells" onmouseover="style.backgroundColor='#FC3'; "onmouseout="style.backgroundColor='#6CC'"><a href="Paintings" class="navlinks">Paintings</a></td>
<td width="140" class="cells" onmouseover="style.backgroundColor='#FC3'; "onmouseout="style.backgroundColor='#6CC'"><p><a href="Cards" class="navlinks">Cards</a></p></td>
</tr>
</table>
</body>
</html>
Standard User smoot
(newbie) Sun 13-Jun-10 08:12:13
Print Post

Re: Menu question


[re: deleted] [link to this post]
 
Thanks for the info.


Register (or login) on our website and you will not see this ad.

  Print Thread

Jump to