Goofy: onMouseover auf absolut positionierte Bilder anwenden

Hi zusammen
hab ein kleines Problem. Ich hab mit css positionierte Bilder mit zugehörigem Text. Bei einem onMouseover soll jeweils ein bestimmter Text erscheinen. Beim IE klappt alles wunderprächtig, der Netscape4.x jedoch weigert sich ein onMouseover durchzuführen. Werden die Bilder nicht positioniert klappt alles wunderprächtig, sieht aber bescheiden aus. Hoffe jemand hat eine Lösung.
Besten Dank
By Goofy

Hier die aufs wesentlichste beschränkte Seite:

<HTML>
   <HEAD>
 <style type="text/css">
 <!--

#bild1{position:absolute;top:50px; left:300px; visibility:visible;width:200px;height:200px;}
 #bild2{position:absolute;top:0px; left:495px; visibility:visible;width:200px;height:200px;}
 #bild3{position:absolute;top:170px; left:95px; visibility:visible;width:200px;height:200px;}
 #bild4{position:absolute;top:280px; left:310px; visibility:visible;width:200px;height:200px;}
 #bild5{position:absolute;top:180px; left:490px; visibility:visible;width:200px;height:200px;}

#text1{position:absolute;top:50px; left:50px; visibility:hidden; width:200px;height:200px;}
 #text2{position:absolute;top:50px; left:50px; visibility:hidden; width:200px;height:200px;}
 #text3{position:absolute;top:50px; left:50px; visibility:hidden; width:200px;height:200px;}
 #text4{position:absolute;top:50px; left:50px; visibility:hidden; width:200px;height:200px;}
 #text5{position:absolute;top:50px; left:50px; visibility:hidden; width:200px;height:200px;}

-->
 </style>

<script language="JavaScript">
 <!--

var isDOM = document.getElementById?true:false;
 var isDomNN = document.layers?true:false;
 var isDomIE = document.all?true:false;

function text(nr)
 {

for (var i=1;i<6;i++)
     {
      if (isDOM)   document.getElementById("text"+i).style.visibility="hidden";
         if (isDomIE)          document.all["text"+i].style.visibility="hidden";
  if (isDomNN)     document.layers["text"+i].visibility="hidden";
     }
  if (isDOM)  document.getElementById("text"+(nr)).style.visibility="visible";
  if (isDomIE)   document.all["text"+(nr)].style.visibility="visible";
         if (isDomNN)   document.layers["text"+(nr)].visibility="visible";

}

//-->
 </script>

</HEAD>
   <BODY bgcolor="black" bgproperties="fixed" text="white" link="white" vlink="white" alink="white">

<div id="text1">bla1</div>
 <div id="text2">bla2</div>
 <div id="text3">bla3</div>
 <div id="text4">bla4</div>
 <div id="text5">bla5</div>

<div id="bild2"><img src="2.jpg" width=160 onMouseover="text(2)"></div>
 <div id="bild1"><img src="1.jpg" width=200 onMouseover="text(1)"></div>
 <div id="bild3"><img src="3.jpg" width=230 onMouseover="text(3)"></div>
 <div id="bild4"><img src="4.jpg" width=180 onMouseover="text(4)"></div>
 <div id="bild5"><img src="5.jpg" width=200 onMouseover="text(5)"></div>

</body>
</html>

  1. Hi,

    vesuch es mal mit z-index.

    Mehr fällt mir im Moment nicht ein. Ich bin gerade über ähnlichen Seiten, die funktionieren im IE einwandfrei, die NN-Browser wollen hingegen z-indize`s sehen.

    Viel Glück,

    James.

  2. Hi zusammen
    hab ein kleines Problem. Ich hab mit css positionierte Bilder mit zugehörigem Text. Bei einem onMouseover soll jeweils ein bestimmter Text erscheinen. Beim IE klappt alles wunderprächtig, der Netscape4.x jedoch weigert sich ein onMouseover durchzuführen. Werden die Bilder nicht positioniert klappt alles wunderprächtig, sieht aber bescheiden aus. Hoffe jemand hat eine Lösung.

    Netscape 4 hat zwei Probleme mit deinem Code:

    Erstens kennt er das onmouseover-Attribut im <img> nicht, das mußt du manuell per Javascript "einpflanzen". Und zweitens denke ich nicht, daß er so, wie du das jetzt willst, Layer anzeigt und versteckt.

    Hier die aufs wesentlichste beschränkte Seite:

    Das ist doch mal eine gute Sache: Nur das wesentliche drin, so solls sein. Ich bastel mal ein wenig:

    <HTML>
       <HEAD>
    <style type="text/css">
    <!--

    #bild1{position:absolute;top:50px; left:300px; visibility:visible;width:200px;height:200px;}
    #bild2{position:absolute;top:0px; left:495px; visibility:visible;width:200px;height:200px;}
    #bild3{position:absolute;top:170px; left:95px; visibility:visible;width:200px;height:200px;}
    #bild4{position:absolute;top:280px; left:310px; visibility:visible;width:200px;height:200px;}
    #bild5{position:absolute;top:180px; left:490px; visibility:visible;width:200px;height:200px;}

    #text1{position:absolute;top:50px; left:50px; visibility:hidden; width:200px;height:200px;}
    #text2{position:absolute;top:50px; left:50px; visibility:hidden; width:200px;height:200px;}
    #text3{position:absolute;top:50px; left:50px; visibility:hidden; width:200px;height:200px;}
    #text4{position:absolute;top:50px; left:50px; visibility:hidden; width:200px;height:200px;}
    #text5{position:absolute;top:50px; left:50px; visibility:hidden; width:200px;height:200px;}

    -->
    </style>

    <script language="JavaScript">
    <!--

    var isDOM = document.getElementById?true:false;
    var isDomNN = document.layers?true:false;
    var isDomIE = document.all?true:false;

    // Du solltest wissen, daß du bei IE 5+ und Opera auf diese Weise isDOM und isDomIE auf "true" hast. Die können nämlich beide sowohl getElementById als auch document.all (Opera nur im IE-Mode). Deswegen solltest du in deinen Funktionen lieber statt "if...if...if..." eine "if ...else if...else if..."-Kette einbauen.

    function text(nr)
    {

    for (var i=1;i<6;i++)
         {
          if (isDOM)   document.getElementById("text"+i).style.visibility="hidden";

    else if // (siehe oben)

    if (isDomIE)          document.all["text"+i].style.visibility="hidden";

    else if (siehe oben)

    if (isDomNN)     document.layers["text"+i].visibility="hidden";

    document.layers["text"+i].visibility="hide"; //Netscape 4 weicht da leider vom bekannten Standard ab!

    }
      if (isDOM)  document.getElementById("text"+(nr)).style.visibility="visible";

    else if // (siehe oben)

    if (isDomIE)   document.all["text"+(nr)].style.visibility="visible";

    else if // (siehe oben)

    if (isDomNN)   document.layers["text"+(nr)].visibility="visible";

    document.layers["text"+(nr)].visibility="show"; // Jaja, ich sagte ja schon... weicht ab!

    }

    //-->
    </script>

    </HEAD>
       <BODY bgcolor="black" bgproperties="fixed" text="white" link="white" vlink="white" alink="white">

    <div id="text1">bla1</div>
    <div id="text2">bla2</div>
    <div id="text3">bla3</div>
    <div id="text4">bla4</div>
    <div id="text5">bla5</div>

    <!-- Die Bilder müssen Namen erhalten, die Mouseover können aber weg -->
     <div id="bild2"><img src="2.jpg" width=160 name="pic1"></div>
     <div id="bild1"><img src="1.jpg" width=200 name="pic2"></div>
     <div id="bild3"><img src="3.jpg" width=230 name="pic3"></div>
     <div id="bild4"><img src="4.jpg" width=180 name="pic4"></div>
     <div id="bild5"><img src="5.jpg" width=200 name="pic5></div>
    <script>
    <!--
    // Und jetzt noch ein paar Eventhandler einpflanzen:

    // Sorry, scheint so, als müßte man das für jedes Bild einzeln definieren.

    // Eventhandler (mouseover und mouseout) installieren:
    if (isDomNN)
    {
    document.layers['bild1'].document.pic1.onmouseover = handle_mouseover1;
    document.layers['bild2'].document.pic2.onmouseover = handle_mouseover2;
    document.layers['bild3'].document.pic3.onmouseover = handle_mouseover3;
    document.layers['bild4'].document.pic4.onmouseover = handle_mouseover4;
    document.layers['bild5'].document.pic5.onmouseover = handle_mouseover5;
    }
    else
    {
    document.pic1.onmouseover = handle_mouseover1;
    document.pic2.onmouseover = handle_mouseover2;
    document.pic3.onmouseover = handle_mouseover3;
    document.pic4.onmouseover = handle_mouseover4;
    document.pic5.onmouseover = handle_mouseover5;
    }
    function handle_mouseover1() { text(1); }
    function handle_mouseover2() { text(2); }
    function handle_mouseover3() { text(3); }
    function handle_mouseover4() { text(4); }
    function handle_mouseover5() { text(5); }
    //-->
    </script>

    </body>
    </html>

    Ungetestet. Netscape 4 könnte eventuell mit den Bilder innerhalb von Layern noch Ärger machen (ohne Layer würde die If-Abfrage ganz unten entfallen und alle Browser würden gleich behandelt).

    Jetzt mußt du nur noch deine Kommentarzeichen aus dem Code rausfummeln... Aber ich habe sie zur besseren Sichtbarmachung meiner Änderungen dringelassen.

    - Sven Rautenberg

    1. Vielen Dank erstmal für deine ausführliche Antwort. Ich kriegs trotzdem nicht zum Laufen. Nicht mal mehr im IE. Ohne Eventhandler klappt das wohl nicht so toll. Egal die Nachwelt wirds verkraften, wenn sie das nicht auf meiner HP sehen können.

      Muß es vielleicht: document.pic1.onmouseover = handle_mouseover1(); heißen ??? (Man blicke auf die Klammern und verzeihe meine Unwissenheit)

      Bis zur nächsten Frage
      Ciao Goofy