MouseOver mit Bildern

[Anfänger]

Hallo,

fange gerade an eine Navi zu bastellt mit einem MouseOver Effekt. Das klappt auch schon ganz gut nur das ich wenn ich zwei nebeneinander setze das ich dort einen Abstand drin hab.
Wie bekommen ich den weg?

Code:

<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>

usw....

Danke.

MFG der Anfänger

[jobo]

Hallo,

naja, das hat mit dem bildwechsel wohl nix zu tun, oder?

Gruß

jobo

[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'