David Loos: Bildertausch bei Buttons

Hallo nochmal !

Hab hier leider schon wieder ein kleines Problem:
Habe ein Skript für ein Menü gebaut, in dem die Buttons bei
onMouseover, onMouseout und bei onClick gewechselt werden.
Das funktioniert auch hervorragend; leider aber nur im
MS Internet Explorer. Habe schon herausgefunden, daß im Netscape
Layer anders angesprochen werden. Gibt es vielleicht dennoch eine
Lösung, das Skript in beiden Browsern zum Laufen zu bekommen?

Hier der Quelltext:

<html>

<head>  

<title>Menue</title>
  <script language="JavaScript"><!--
function ZweiFrames(URL1,F1,URL2,F2)
     {  
      parent.sicht.location.href=URL1;
      parent.menueunt.location.href=URL2;

}

var inaktiv="bild1";

function Wechsel(bildname,zustand)
{
if (inaktiv!=bildname)
  {
  if (zustand==1) document[bildname].src ="Bilder/menue/" + bildname+"over.gif"; /*Zustand beim OnMouseOver*/

if (zustand==2) document[bildname].src ="Bilder/menue/" + bildname+"out.gif";  /*Zustand nach OnMouseOut*/
  if (zustand==3) {
     document[inaktiv].src ="Bilder/menue/" + inaktiv+"out.gif";      /*Zustand nach OnClick*/
     document[bildname].src ="Bilder/menue/" + bildname+"click.gif";
     inaktiv=bildname; }
  }
return true; }
// -->
  </script>
  <style type="text/css"><!--
   #layer { position: absolute; top: 18px; left: 2px; width: 39px; height: 17px; visibility: visible }
   #layer2 { position: absolute; top: 55px; left: 2px; width: 59px; height: 17px; visibility: visible }
   #layer3 { position: absolute; top: 91px; left: 2px; width: 73px; height: 31px; visibility: visible }
   #layer4 { position: absolute; top: 143px; left: 2px; width: 55px; height: 17px; visibility: visible }
   #layer5 { position: absolute; top: 183px; left: 2px; width: 51px; height: 15px; visibility: visible }-->
  </style>
</head>

<body background="../Bilder/menueli.gif">  

<div id="layer">
   <a href="javascript:ZweiFrames('home.htm',1,'menueunt.htm',2)" onmouseover="Wechsel('home',1);" onmouseout="Wechsel('home',2);" onclick="Wechsel('home',3);"><img name="home" height="17" width="39" border="0" src="../Bilder/menue/homeout.gif"></a></div>
  <div id="layer2">
   <a href="javascript:ZweiFrames('untern.htm',1,'menueunt.htm',2)" onmouseover="Wechsel('company',1);" onmouseout="Wechsel('company',2);" onclick="Wechsel('company',3);"><img name="company" height="17" width="59" border="0" src="Bilder/menue/companyout.gif"></a></div>
  <div id="layer3">
   <a href="javascript:ZweiFrames('pr_u_loe.htm',1,'menueunt.htm',2)" onmouseover="Wechsel('products',1);" onmouseout="Wechsel('products',2);" onclick="Wechsel('products',3);"><img name="products" height="31" width="73" border="0" src="Bilder/menue/productsout.gif"></a></div>
  <div id="layer4">
   <a href="javascript:ZweiFrames('support.htm',1,'menueunt.htm',2)" onmouseover="Wechsel('support',1);" onmouseout="Wechsel('support',2);" onclick="Wechsel('support',3);"><img name="support" height="17" width="55" border="0" src="../Bilder/menue/supportout.gif"></a></div>
  <div id="layer5">
   <a href="javascript:ZweiFrames('contact.htm',1,'menueunt.htm',2)" onmouseover="Wechsel('contact',1);" onmouseout="Wechsel('contact',2);" onclick="Wechsel('contact',3);"><img name="contact" height="15" width="51" border="0" src="Bilder/menue/contactout.gif"></a></div>
  
</body>

</html>

Vielen Dank für Eure Hilfe,
werde hier anscheinend noch zum Stammgast.

  1. Es gibt Lösungen unter NS mit <layer> etc. -> selfhtml....
    Meistens muss man bei solchen Sachen, die komplette Geschichte 2mal programmieren: für IE un NS!
    Ne Abfrage welchen Browser man benütz geht mit:
    if(navigator.appName =="Microsoft Internet Explorer") {}
      if(navigator.appName =="Netscape"){}
    Dann kannst du das ganze ein wenig steuern....
    Tja, vielleicht hat jemand ja nen goldenen Mittleweg gefunden... :-)
    MfG Slu

    1. Hab grade mal so eine Abfrage geschrieben.
      Bei Netscape gibt es aber jetzt die Fehlermeldung:

      "document.layer has no properties."

      Hier nochmal der Quelltext der geänderten Funktion:

      function Wechsel(nummer,bildname,zustand)
      {
      if (navigator.appName =="Microsoft Internet Explorer")
      {
      if (inaktiv!=bildname)
        {
        if (zustand==1) document[bildname].src ="Bilder/menue/" + bildname+"over.gif"; /*Zustand beim OnMouseOver*/

      if (zustand==2) document[bildname].src ="Bilder/menue/" + bildname+"out.gif";  /*Zustand nach OnMouseOut*/
        if (zustand==3) {
           document[inaktiv].src ="Bilder/menue/" + inaktiv+"out.gif";      /*Zustand nach OnClick*/
           document[bildname].src ="Bilder/menue/" + bildname+"click.gif";
           inaktiv=bildname; }
      return true;
        }
      }
      if(navigator.appName =="Netscape")
      {
      if (inaktiv!=bildname)
        {
        if (zustand==1) document.layer[nummer].document[bildname].src ="Bilder/menue/" + bildname+"over.gif"; /*Zustand beim OnMouseOver*/

      if (zustand==2) document.layer[nummer].document[bildname].src ="Bilder/menue/" + bildname+"out.gif";  /*Zustand nach OnMouseOut*/
        if (zustand==3) {
           document.layer[nummer].document[inaktiv].src ="Bilder/menue/" + inaktiv+"out.gif";      /*Zustand nach OnClick*/
           document.layer[nummer].document[bildname].src ="Bilder/menue/" + bildname+"click.gif";
           inaktiv=bildname; }
      return true;
        }
      }
      }

      ...Immer diese blöden Browserdifferenzen. Hauptsache man kann ein
      schönes Gimmik in seine Browser einbauen um sich hervorzutun...

      1. Hallo nochmals!

        Ich war gerade wohl ein wenig schnell!
        Nicht nur Javascript muss angepasst werden, sondern auch der HTML Code. Für das <div></div> muss der folgende Netscape-Tag verwendet werden!

        <LAYER NAME="lay0" LEFT=10 TOP=120 WIDTH=172 clip="0,0,170,22"></LAYER>

        Man findet das auch im selfhtml unter Layer übereinanderlegen, oder so ähnlich, hat ein Beispiel dort!

        Auf jeden Fall einfacher wärs, wenn du einfach die Bilder positionieren tätest und diesen Namengibt. Die kannst du auch einfach modifizieren!
        Oder aber du verwendest eine Tabelle!
        Vielleicht hab ich dich auch falsch verstanden Aber das mit <layer> und <div> ist eine grausame Sache..
        IE vs. NS, wie immer!!
        Also, ich schau mal nochmals, vielleicht finde ich noch was....
        Gruss Slu

        1. Danke Slu!

        2. Das Problem ist nur, ich muß die Buttons absolut positionieren, da sie mir sonst nicht mehr auf meinen Hintergrund passen.

          Mit Layern habe ich halt wieder das Problem, das IE. sie nicht unterstützt.

          1. Tja?
            Du hast es erfasst!
            Entweder oder,  wenn du an der absoluten Positionierung festhälst und
            dies nicht mit einer Tabelle realisieren kannst gibts nur noch die Möglichkeit:
            das ganz zweimal schreiben....
            That's the life it is! :-(
            MfG Slu

            PS: Ich hatte das gleiche Problem auch.... Und ich habs 2mal geschrieben!....