nicht angemeldet
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