Christoph Schnauß: Layer in IE und Netscape

hallo,

ab und an hat es hier im Forum schon Nachfragen zu Layern gegeben, und es ist von Stefan darauf hingewiesen worden, daß das <layer>-Tag künftig nicht mehr verwendet werden sollte. Wie kann man nun Seiten, die bestimmte Funktionen, wie sie bisher nur von Layern vermittelt werden, "zukunftssicher" machen?

Außerdem geht es mir mal wieder um die unterscheidliche Interpretation in den Browsern (Netscape/IE).
Ich habe folgendes script, das in beiden Browsern tadellos funktioniert, sich aber leider nicht für unterschiedliche Hintergrundbilder oder -farben erweitern läßt:
________________________

<html>
<link rel="stylesheet" type="text/css" href="allgemein.css">
<head>
<title>Layer</title>

<script language="JavaScript">
<!--
if (document.layers)  {
     ns = 1; ie = 0;
} else {
     ns = 0; ie = 1;
     }
  
var i = 1;
var schicht = "layer";
function zeigeEbeneNr(ebene_nr){
    verbergen(eval('"' + schicht + i +'"'));
    zeigen(eval('"' + schicht + ebene_nr +'"'));
    i = ebene_nr;
    }

function zeigen(name) {
if (ns) {
    document.layers[''+name].visibility = "show";  
    }
    else {
    document.all[''+name].style.visibility = "visible"
    }
}

function verbergen(name) {
if (ns){
    document.layers[''+name].visibility = "hide"
    }
    else {
    document.all[''+name].style.visibility = "hidden"
    }
}

//-->
</script>

<style type="text/css">
#layer1 {position: absolute; visibility: visible; left: 20px; width: 600 px; top: 20px;}
#layer2 {position: absolute; visibility: hidden; left: 20px; width: 600 px; top: 20px;}
#layer3 {position: absolute; visibility: hidden; left: 20px; width: 600 px; top: 20px;}
#menu {position: absolute; z-index: 50; visibility: visible; left: 650px; top: 20px; width: 120px}
</style>

</head>

<body bgcolor="#000000" TEXT="#FFFFFF" link="#B0B0FF" vlink="#0000FF" alink="#FFFFFF">

<div ID="layer1">
<p>Das hier verwendete script demonstriert die Verwendung von Layern.</p>
</div>

<div ID="layer2">
<p>Layer sind verschiedene "Schichten" in ein und demselben HTML-Dokument.</p>
</div>

<div ID="layer3">
<p>Es lassen sich mit JavaScript (nahezu) beliebig viele solcher Schichten definieren.</p>
</div>

<div ID="menu">
<a HREF="javascript:zeigeEbeneNr(1)"><p>Ebene 1</a></p>
<a HREF="javascript:zeigeEbeneNr(2)"><p>Ebene 2</a></p>
<a HREF="javascript:zeigeEbeneNr(3)"><p>Ebene 3</a></p>
</div>

</body>
</html>
__________________________

Kann mir jemand sagen, wie ich nun meinen verschiedenen Layern verschiedene Hintergrundfarben bzw. -bilder mitgeben kann ? Ich habe alles mögliche bereits probiert ... Nur ein Beispiel: wenn ich bei <div id="layer1"> noch anfüge <layer bgcolor=800000> hat das im IE 5.0 überhaupt keinen Effekt, während Netscape die neue Farbe zeigt. Wenn ich mit "background" und "img src" eine Hintergrundgrafik einbinden will, macht das Netscape auch wieder korrekt, aber der IE interpretiert das nicht als "Hintergrund", sondern als eingefügtes Element.

Wie kriege ich das nun hin mit verschiedenen Hintergründen, so daß es auch im IE funktioniert ? Mit Verlaub: ob es in Netscape funzt, interessiert mich nämlich nur am Rand

ähm - wahrscheinlich gehöre ich in diesem Forum zur absoluten Minderheit, weil ich fast ausschließlich den IE benutze ...

schönsten Dank im voraus

Christoph S.

  1. Hallo!

    Kann mir jemand sagen, wie ich nun meinen verschiedenen Layern verschiedene Hintergrundfarben bzw. -bilder mitgeben kann ?

    #layer1 {
    position:absolute;
    visibility:visible;
    left:20px;
    width:600px;
    top:20px;
    background-image:url(dein_blid.gif);
    background-color:#000000;
    layer-background-color:#000000; /*das ist für NS */
    }

    oder einfacher:
    background:url(dein_bild.gif) #000000;

    Grüße
    Thomas

    PS1: sowas wie >600 px;< solltest du vermeiden also immer zusammenschreiben: 600px;
    PS2: wenn du eh nur auch dem IE "stehst":
    http://www.teamone.de/selfaktuell/self_forum/38542.html geht auch mit div's

    1. danke  -  scheint zu funktionieren :-)

      Christoph S.