Problem: Navigation vervielfacht sich?

[Deffcon]

Hallo Jungs,

Ich wollte eine neue Art von Navigation ausprobieren und hab das wie unten zu sehen als "map" aufgezogen. Ich wollte es dann mit dem "onmouseover"-Effekt ein bisschen "aufregender" machen, was jedoch nicht ganz klappte. Ich wollte eben, dass beim überfahren der Buttons der aktuelle größer wird und die Seitenabstände sich erhöhen.
Nun werden aber von Anfang an alle Banner untereinander dargestellt und beim überfahren des Ersten ändert sich jeweils immer eine Grafik.
Ich hab den Link unten reingestellt, wo ich die Navigation mal hochgeladen hab (jedoch ohne Verlinkungen).
Ich hoffe ihr könnt mir helfen.

Liebe Grüße Deffcon

Die Seite auf der ihr euch das mal anschauen könnt ist folgende: http://deffcon.pytalhost.de/

<img src="navi1.png" width="800" height="100" border="0" alt="Navi" usemap="#Navigation">

  <map name="Navigation">

    <area shape="rect" coords="90,27,140,76"
          href="news.html" alt="News" title="News"
   onMouseOver="document.Bild.src='navinews2.png';"
   onMouseOut="document.Bild.src='navi1.png';">
<img src="navi1.png"
   name="Bild"
   width=800 height=100
   alt="News"
   border=0>


    <area shape="rect" coords="223,27,281,76"
          href="pics.htm" alt="pics" title="pics"
   onMouseOver="document.Bild1.src='navipics2.png';"
   onMouseOut="document.Bild1.src='navi1.png';">
<img src="navi1.png"
   name="Bild1"
   width=800 height=100
   alt="team"
   border=0>


    <area shape="rect" coords="372,27,423,76"
          href="team.htm" alt="team" title="team"
   onMouseOver="document.Bild2.src='naviteam2.png';"
   onMouseOut="document.Bild2.src='navi1.png';">
<img src="navi1.png"
   name="Bild2"
   width=800 height=100
   alt="team"
   border=0>


    <area shape="rect" coords="513,27,564,76"
          href="mail.htm" alt="mail" title="mail"
   onMouseOver="document.Bild3.src='navimail2.png';"
   onMouseOut="document.Bild3.src='navi1.png';">
<img src="navi1.png"
   name="Bild3"
   width=800 height=100
   alt="mail"
   border=0>


    <area shape="rect" coords="654,27,705,76"
          href="call.htm" alt="call" title="call"
   onMouseOver="document.Bild4.src='navicall2.png';"
   onMouseOut="document.Bild4.src='navi1.png';">
<img src="navi1.png"
   name="Bild4"
   width=800 height=100
   alt="call"
   border=0>


  </map>

 

[Efchen]

Naja, Du gibst ja auch 5 Bilder aus und änderst nicht immer nur das erste, sondern das jeweilige.
Ich sehe 5 <img>, wo Du nur eines haben willst, und im JavaScript änderst Du auch jedesmal ein anderes, nämlich Bild, Bild1, Bild2, Bild3 und Bild4.

 

[Deffcon]

okay, danke =)

durch deinen tipp hab ichs hinbekommen.

fertiger code sieht so aus:


<img src="navi1.png" name="Bild" width="800" height="100" border="0" alt="Navi" usemap="#Navigation">

<map name="Navigation">

<area shape="rect" coords="90,27,140,76"
href="news.html" alt="News" title="News"
onMouseOver="document.Bild.src='navinews2.png';"
onMouseOut="document.Bild.src='navi1.png';">



<area shape="rect" coords="223,27,281,76"
href="pics.htm" alt="pics" title="pics"
onMouseOver="document.Bild.src='navipics2.png';"
onMouseOut="document.Bild.src='navi1.png';">



<area shape="rect" coords="372,27,423,76"
href="team.htm" alt="team" title="team"
onMouseOver="document.Bild.src='naviteam2.png';"
onMouseOut="document.Bild.src='navi1.png';">



<area shape="rect" coords="513,27,564,76"
href="mail.htm" alt="mail" title="mail"
onMouseOver="document.Bild.src='navimail2.png';"
onMouseOut="document.Bild.src='navi1.png';">



<area shape="rect" coords="654,27,705,76"
href="call.htm" alt="call" title="call"
onMouseOver="document.Bild.src='navicall2.png';"
onMouseOut="document.Bild.src='navi1.png';">



</map>