Roland KRysl: Bild (Layer)wechsel bei onmouseover

Hallo zusammen,

mit einer einfachen Funktion sollen bei mousover und -out wechselnde Div-Bereiche erscheinen.
Ein Wechseln des Bildbereiches kommt nicht in Frage, weil die Bilder unterschiedlich groß
sind. Das Problem habe ich für den NN4.7 und den IE5 gelöst, nur beim Dom
hakts. Ich vermute, daß ich mitder Klammerung Probleme habe. Oder stimmt die Positionierung
der Divs nicht? In Selfhtml habe ich keine Lösung gedfunden, daher die Bitte um Hilfe.
Ist hier die Klammerung richtig, fehlen hier etwa Anführungszeichen, oder
was will der Mozilla?
p[i] ist das entsprechende Element des Arrays.

if ((document.getElementById) && (navigator.appName=="Netscape"))
 {
document.getElementById(p[i]).style.visibility='hidden';
document.getElementById(q[i]).style.visibility='visible';
    }

Vielen Dank im Voraus,

Roland Krysl

Hier ein funktionsfähiger Auszug aus dem Skript:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
 <title>Lay2b</title>
</head>

<body bgcolor="#EEBBBB">
<br>
<br>
<br>
<br>
<script language="JavaScript">
p = new Array("BrucknerEins","AromoEins","ZoardEins","MikkaEins","MamiEins",
"DomEins","LajosEins","LoszerEins","VacskaEins");
q = new Array("BrucknerZwei","AromoZwei","ZoardZwei","MikkaZwei","MamiZwei",
"DomZwei","LajosZwei","LoszerZwei","VacskaZwei");

function Zeigeneu(i)
{
if (document.all)
   {
document.all[p[i]].style.visibility='hidden';
document.all[q[i]].style.visibility='visible';
    }

if (document.layers)
   {
document[p[i]].visibility='hidden';
document[q[i]].visibility='visible';
   }

if ((document.getElementById) && (navigator.appName=="Netscape"))
 {
document.getElementById(p[i]).style.visibility='hidden';
document.getElementById(q[i]).style.visibility='visible';
    }

}

function Zeigealt(i)
{
if (document.all)

{
document.all[q[i]].style.visibility='hidden';
document.all[p[i]].style.visibility='visible';
   }

if (document.layers)
   {
document[q[i]].visibility='hidden';
document[p[i]].visibility='visible';
   }

if ((document.getElementById) && (navigator.appName=="Netscape"))
 {
document.getElementById(q[i]).style.visibility='visible';
document.getElementById(p[i]).style.visibility='hidden';
    }
}
</script>

<div id="BrucknerZwei" style="position:absolute; left:100px; top:10px; width:85; height:100;  visibility:visible" width:300px; height:250px; background-color:#DDDDFF; color:#000066;
font-family:Arial; font-size:9pt; font-weight:bold; padding:10px>
<a href onmouseover="javascript:Zeigealt(0)"><b><img src="szomor.jpg" border="none"></b></a>
</div>

<div id="BrucknerEins"
style="position:absolute; left:100; top:10; width:85; height:100; visibility:hidden" width:300px; height:250px; background-color:#DDDDFF; color:#000066;
font-family:Arial; font-size:9pt; font-weight:bold; padding:10px;>
<a href onmouseout="javascript:Zeigeneu(0)"><b><img src="bruckner.jpg" border="none"></b></a>
</div>

<div id="AromoZwei" style="position:absolute; left:189; top:30; width:70; height:63;  visibility:visible" width:300px; height:250px; background-color:#DDDDFF; color:#000066;
font-family:Arial; font-size:9pt; font-weight:bold; padding:10px;>
<a href onmouseover="javascript:Zeigealt(1)"><b><img src="arom2.gif" border="none"></b></a>
</div>

<div id="AromoEins"
style="position:absolute; left:187; top:30; width:70; height:63; visibility:hidden" width:300px; height:250px; background-color:#DDDDFF; color:#000066;
font-family:Arial; font-size:9pt; font-weight:bold; padding:10px;>
<a href onmouseout="javascript:Zeigeneu(1)"><b><img src="arom1.gif"  border="none"></b></a>
</div>

</body>
</html>

  1. Hallo,

    Ist hier die Klammerung richtig, fehlen hier etwa Anführungszeichen, oder
    was will der Mozilla?

    Die Script-Syntax ist schon ok, aber die Inline-Styles der DIVs haben die abschließenden "-Zeichen an den falschen Stellen und es fehlen auch Einheiten bei den Eigenschaften mit length-Wertzuweisungen (width, height, teilweise doppelt definiert?).

    BTW: Das Attribut type gehoert zum Script-Element und die IMGs sollten auch ihre alt-Attribute erhalten.
    Außerdem kann neben "Netscape" auch der IE ab 5 mit der verwendeten DOM-Methode umgehen. Ebenso trifft das auf Opera und Konqueror zu. Somit kann die Routine wesentlich kompakter ausfallen. Nur IE < 5 und Netscape 4.x brauchen ihr Fallback.

    Hast Du in den Zeilen mit den Array-Definitionen wirklich Zeilenumbrueche drin? Sieht jedenfalls beim Cut'n'Paste danach aus. Entferne diese ggf.

    Gib ansonsten mal eine Adresse mit dem kompletten Beispiel an, so ohne Bilder testet es sich schlecht, obwohl ich mir das natuerlich vorstellen kann ;-).

    MfG, Thomas

    1. Hallo,

      Ist hier die Klammerung richtig, fehlen hier etwa Anführungszeichen, oder
      was will der Mozilla?

      Die Script-Syntax ist schon ok, aber die Inline-Styles der DIVs haben die abschließenden "-Zeichen an den falschen Stellen und es fehlen auch Einheiten bei den Eigenschaften mit length-Wertzuweisungen (width, height, teilweise doppelt definiert?).

      BTW: Das Attribut type gehoert zum Script-Element und die IMGs sollten auch ihre alt-Attribute erhalten.
      Außerdem kann neben "Netscape" auch der IE ab 5 mit der verwendeten DOM-Methode umgehen. Ebenso trifft das auf Opera und Konqueror zu. Somit kann die Routine wesentlich kompakter ausfallen. Nur IE < 5 und Netscape 4.x brauchen ihr Fallback.

      Hast Du in den Zeilen mit den Array-Definitionen wirklich Zeilenumbrueche drin? Sieht jedenfalls beim Cut'n'Paste danach aus. Entferne diese ggf.

      Gib ansonsten mal eine Adresse mit dem kompletten Beispiel an, so ohne Bilder testet es sich schlecht, obwohl ich mir das natuerlich vorstellen kann ;-).

      MfG, Thomas

      Hallo Thomas,

      das mit den Anführungszeichen an den falschen Stellen hat historische Gründe.
      Eigentlich kann weg, was dahintersteht, nur für den Fall, daß ich es einmal ändern will,
      steht es noch da.
      Die Pixelangaben fehlen: Probiere ich sofort aus.
      Die Zeilenumbrüche macht der Mozilla-Editor leider automatisch rein. Aus
      Faulheit benutze ich ihn leider manchmal. kann zu bösen Überraschungen
      führen - sonst nehme ich lieber den First Page - ist auch schön bunt.
      Die Adresse lautet für die ganze Seite:
      http://www.8ung.at/krysl/undex.html   bzw. für den Frame
      http://www.8ung.at/krysl/lay2b.html. Die Version mit Drag und Drop unter
      http://www.8ung.at/krysl/index.html ist noch nicht DOM-kompatibel, kommt aber
      bald.

      Danke, daß Du Dir das mal angeguckt hast,
      Roland

      1. Hallo,

        das mit den Anführungszeichen an den falschen Stellen hat historische Gründe.
        Eigentlich kann weg, was dahintersteht, nur für den Fall, daß ich es einmal ändern will,
        steht es noch da.

        Das ist aber einfach falsch und diese etlichen DIVs machen allein schon deshalb nicht das Gewuenschte mit.

        http://www.8ung.at/krysl/lay2b.html.

        Ich habe mal die "-Probleme korrigiert, aber da ist noch soviel redundantes Zeugs drin - das muss erst mal raus. Vorschlag: Lagere das komplette Script in den HEAD um und schau Dir die DIVs nochmals genau an. Ich bekomme nach der Grobkorrektur im IE wie im Mozilla eine hellblaue Flaeche und die kleinen Bilder sind darauf teilweise verdeckt oder ganz verschwunden. Bei einem hat auch mal der visible/hidden-Effekt im Mozilla geklappt.

        Am besten mal das Dokument auf das Wesentliche hin abspecken und dann wieder aufbauen.

        MfG, Thomas

        1. Hallo,

          das mit den Anführungszeichen an den falschen Stellen hat historische Gründe.
          Eigentlich kann weg, was dahintersteht, nur für den Fall, daß ich es einmal ändern will,
          steht es noch da.

          Das ist aber einfach falsch und diese etlichen DIVs machen allein schon deshalb nicht das Gewuenschte mit.

          http://www.8ung.at/krysl/lay2b.html.

          Ich habe mal die "-Probleme korrigiert, aber da ist noch soviel redundantes Zeugs drin - das muss erst mal raus. Vorschlag: Lagere das komplette Script in den HEAD um und schau Dir die DIVs nochmals genau an. Ich bekomme nach der Grobkorrektur im IE wie im Mozilla eine hellblaue Flaeche und die kleinen Bilder sind darauf teilweise verdeckt oder ganz verschwunden. Bei einem hat auch mal der visible/hidden-Effekt im Mozilla geklappt.

          Am besten mal das Dokument auf das Wesentliche hin abspecken und dann wieder aufbauen.

          MfG, Thomas

          Hallo Thomas,

          leider kann ich das Skript nicht wie gewohnt in den Head auslagern, weil das mit den wechselnden
          Z-indexes auf der eigentlichen Seite, www.8ung.at/krysl/indexxl.html nicht hinhauen wird.
          Kann ich für diese Seite, die ja nur eine Übergangslösung darstellt, natürlich erstmal machen.
          Aber wieso hellblau??? Sollte ein dunkles Rosa sein!!!

          Ferwundert Varbenblind:
          Roland

          1. Hallo,

            leider kann ich das Skript nicht wie gewohnt in den Head auslagern, weil das mit den wechselnden
            Z-indexes auf der eigentlichen Seite, www.8ung.at/krysl/indexxl.html nicht hinhauen wird.

            Das laesst sich anhand des Codes nicht konkret nachvollziehen.

            Kann ich für diese Seite, die ja nur eine Übergangslösung darstellt, natürlich erstmal machen.
            Aber wieso hellblau??? Sollte ein dunkles Rosa sein!!!

            Screenshots mit abgeschlossenen style-Inhalten, aber Deinen doppelten Definitionen:

            http://www.styleassistant.de/test/ie6.gif
            http://www.styleassistant.de/test/mz099.gif

            MfG, Thomas

            1. »» Hallo,

              leider kann ich das Skript nicht wie gewohnt in den Head auslagern, weil das mit den wechselnden
              Z-indexes auf der eigentlichen Seite, www.8ung.at/krysl/indexxl.html nicht hinhauen wird.

              Das laesst sich anhand des Codes nicht konkret nachvollziehen.

              Kann ich für diese Seite, die ja nur eine Übergangslösung darstellt, natürlich erstmal machen.
              Aber wieso hellblau??? Sollte ein dunkles Rosa sein!!!

              Screenshots mit abgeschlossenen style-Inhalten, aber Deinen doppelten Definitionen:

              http://www.styleassistant.de/test/ie6.gif
              http://www.styleassistant.de/test/mz099.gif

              MfG, Thomas

              Hallo,

              wahrscheinlich interpretiert er die 'versteckten' Angaben wegen der Zeilen-
              umbrüche mit. Deswegen blau. Kann ich löschen, wenn das das einzige
              Hindernis gewesen sein sollte, wäre ich Dir sehr dankbar!!
              Leider habe ich keinen anständigen Editor hier in der Uni, kann das also
              nicht ausprobieren.

              Den Sript zum Drag und Drop hat mir jemand zugeschickt, aber den muß ein
              Profi erstellt haben - er ist gegenüber dem, was Stefan Münz vorschlägt,
              die wesentlich sauberere Cross-Browser-Lösung. Ich beschäfteige mich erst seit
              drei Monaten mit Javascript, und das ist meine erste "Propgrammiersprache".(Ist
              es eine?). Leider ist er nicht DOM-fähig, aber mich hats gepackt, und ich
              versuche, eine Lösung selbst zu erstellen. Bis dahin halt die Notlösung mit
              Frames.

              Vielen Dank fürs erste, mal sehen, ob es an den Div-Definitionen lag.

              Roland