tabelle: mouse-in / mouse-out

Status
Nicht offen für weitere Antworten.
P

phil-ip

Erfahrenes Mitglied
hi, ich hoffe ihr könnt mir weiter helfen?! ich möchte gerne einen mouse-in / mouse-out effekt nutzen. Wenn man in dieser Tabelle mit der Maus über eine Spalte geht, soll sich die Farbe der Schrift ändern, und die Spalte neben der breiteren mit dem "Text" drin, soll sich farblich ändern.

Bitte helft mir!

Code: 
 <table width="157" border="1" align="left" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" bgcolor="#FBFBFB">
	  <tr>
		<td width="8" bgcolor="#E6E6E6">&nbsp;</td>
		<td width="143"><span class="Stil1">Home</span></td>
	  </tr>
	  <tr>
		<td bgcolor="#E6E6E6">&nbsp;</td>
		<td class="Stil1">About Me</td>
	  </tr>
	  <tr>
		<td bgcolor="#E6E6E6">&nbsp;</td>
		<td class="Stil1">Umfragen</td>
	  </tr>
	  <tr>
		<td bgcolor="#E6E6E6">&nbsp;</td>
		<td class="Stil1">G&auml;stebuch</td>
	  </tr>
	  <tr>
		<td bgcolor="#E6E6E6">&nbsp;</td>
		<td class="Stil1">Forum</td>
	  </tr>
	  <tr>
		<td bgcolor="#E6E6E6">&nbsp;</td>
		<td class="Stil1">Photos</td>
	  </tr>
	  <tr>
		<td bgcolor="#E6E6E6">&nbsp;</td>
		<td class="Stil1">Downloads</td>
	  </tr>
	  <tr>
		<td height="21" bgcolor="#E6E6E6">&nbsp;</td>
		<td class="Stil1">Impressum</td>
	  </tr>
	</table>
 
<html>
<head>
<script type="text/javascript">
<!--
function change(x)
{
x.style.color = "#545454";
x.previousSibling.style.backgroundColor = "#767676";
}

function back(x)
{
x.style.color = "#000000";
x.previousSibling.style.backgroundColor = "#E6E6E6";
}
//-->
</script>
</head>
<body>
<table width="157" border="1" align="left" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" bgcolor="#FBFBFB">
<tr>
<td width="8" bgcolor="#E6E6E6">&nbsp;</td>
<td width="143"><span class="Stil1">Home</span></td>
</tr>
<tr>
<td bgcolor="#E6E6E6">&nbsp;</td>
<td class="Stil1" onmouseover="change(this)" onmouseout="back(this)">About Me</td>
</tr>
<tr>
<td bgcolor="#E6E6E6">&nbsp;</td>
<td class="Stil1" onmouseover="change(this)" onmouseout="back(this)">Umfragen</td>
</tr>
<tr>
<td bgcolor="#E6E6E6">&nbsp;</td>
<td class="Stil1" onmouseover="change(this)" onmouseout="back(this)">G&auml;stebuch</td>
</tr>
<tr>
<td bgcolor="#E6E6E6">&nbsp;</td>
<td class="Stil1" onmouseover="change(this)" onmouseout="back(this)">Forum</td>
</tr>
<tr>
<td bgcolor="#E6E6E6">&nbsp;</td>
<td class="Stil1" onmouseover="change(this)" onmouseout="back(this)">Photos</td>
</tr>
<tr>
<td bgcolor="#E6E6E6">&nbsp;</td>
<td class="Stil1" onmouseover="change(this)" onmouseout="back(this)">Downloads</td>
</tr>
<tr>
<td height="21" bgcolor="#E6E6E6">&nbsp;</td>
<td class="Stil1" onmouseover="change(this)" onmouseout="back(this)">Impressum</td>
</tr>
</table>
</body>
</html>

___________________________________________________________________

Funktioniert leider nicht auf allen Browsern.
Ciao...
 
Mein Vorschlag:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
	<title></title>
	<style type="text/css">
		* {
			margin:			0;
			padding:		0;
			border-style:		none;
		}
		#nav {
			list-style-type:	none;
			width:			10em;
		}
		#nav a:link,
		#nav a:visited {
			display:		block;
			padding-left:		0.5em;
			color:			#000;
			border-left:		8px solid #e6e6e6;
			background-color:	#fbfbfb;
		}
		#nav a:hover {
			border-color:		#696;
			background-color:	#fe0;
		}
	</style>
</head>


<body>
<ul id="nav">
	<li><a href="/home">Home</a></li>
	<li><a href="/aboutme">About Me</a></li>
	<li><a href="/umfragen">Umfragen</a></li>
	<li><a href="/gaestebuch">Gästebuch</a></li>
	<li><a href="/forum">Forum</a></li>
	<li><a href="/photos">Photos</a></li>
	<li><a href="/downloads">Downloads</a></li>
	<li><a href="/impressum">Impressum</a></li>
</ul>
</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück