MouseOver mit Bildern

[Gunnar Bittersmann]

@@Anfänger:

nuqneH

<a href="./seite1/"
   onMouseOver="document.Bild.src='./Bild1.gif';"
   onMouseOut="document.Bild.src='./Bild2.gif';">
<img src="./Bilder/Buttons/Navi1/Bild2.gif"
   name="Bild"
   width=98 height=54
   alt="seite1"
   border=0>
</a>

Für einen Hover-Effekt JavaScript einzusetzen, ist unnötig. Das geht mit CSS. Im Markup steht:

<a id="href-seite1" href="seite1/">Seite 1</a>

Im Stylesheet:

#href-seite1  
{  
  background: url(Bild1.gif);  
  height: 54px;  
  text-indent: -666px;  
  width: 98px;  
}  
  
#href-seite1:hover  
{  
  background: url(Bild2.gif);  
}

Noch besser, beide Bilder wären in einer Grafikdatei zusammengefasst. Noch besser gleich alle Grafiken für das Menü. Hatten wir gerade.

usw....

Das heißt was?

Jetzt das nächste 'a'-Element? 'a'-Elemente sind Inline-Elemente; Whitespace (also auch Zeilenumbruch) zwischen ihnen im Quelltext wird als Leerzeichen dargestellt.

Anders, wenn diese gefloatete Blockelemente sind. Oder noch besser, in solchen liegen: Ein Navigationsmenü ist eine Liste:

<ul id="nav">  
  <li id="nav-seite1"><a href="seite1/">Seite 1</a></li>  
  <li id="nav-seite2"><a href="seite2/">Seite 2</a></li>  
  <li id="nav-seite3">Seite 3</li>  
  <li id="nav-seite4"><a href="seite4/">Seite 4</a></li>  
</ul>

Seite 3 ist im Beispiel die aktuell angezeigte; diese sollte im Menü nicht verlinkt sein. (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])

#nav  
{  
  list-style: none;  
  margin:  0;  
  padding: 0;  
}  
  
#nav li  
{  
  margin:  0;  
  padding: 0;  
  float: left;  
}

Qapla'