Titelbild
Username: Passwort:   Bei jedem Besuch automatisch einloggen
  registrieren  Passwort vergessen?
Softwaretipps zurück zur Übersicht!
1&1 DSL

CSS Layer mit Javascript manipulieren

vorne
hinten

Der oben gezeigte Effekt lässt sich relativ leicht realisieren. Zunächst erzeugen wir zwei Bereiche (divs) und vergeben die IDs layer1 und layer2.

<div id="layer1" onMouseOver="javascript:layer1TOfront();">vorne</div>
<div id="layer2" onMouseOver="javascript:layer2TOfront();">hinten</div>

Wie man sieht, erzielen wir den gewünschten Effekt mit onMouseOver in den divs. Fährt man mit dem Mauszeiger über einen Bereich wird die Funktion layer1Tofront() bzw. layer2Tofront() aufgerufen, die wie folgt implementiert sind (hier am Bsp. layer1TOfront(); layer2TOfront() ist analog aufgebaut).

function layer1TOfront(){
  document.getElementById('layer1').style.zIndex = 2;
  document.getElementById('layer2').style.zIndex = 1;
  document.getElementById('layer1').innerHTML = "vorne";
  document.getElementById('layer2').innerHTML = "hinten";
}

Wir greifen über die ID auf den entsprechenden Bereich zu und verändern dort den Wert der CSS-Eigenschaft z-index, der für die Überlagerung der Bereiche sorgt. Beim Vergleich dieser Werte überlagert der größere den kleineren Wert. Zur Verdeutlichung ersetzten wir innerhalb dieser Methode auch noch den Text innerhalb des Bereichs.
Zuletzt wollen wir uns noch kurz anschauen, wie die beiden divs gestyled sind.

#layer1, #layer2{
  border:4px outset black;
  padding:10px;
  position:relative; 
  width:150px; 
  height:150px; 
  line-height:25px; 
  font-size:20px; 
}

#layer1{
  background-color:blue; 
  z-index:2;
  color:red;
}

#layer2{
  background-color:red; 
  top:-75px; 
  left:100px; 
  color:blue;
  text-align:right;
  z-index:1;
}

Die Eigenschaften top und left sorgen hierbei für die Verschiebung des zweiten Bereichs um die angegebenen Werte in Bezug auf das übergeordnete Element (position:relative).

zurück zur Übersicht!

letzte Änderung: 08.01.2010
© 2007-2017 Daniel Pasqua
kontakt inhalt info