Dumme Layer-Frage

O

Ossi

Erfahrenes Mitglied
Da ich mich mit Layern nicht auskenne, hier mein Problem:

Ich möchte 2 Layer:
Layer 1: Normalansicht
Layer 2: Codeansicht

Beide Layer sollen 650 x 800 Pixel groß sein und links oben beginnen (0,0), d.h. sie liegen genau übereinander.
Am Fuß beider Layer sollen 2 Schalter sein, die es ermöglichen, hin- und herzuschalten, d.h jeweils den anderen Layer auszublenden. Auf Layer 1 kommen Icons und ein div, auf Layer 2 eine Textarea. Die Voreinstellung beim Start (onLoad) soll Layer 1 visible sein.
Habe es schon mit Dreamweaver versucht, komme aber zu keinem Ergebnis.
 
Is eigentlichn recht einfach:
Es gibt eine CSS-Eigenaschaft, mit der Man das Anzigen des Elementes an, oder ausschalten kann: display.
Für an setzt du bei einem normalen Layer (div) den Wert block, und für aus den Wert none

Das dann halt per JavaScript toggeln. Such dazu mal hier im FOrum, hatten wir letztens im HTML Forum unter Layer toggeln odda so.

Weitere Infos: SelfHTML
 
Hi,

bitteschön :)

PHP: 
<html>
<head>
<title>Layertest</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.layer1 , .layer2{
	background-color: #CCCCCC;
	height: 400px;
	width: 400px;
	border: 1px solid;
	position: absolute;
	margin:0px;
}
.switch{
	background-color: #fefefe;
	height: 30px;
	width: 200px;
	border: 1px solid;
	position: absolute;
	margin-top:405px;
}
-->
</style>
</head>

<body onload="document.getElementById('layer2').style.visibility = 'hidden';">

<div class="layer1" id="layer1">Layer 1</div>
<div class="layer2" id="layer2">Layer 2</div>

<div class="switch" id="switch">
	<span onClick="document.getElementById('layer2').style.visibility = 'hidden'; document.getElementById('layer1').style.visibility = 'visible';">Layer1</span> |
	<span onClick="document.getElementById('layer1').style.visibility = 'hidden'; document.getElementById('layer2').style.visibility = 'visible';">Layer2</span>
</div>
</body>
</html>

ciao
 

Anhänge

  • layer.txt
    1.010 Bytes · Aufrufe: 35
Mit der Visibility Eigenschaft gehts bei Absolut positioniertwen Layern natürlich auch.
 
Danke, crono, werde euch alle lobend im Impressum meines Editors erwähnen.

Ich hatte zwischendurch mal das gefunden und probiert, irgendwie klappt die Übergabe onLoad aber nicht:

<html>
<head>
<title>Layer</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript1.2">
function toggleVisibility(id, NNtype, IEtype, WC3type) {
if (document.getElementById) {
eval("document.getElementById(id).style.visibility = \"" + WC3type + "\"");
} else {
if (document.layers) {
document.layers[id].visibility = NNtype;
} else {
if (document.all) {
eval("document.all." + id + ".style.visibility = \"" + IEtype + "\"");
}
}
}
}
function lade(id, NNtype, IEtype, WC3type)
{
toggleVisibility('WYSIWYG','show','visible','visible');
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" onLoad="lade()">
<div id="WYSIWYG" style="position:absolute; width:650px; height:650px; z-index:1; left: 0px; top: 0px">Layer 1</div>
<div id="HTML" style="position:absolute; width:650px; height:650px; z-index:2; left: 0px; top: 0px">Layer 2</div>
<button title="Layer 1" onclick="toggleVisibility('WYSIWYG','show','visible','visible')">Zeige Layer 1</button>
<button title="Layer 2" onclick="toggleVisibility('HTML','show','visible','visible')">Zeige Layer 2</button>
</body>
</html>
 
Wies nicht obs daran liegt, abba du übergibst ja keine Parameter, welche eigenltich erforderlich wären: function lade(id, NNtype, IEtype, WC3type).

Desweiteren: Es macht keinen Sinn das in den onLoad-Handlers des Bodys reinzumachen. Es ist doch viel besser, das gleich in das style-Attribut der Divs reinzumachen.

Was überhaupt alles so kompliziert? Mach doch gleich alles per getEmelementById. Und wieso alles mit eval?
 
Na ja, der Script war ja auch geklaut. Cronos Variante ist einfacher, nur ich muß onClick noch um die Funktion onclick='source.value=divEditable.innerHTML;source.focus();' erweitern, so daß der Layer gewechselt und die Funktion ausgeführt wird. Kann man das irgendwie verbinden??
 
Hoffentlich verstehe ich das richtig ;)
Probier mal:
PHP: 
<span onClick="document.getElementById('layer2').style.visibility = 'hidden'; document.getElementById('layer1').style.visibility = 'visible'; source.value=divEditable.innerHTML;source.focus();">Layer1</span>

aber komplett ohne Garantie...


ciao

//edit: ich hab hier mal angenommen, das der Source auf dem layer1 eingeblendet werden soll...
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück