[XBrowserLayer]





Dieses simple Beispiel beschreibt den browserübergreifenden Zugriff auf (Layer-) Objekte.
Bekanntlich verwenden die verschiedenen Browserhersteller hierfür unterschiedliche Modelle.
Während Netscape bis und mit Version 4 das das "layer"- Objekt unterstützte, setzt der IE auf das "all" Objekt und unterstützt seit Version 5 auch das DOM (document object model), welches auch von Netscape6+ und allen Gecko- Derivaten unterstützt wird.

In diesem beispiel wird bei MouseOver auf eine Grafik eine andere Grafik sichtbar und bei MouseOut wieder unsichtbar geschaltet. Die Positionierung der Grafiken erfolgt mittels CSS.

Rot gekennzeichnete Abschnitte können von Ihnen verändert werden. Bei den grün gekennzeichneten Abschnitten handelt es sich um Anmerkungen, die NICHT Bestandteil des Scripts sind.

[zwischen <HEAD> und </HEAD>]

<script language="JavaScript">
<!--
//Browser Sniffer
var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;
var mozup = (!document.all && document.getElementById) ? 1 : 0;
if (ns4up) {
document.writeln('<Style type="text/css">');
document.writeln("#ebene1 { position:absolute; left:200px; top:320px; width:420px; height:59px; z-index:1}");
document.writeln("#ebene2 { position:absolute; left:200px; top:14px; width:420px; height:59px; z-index:2; visibility:hide}");
document.writeln("</Style>");
} else {
document.writeln('<Style type="text/css">');
document.writeln("#ebene1 { position:absolute; left:200px; top:320px; width:420px; height:59px; z-index:1}");
document.writeln("#ebene2 { position:absolute; left:200px; top:14px; width:420px; height:59px; z-index:2; visibility:hidden}");
document.writeln("</Style>");
}
// -->
</script>


Die Grafik, die beim Mouseover angezeigt werden soll, ist vorerst unsichtbar geschaltet. Die verschiedenen Anzeige-Ebenen werden hier mit Z-Index bestimmt. Da Netscape4 bei visibilty das Attribut hide oder show und IE/Gecko das Attribut hidden oder visible verwenden, werden die Style-Sheets unterschiedlich definiert. Netscape4 scheint auch bei Style-Definitionen innerhalb des DIV- Tags Mühe zu bekunden, deshalb wurden sie in den Head-Bereich der Seite verlegt.

[zwischen <BODY> und </BODY>]

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

//Browser Sniffer
var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;
var mozup = (!document.all && document.getElementById) ? 1 : 0;

function weg1 (){
if(ie4up || ns4up || mozup){
if(ns4up)
document.ebene2.visibility="show"
if (ie4up)
ebene2.style.visibility="visible"
if (mozup)
document.getElementById("ebene2").style.visibility="visible"
}
}

function weg2 (){
if(ie4up || ns4up || mozup){
if(ns4up)
document.ebene2.visibility="hide"
if (ie4up)
ebene2.style.visibility="hidden"
if (mozup)
document.getElementById("ebene2").style.visibility="hidden"
}
}

//-->
</script>

<SCRIPT LANGUAGE="JavaScript">
<!--
if(ie4up || ns4up || mozup){
if(ns4up)
document.write('<div id="ebene1"><a href="javascript://" onmouseover="weg1()" onmouseout="weg2()"><img src="../../bilder/nf_7.gif" width="300" height="47" border="0"></a></div><div id="ebene2"><img src="../../bilder/nf_7.gif" width="300" height="47" border="0"></div>')
else
document.write('<div id="ebene1" onmouseover="weg1()" onmouseout="weg2()"><img src="../../bilder/nf_7.gif" width="420" height="59"></div><div id="ebene2"><img src="../../bilder/nf_7.gif" width="420" height="59"></div>')
}
//-->
</SCRIPT>

[Autor]

N8i (www.nightfire.ch)

[Download]

kopieren Sie bitte den Quellcode

Copyright © 1998- Nightfire Webworker Archiv Script No: 0346