nicht angemeldet
Tabellenhintergrundbild mit CSS bei "a:hover" ändern
Hallo und guten Tag,
ich habe folgendes Problem:
Auf meine HP habe ich auf der linken Seite ein Menu, wo ich die Links in einer Tabelle angelegt habe und dort ein Hintergrundbild in Form eines Buttons eingefügt. Soweit, so gut...
Jetzt möchte ich jedoch, dass, wenn ich mit der Maus über einen Link gehe, der Tabellenhintergrund sich in ein anderes Bild ändert. Die Bilder habe ich schon fertiggestellt, jedoch ändert sich bei mir nichts.
Dieses ist der Teil des Menus mit der Tabelle:
<!------------------------->
<table align="center" id="menu">
<tr>
<td background="bilder/menu/botton.png" width="160" height="48" align="center" style="padding-top:5px" class="menu"><a href="home.html" target="inhalt" alt="Zurück zur Startseite" onMouseOver="window.status='Hier gehts zurück zur Startseite.';return true" onMouseOut="window.status=''">Home</a></td>
</tr>
<tr>
<td background="bilder/menu/botton.png" width="160" height="48" align="center" style="padding-top:5px" class="menu"><a href="ich.html" target="inhalt" onMouseOver="window.status='Hier erfährst du was über mich';return true" onMouseOut="window.status=''">Über Mich</a></td>
</tr>
<tr>
<td background="bilder/menu/botton.png" width="160" height="48" align="center" style="padding-top:5px" class="menu"><a href="it_grundlagen_menu.html" target="menu" onMouseOver="window.status='Hier geht´s zu meiner Projektarbeit...';return true" onMouseOut="window.status=''">Projektarbeit Informatik</a><td>
</tr>
<tr>
<td background="bilder/menu/botton.png" width="160" height="48" align="center" style="padding-top:5px" class="menu"><a href="http://121925.netguestbook.com/" target="inhalt" onMouseOver="window.status='Hier kannst du einen Eintrag im Gästebuch hinterlassen...';return true" onMouseOut="window.status=''">Gästebuch</a></td>
</tr>
</table>
<!------------------------->
Und das ist der CSS:
<!------------------------->
#menu a:link
{
color: #003C7D;
text-decoration: none;
}
#menu a:visited
{
color: #B40028;
text-decoration: none;
}
#menu a:active
{
color: #FF0000;
text-decoration: none;
}
#menu a:hover
{
background-image:url(bilder/botton_hov.png);
color: black;
text-decoration:none
padding-left: 2px;
padding-bottom: 2px;
padding-top: 2px;
margin: 0px auto;
<!------------------------->
Über schnelle Hilfe würde ich mich freuen. Ich habe zwar schon lange gegooglet aber nicht gefunden, was hilft.
-
Hi,
Jetzt möchte ich jedoch, dass, wenn ich mit der Maus über einen Link gehe, der Tabellenhintergrund sich in ein anderes Bild ändert.
Du kannst nur die Formatierung des Elementes, welches ueberfahren wird, oder seiner Nachfahren aendern - nicht aber die seiner Vorfahren.
Nutze table:hover, wenn du das generell beim ueberfahren der Tabelle machen willst - oder Javascript, wenn es fuer jeden Link individuell sein soll.
<a href="it_grundlagen_menu.html" target="menu" onMouseOver="window.status='Hier geht´s zu meiner Projektarbeit...';return true"
Und unterlasse doch bitte die Manipulation der Statuszeile. Abgesehen davon, dass sich eine solche in modernern Browsern sowieso unterbinden laesst, soll der Nutzer dort sehen koennen, wohin ihn ein Link fuehren wird.
MfG ChrisB
-
Hey
Nutze table:hover, wenn du das generell beim ueberfahren der Tabelle machen willst - oder Javascript, wenn es fuer jeden Link individuell sein soll.
Ich hab das jetzt mit Java Script ausprobiert und es klappt...Danke (:
Und unterlasse doch bitte die Manipulation der Statuszeile. Abgesehen davon, dass sich eine solche in modernern Browsern sowieso unterbinden laesst, soll der Nutzer dort sehen koennen, wohin ihn ein Link fuehren wird.
Ok hab ich gemacht.
LG
Christoph
-