tolonath: .hover und OnMouseOver

Beitrag lesen

Im JavaScript sucht man sich die Liste (entweder über ihre ID – einmalig, in Variable speichern – oder per this.parentNode) und geht in dieser alle Kinder durch (egal, wieviele es nun gerade sind).

Darauf würde ich gerne noch eingehen, aber im mom zu viel Input für heute *g*

Aber wie schon erwähnt, kann man sich das auch sparen.

also ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Felder des Grauens</title>  
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >  
  
<style type="text/css">  
#feld1 {  
width: 200px; height: 200px;  
position:absolute; top:100px; left:100px;  
background-color: red;  
}  
#feld2 {  
width: 200px; height: 200px;  
position:absolute; top:200px; left:200px;  
background-color: green;  
}  
#feld3 {  
width: 200px; height: 200px;  
position:absolute; top:100px; left:200px;  
background-color: blue;  
}  
</style>  
  
<script type="text/javascript">  
zmerker = 0;  
function anheben (element) {  
      if (zmerker != 0) {  
        zmerker.style.zIndex = 1;  
        }  
      zmerker = element;  
      element.style.zIndex = 2;  
}  
</script>  
  
</head>  
<body>  
<div id="feld1" onmouseover="anheben(this)"></div>  
<div id="feld2" onmouseover="anheben(this)"></div>  
<div id="feld3" onmouseover="anheben(this)"></div>  
</body>  
</html>

Das JS hat jedoch einen Nachteil, der Natürlich je nach Bedarf auch gewollt sein kann.
Geht man von feld1(rot) zu feld3(blau) springt das feld1(rot) hinter das feld2(grün).
Daher dann die 2te JS mit der das vorige div in der Ebene bleibt
aus der es verlassen wurde.

<script type="text/javascript">  
  
feld = 0;  
function anheben (element) {  
     feld++;  
     element.style.zIndex = feld;  
}  
</script>

Dabei wird der z-index natürlich ins Endlose angehoben.
Unten ein Script bei dem es nicht mehr angehoben wird.
Ist das untere nicht zu kompliziert? ö.ö

<script type="text/javascript">  
zelement = 0;  
zmerker = Array (0);  
function anheben (element)  
{  
      if (zmerker[zmerker.length] != element && zmerker.length == 0 ) {  
          zmerker[0] = element;  
          element.style.zIndex = zmerker.length +1;  
      }  
      if (zmerker[zmerker.length] != element && zmerker.length != 0 ) {  
        for (var i=0; i<zmerker.length; i++) {  
          if (zmerker[i] == element) {  
            zelement = i; break;  
          } else { zelement = zmerker.length; }  
        }  
        for (var s=zelement; s<zmerker.length; ++s) {  
          if (typeof zmerker[s+1] != "undefined") {  
           zmerker[s] = zmerker[s+1];  
           var platz = zmerker[s];  
           platz.style.zIndex = s+1;  
          }  
        }  
        if (zelement == zmerker.length) {  
          zmerker[zmerker.length] = element;  
          element.style.zIndex = zmerker.length+1;  
        } else { zmerker[zmerker.length-1] = element;  
                 element.style.zIndex = zmerker.length;  
               }  
      }  
}  
</script>