Jörg Wallraf: Layer z-index tauschen geht nicht!

Hallo zusammen,

ich habe mir bereits den wolf in diversen foren gesucht und auch google lässt mich letzendlich verzweifeln. ich möchte auf einer seite 2 bilder in jeweils einem eigenen layer darstellen. beide überlagern sich. der, über den man mit der maus fährt soll dann per z-index in den vordergrund geholt werden. dazu folgend mein html-code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Presseberichte</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
@import url("body.css");
@import url("gwm.css");
-->
</style>

<script type="text/javascript">
function onoff () {
  if (document.getElementById)
    document.getElementById("Layer1").style.visibility = "hidden";
}
function offon () {
  if (document.getElementById)
    document.getElementById("Layer1").style.visibility = "visible";
}
</script>
</head>

<p><br>
<div id="Layer1" style="position:absolute; width:281px; height:205px; z-index:1; left: 104px; top: 124px; visibility: visible;"><a onmouseover="onoff()" onmouseout="offon()" id="Layer1" href="http://www.wdr.de/studio/aachen/lokalzeit/serien/dorf/bergstein.jhtml" target="_blank"><img src="wdr.jpg" width="500" height="350" border="0"></a></div>
<div id="Layer2" style="position:absolute; width:364px; height:264px; z-index:2; left: 148px; top: 173px; visibility: visible;"><a href="http://www.rurweb.de/veranstalter/homepage.html?idveranstalter=2168" target="_blank"><img src="rurweb.jpg" width="500" height="350" border="0"></a></div>

</body>
</html>

okay okay, die funktion ist doof, sie dient auch nur der anschauung. fahre ich mit der maus also über den Layer1 verschwindet er kurz. die funktion ansich geht also. jetzt möchte ich das gleiche mit

document.getElementById("Layer1").style.z-index:3;

machen und siehe da, geht nicht! kann mir jemand sagen was ich falsch mache und warum es so ziemlich mit allen properties vom style funktioniert nur mit dem z-index nicht?! bitte vollständigen code posten. danke

gruß
jörg

  1. Hi,

    document.getElementById("Layer1").style.z-index:3;

    Du versuchst, index von document.getElementById("Layer1").style.z zu subtrahieren.

    Bei CSS-Eigenschaftsnamen, die - enthalten, muß für Javascript das - weggelassen und der folgende Buchstabe großgeschrieben werden.
    Aus z-index muß also zIndex werden.

    Außerdem muß in Javascript ein Wert zugewiesen werden (mit =), nicht wie in CSS mit : getrennt angegeben werden.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. Hi Andreas,

      du bist mein Held. Ich hab mir echt den Wolf gesucht aber es scheint als wenn das viele falsch machen?! Sollt ich wohl öfter auf Ostereierseiten den Webmaster fragen! Tausend Dank nochmal. Es klappt. Wenn es mal richtig fertig ist send ich dir mal den Link zum gucken.
      Btw die Geschichte mit den Ostereiern find ich interessant. Meine Mum macht Deko und sowas. Werd ich mir die Tage nochmal angucken.

      Thanx Alot *verbeug*
      Jörg

      Hi,

      document.getElementById("Layer1").style.z-index:3;

      Du versuchst, index von document.getElementById("Layer1").style.z zu subtrahieren.

      Bei CSS-Eigenschaftsnamen, die - enthalten, muß für Javascript das - weggelassen und der folgende Buchstabe großgeschrieben werden.
      Aus z-index muß also zIndex werden.

      Außerdem muß in Javascript ein Wert zugewiesen werden (mit =), nicht wie in CSS mit : getrennt angegeben werden.

      cu,
      Andreas