Falsche Menüdarstellung mit onmouseover & onmouseout

[1848er]

Moin,

einmal vorab:
Sorry, falls ich hier im falschen Themenbereich bin oder es das Problem schon mal gab. Zum einen weiss ich nicht wo genau der Fehler liegt (HTML oder JavaScript) und zum anderen kämpfe ich mich seit gestern via google und selfhtml durch, habe bisher aber nichts gefunden, was mir weiterhelfen konnte :/

Ich habe ein Javascript, mit dem die einzelnen Menübilder beim "onmouseover" und "onmouseout" ausgetauscht werden um einen Farbwechsel-Effekt zu erzielen.
Das funktioniert auch Prima, das Problem ist jedoch, dass das Menü völlig falsch angezeigt wird, sofern ich weitere Grafiken in die HTML Datei einbinde.

z.B.:

Das funktionierende Menü:
http://pimmelgicht.de/index.php

Der HTML Quellcode:

  
         <table cellpadding="0" cellspacing="0">  
          <tr>  
                         <td>  
   <img src="images/halter_links.jpg" width="51" height="29" border="0" onmouseover="Bildwechsel(0, Highlight7)" onmouseout="Bildwechsel(0, HalterLinks)" />  
                         </td>  
  
                         <td>  
   <a href="index.php" onmouseover="Bildwechsel(1, Highlight1)" onmouseout="Bildwechsel(1, Menu1)">  
   <img src="images/home_off.jpg" width="110" height="29" border="0" /></a>  
                         </td>  
  
                         <td>  
   <a href="about.php" onmouseover="Bildwechsel(2, Highlight2)" onmouseout="Bildwechsel(2, Menu2)">  
   <img src="images/about_off.jpg" width="139" height="29" border="0" /></a>  
                         </td>  
  
                         <td>  
                         <a href="work.php" onmouseover="Bildwechsel(3, Highlight3)" onmouseout="Bildwechsel(3, Menu3)">  
                         <img src="images/work_off.jpg" width="157" height="29" border="0" /></a>  
                         </td>  
  
                         <td>  
                         <a href="member.php" onmouseover="Bildwechsel(4, Highlight4)" onmouseout="Bildwechsel(4, Menu4)">  
                         <img src="images/member_off.jpg" width="150" heigth="29" border="0" /></a>  
                         </td>  
  
                         <td>  
                         <a href="contact.php" onmouseover="Bildwechsel(5, Highlight5)" onmouseout="Bildwechsel(5, Menu5)">  
                         <img src="images/contact_off.jpg" width="138" heigth="29" border="0" /></a>  
                         </td>  
  
                         <td>  
   <img src="images/halter_rechts.jpg" width="47" height="29" border="0" onmouseover="Bildwechsel(6, Highlight8)" onmouseout="Bildwechsel(6, HalterRechts)" />  
                         </td>  
                 </tr>  
         </table>  

Das Java Script (im Verzeichnis /js):

  
Menu1 = new Image();  
Menu1.src = "images/home_off.jpg";  
Highlight1 = new Image();  
Highlight1.src = "images/home_on.jpg";  
  
Menu2 = new Image();  
Menu2.src = "images/about_off.jpg";  
Highlight2 = new Image();  
Highlight2.src = "images/about_on.jpg";  
  
Menu3 = new Image();  
Menu3.src = "images/work_off.jpg";  
Highlight3 = new Image();  
Highlight3.src = "images/work_on.jpg";  
  
Menu4 = new Image();  
Menu4.src = "images/member_off.jpg";  
Highlight4 = new Image();  
Highlight4.src = "images/member_on.jpg";  
  
Menu5 = new Image();  
Menu5.src = "images/contact_off.jpg";  
Highlight5 = new Image();  
Highlight5.src = "images/contact_on.jpg";  
  
Menu6 = new Image();  
Menu6.src = "images/impressum_off.jpg";  
Highlight6 = new Image();  
Highlight6.src = "images/impressum_on.jpg";  
  
HalterLinks = new Image();  
HalterLinks.src = "images/halter_links.jpg";  
Highlight7 = new Image();  
Highlight7.src = "images/halter_links.jpg";  
  
HalterRechts = new Image();  
HalterRechts.src = "images/halter_rechts.jpg";  
Highlight8 = new Image();  
Highlight8.src = "images/halter_rechts.jpg";  
  
function Bildwechsel (Bildnr, Bildobjekt) {  
  window.document.images[Bildnr].src = Bildobjekt.src;  
}  

Wenn ich nun zusätzlich einen Header über dem Menü ausgeben möchte, funktioniert gar nix mehr :-(

HTML-Code:

  
         <table cellpadding="0" cellspacing="0">  
          <tr>  
                  <td>  
                         <img src="images/halter_links.jpg" width="51" height="29" border="0" /> <!-- Irgend eine Grafik -->  
                         </td>  
                 </tr>  
         </table>  
  
         <table cellpadding="0" cellspacing="0">  
          <tr>  
                         <td>  
   <img src="images/halter_links.jpg" width="51" height="29" border="0" onmouseover="Bildwechsel(0, Highlight7)" onmouseout="Bildwechsel(0, HalterLinks)" />  
                         </td>  
  
                         <td>  
   <a href="index.php" onmouseover="Bildwechsel(1, Highlight1)" onmouseout="Bildwechsel(1, Menu1)">  
   <img src="images/home_off.jpg" width="110" height="29" border="0" /></a>  
                         </td>  
  
                         <td>  
   <a href="about.php" onmouseover="Bildwechsel(2, Highlight2)" onmouseout="Bildwechsel(2, Menu2)">  
   <img src="images/about_off.jpg" width="139" height="29" border="0" /></a>  
                         </td>  
  
                         <td>  
                         <a href="work.php" onmouseover="Bildwechsel(3, Highlight3)" onmouseout="Bildwechsel(3, Menu3)">  
                         <img src="images/work_off.jpg" width="157" height="29" border="0" /></a>  
                         </td>  
  
                         <td>  
                         <a href="member.php" onmouseover="Bildwechsel(4, Highlight4)" onmouseout="Bildwechsel(4, Menu4)">  
                         <img src="images/member_off.jpg" width="150" heigth="29" border="0" /></a>  
                         </td>  
  
                         <td>  
                         <a href="contact.php" onmouseover="Bildwechsel(5, Highlight5)" onmouseout="Bildwechsel(5, Menu5)">  
                         <img src="images/contact_off.jpg" width="138" heigth="29" border="0" /></a>  
                         </td>  
  
                         <td>  
   <img src="images/halter_rechts.jpg" width="47" height="29" border="0" onmouseover="Bildwechsel(6, Highlight8)" onmouseout="Bildwechsel(6, HalterRechts)" />  
                         </td>  
                 </tr>  
         </table>  

Das ganze sieht dann so aus:

http://pimmelgicht.de/index2.php

Vielleicht bin ich auch einfach nur Blind heute. :-(

Greetz
1848er

[1848er]

Oh, ich seh grad, dass ich die falschen Links gepostet hab.

Das funktionierende Menü:

http://pimmelgicht.de/test/index.php

Das fehlerhafte Menü:

http://pimmelgicht.de/test/index2.php

[floater]

Hallo,

Oh, ich seh grad, dass ich die falschen Links gepostet hab.

Soll das Menü grafisch so bleiben?
Wenn ja: warum erstellst Du dieses Menü nicht mit CSS?

Gruß,
Floater

[1848er]

Hallo,

Oh, ich seh grad, dass ich die falschen Links gepostet hab.

Soll das Menü grafisch so bleiben?
Wenn ja: warum erstellst Du dieses Menü nicht mit CSS?

Gruß,
Floater

Öhm, gute Frage.
Als ich mich dazu schlau gelesen hatte, fand ich mehrfach die Umsetzung mit JavaScript.

Was für Vorteile/Nachteile habe ich denn, wenn ich das ganze mit CSS realisiere?

Greetz
1848er

[floater]

Hallo,

Was für Vorteile/Nachteile habe ich denn, wenn ich das ganze mit CSS realisiere?

Du hättest zum Beispiel reine Textlinks.
Ausserdem müsstest Du, wenn Menüpunkte hinzugefügt oder geändert werden sollen, nicht jedesmal die Grafiken ändern.
So kannst Du einfach den Text ändern oder ganz normal im Quellcode  einen Link hinzufügen, der automatisch das gewünschte aussehen hat.
Bei Farb-/Layout-Änderungen müsstest Du nur den CSS-Style ändern und nicht die Grafiken.
Ferner funktioniert das Menü auch bei abgeschaltetem Javascript.

Gruß,
Floater

[1848er]

Hallo,

Du hättest zum Beispiel reine Textlinks.
Ausserdem müsstest Du, wenn Menüpunkte hinzugefügt oder geändert werden sollen, nicht jedesmal die Grafiken ändern.
So kannst Du einfach den Text ändern oder ganz normal im Quellcode  einen Link hinzufügen, der automatisch das gewünschte aussehen hat.
Bei Farb-/Layout-Änderungen müsstest Du nur den CSS-Style ändern und nicht die Grafiken.
Ferner funktioniert das Menü auch bei abgeschaltetem Javascript.

Gruß,
Floater

Hi,

Ich werd mir das ganze dann wirklich mal für CSS anschauen.
Danke!!

Greetz
1848er

[rfb]

Moin

function Bildwechsel (Bildnr, Bildobjekt) {
  window.document.images[Bildnr].src = Bildobjekt.src;
}

mit BildNr wird dieser Funktion gesagt welches Bild gewechselt werden soll. Dabei wird mit dem ersten Bild im Dokument zu zählen begonnen (= Nr 0).
Wenn du davor Bilder einfügst musst du entweder entsprechend hier korrigieren (window.document.images[Bildnr-1].src=..) oder du verwendest stattdessen das name-Attribut.

Gruß
rfb

[1848er]

Moin

function Bildwechsel (Bildnr, Bildobjekt) {
  window.document.images[Bildnr].src = Bildobjekt.src;
}

mit BildNr wird dieser Funktion gesagt welches Bild gewechselt werden soll. Dabei wird mit dem ersten Bild im Dokument zu zählen begonnen (= Nr 0).
Wenn du davor Bilder einfügst musst du entweder entsprechend hier korrigieren (window.document.images[Bildnr-1].src=..) oder du verwendest stattdessen das name-Attribut.

Gruß
rfb

Moin,

danke!! klappt einwandfrei :)