✔ mouseover

[Eichhornleib]

Guten Tag,
ich kann Relativ gut HTML außer mousover efkete (außer bei Links). Ich brauche folgendes: Wenn man über einen Link fährt, wird die dazugehörige Tabelle mit einem Hintergrundbild geändert. Wenn wieder raus, wieder eine Farbe.
Und ebenfalls, auch den Effekt, wenn man die Spalte berührt mit der Maus.
Ungefähr wie das Menü von Tutorials.de nurhttp://www.phpee.com/
Statt einer Farbe, eine Grafik

 

[SilentWarrior]

Und wo liegt das Problem?

tutorials.de ist kein Scriptearchiv. Wir helfen dir gerne, aber zuerst muss etwas von dir kommen. Sprich: Du hast dir schonmal Gedanken dazu gemacht, hast einiges ausprobiert, und hast etwas Code, den du herzeigen kannst. Das ganze selbst schreiben wird hier wohl keiner (ausser ein paar Hypersozialen).

 

[Eichhornleib]

gut hier:
das ist die Tabelle

		  <table cellpadding="0" cellspacing="0" border="0" id="menu1">
 		<tr>
 		  <td></td>
 		  <td width="149">&raquo;<a href="/index.php?node=1">Home</a><span
 			class="label">&nbsp;</span></td>
 		</tr>
 	  </table>

Und das habe ich in der CSS Datei:

#menu1 a:hover {
 background-image:url(ausgewaehlt.jpg);
 }

Funktioniert aber nicht

 

[Maik]

Mein Vorschlag: du vergibst für die Tabelle zwei CSS-Klassen, z.B. .normal (= Hintergrundfarbe) und .hover (= Hintergrundbild):

table.normal
{
background-color: #dfdfdf;
}

table.hover
{
background-image: url(ausgewaehlt.jpg);
}

Mit Hilfe der Event-Handler onmouseover und onmouseout sowie der JavaScript-Anweisung this.className='[ Klassenname ]' lassen sich nun die CSS-Klassen beim Überfahren der Tabelle tauschen - in deinem Fall die Hintergrundfarbe gegen ein Hintergrundbild:

<table class="normal" onmouseover="this.className='hover'" onmouseout="this.className='normal'" cellpadding="0" cellspacing="0" border="0">
 <tr>
  <td width="149">&raquo;<a href="/index.php?node=1">Home</a><span class="label">&nbsp;</span></td>
 </tr>
</table>

[ Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 7.23 ]

 

[Eichhornleib]

Danke, hat Funktioniert.