nicht angemeldet
getElementById wird nicht unterstützt. HELP!
Habe auf einer Seite 2 Bilder so plaziert, dass sie sich überlappen. Bei OnMouseOver soll das hintere Bild in den Vordergrund rücken. Mein Source-Code sieht nun wie folgt aus:
<!--
<html>
<head>
<title></title>
<SCRIPT language="JavaScript">
function layerUp(name){
document.all.getElementById(name).style.zIndex += 2;
}
function layerDown(name){
document.all.getElementById(name).style.zIndex -= 2;
}
</SCRIPT>
</head>
<STYLE type="text/css">
#divBild1{position:absolute;top:0; left:10;z-index:2}
#divBild2{position:absolute;top:0; left:120;z-index:1}
</STYLE>
<body>
<div id="divBild1"><img src="images/bild1.gif" border="0" ></div>
<div id="divBild2">
<img src="images/bild2.gif" border="0"
OnMouseOver="layerUp('divBild2')"
OnMouseOut="layerDown('divBild2')">
</div>
</body>
</html>
-->
Problem an der Sache ist, dass mein Browser (IE6) mir immer die Fehlermeldung gibt: "Das Objekt unterstützt die Eigenschaft oder Methode nicht". Über die Methode setAttribute habe ich das ans laufen bekommen, aber mir ist wichtig das ich die STYLE-Id in die Funktion übergeben kann, damit ich nicht für 50 Bilder 50 Funktionen schreiben muss. Und die Möglichgeit sehe ich nur mit getElementById.
Vielleicht weiss irgendjemand, wo der Fehler liegt oder wie mans besser machen kann. Danke schonmal !
Mfg BullFrog
-
hi,
Du bist prinzipiell bereits auf dem richtigen Weg. Verkehrt ist noch das hier:
document.all.getElementById(name).style.zIndex += 2;
Das "all" gehört da nicht hinein. "getElementById" ist eine Methode von "document", und "all" ist ein Unterobjekt, ebenfalls von "documnent", das du aber nicht brauchst, wenn du DOM-Fähigkeiten ansprichst. Siehe http://selfhtml.teamone.de/javascript/objekte/document.htm#get_element_by_id
Grüße aus Berlin
Christoph S.
-
Ahhhh danke, stimmt so funktionierts natürlich besser. :)
Allerdings habe ich jetzt noch ein Problem. Sind zIndex von JavaScript und z-Index von CSS exakt das gleiche? Weil wenn ich mir den zIndex von Bild2 einfach mal mit "alert" ausgeben lasse, ist dieser immer null, obwohl ich doch mit CSS auf 1 vordefiniert habe. Oder muss ich alle Styles einfach über eine kleine init-Funktion per JavaScript vordefienieren ?
-
hi,
Ahhhh danke, stimmt so funktionierts natürlich besser. :)
Nö, nicht "besser", sondern "überhaupt erst richtig".
Sind zIndex von JavaScript und z-Index von CSS exakt das gleiche?
z-index hat mit Javascript nichts zu tun, das ist CSS.
Weil wenn ich mir den zIndex von Bild2 einfach mal mit "alert" ausgeben lasse, ist dieser immer null, obwohl ich doch mit CSS auf 1 vordefiniert habe.
Mit deinen (Javascript-)Funktionen veränderst du die z-Indizes dynamisch. Das ist übrigens gar nicht nötig, aber du hast es dir selber so geschrieben.
Christoph S.
-
Mit deinen (Javascript-)Funktionen veränderst du die z-Indizes dynamisch. Das ist übrigens gar nicht nötig, aber du hast es dir selber so geschrieben.
Wie würdest du es denn machen. Bin immer für Kritik bereit.
mfg BullFrog
-
Hallo,
Mit deinen (Javascript-)Funktionen veränderst du die z-Indizes dynamisch. Das ist übrigens gar nicht nötig, aber du hast es dir selber so geschrieben.
bei JavaScript gibt es noch getAttribut und setAttribute, damit dürfte es
besser klappen, wobei einige Browser aber trotzdem Probleme haben die per
CSS gesetzten Werte abzufragen, u.U. wäre für den IE ein Inlinestyle dafür
besser (trotzdem ist der Inlinestyle m.E. nicht zu empfehlen):document.getElementById().style.setAttribute('zIndex',.......)
Wie würdest du es denn machen. Bin immer für Kritik bereit.
Ich vermute mal CSS, :hover usw..
Grüsse
Cyx23
-
Hallo,
u.U. wäre für den IE ein Inlinestyle dafür
besser (trotzdem ist der Inlinestyle m.E. nicht zu empfehlen):document.getElementById().style.setAttribute('zIndex',.......)
Das ist - wie von Dir erwaehnt - nur im IE so implementiert.
IE, Mozilla und Opera 7 kennen noch die Eigenschaft cssText, die den Inline-Style-String enthaelt (lesend und schreibend zugreifbar). Opera 7 weist einen neuen String zwar zu, wendet diesen aber nicht an:
Z. B.:
document.getElementById("abc").style.cssText="color: #FFC; background-color: #00C; z-index: 3";MfG, Thomas
-
-
-
-
-
-
Hallo,
<script type="text/javascript">
function layerUp(name){
document.getElementById(name).style.zIndex += 2;
}
function layerDown(name){
document.getElementById(name).style.zIndex -= 2;
}
</SCRIPT></head>
<STYLE type="text/css">
#divBild1{position:absolute;top:0; left:10px;z-index:2}
#divBild2{position:absolute;top:0; left:120px;z-index:1}</STYLE>
<body>
<div id="divBild1"><img src="images/bild1.gif" border="0" ></div>
<div id="divBild2">
<img src="images/bild2.gif" border="0"
OnMouseOver="layerUp('divBild2')"
OnMouseOut="layerDown('divBild2')">
</div></body>
</html>Entweder du benutzt 'document.all' (das alte I4-Modell) oder 'document.getElementById' (empfehlenswert). 'document.all.getElementById'gibt es nicht.
Gruß, Jan