nicht angemeldet
Schichtposition dynamisch tauschen
Hi,
kann mir jemand sagen warum das nicht kunktioniert???
function vor() {
document.getElementById("bot").style.zIndex = 100;
}
oder
function vor() {
document.all.bot.style.zIndex = 100;
}
<div id="bot" style="position:relative; z-index:1;"><a href="#" onmouseover="vor('bot');"><img border="0" src="images/start/wechsel1.jpg"></a></div>
Danke
Gruß
Andi
-
Hi,
kann mir jemand sagen warum das nicht kunktioniert???
nein, da Du nicht sagst, was "funktioniert nicht" bedeutet.
function vor() {
document.all.bot.style.zIndex = 100;
}Entwickelst Du speziell für den IE 4?
<img border="0" src="images/start/wechsel1.jpg">
ERROR: Required attribute "alt" missing.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes -
Hi
kann mir jemand sagen warum das nicht kunktioniert???
function vor() {
document.getElementById("bot").style.zIndex = 100;
}Ja, du mußt den z-Index als String übergeben:
function vor() {
document.getElementById("bot").style.zIndex ='100';
}gruß
peter-
Ich hab jetzt die Function mit einem alert ausgestattet...
function vor() {
document.getElementById("bot").style.zIndex = '100';
alert(document.getElementById("bot").style.zIndex);
}.. der zeigt mir, dass der zIndex zwar auf 100 gesetzt ist, aber im Browser ändert sich nichts. Das Bild1 bleibt einfach hinter Bild2 mit dem z-index=2.
-
hi,
haste position:absolute oder relative drin?
zeigma quelltext.
gruß
peter-
hi,
haste position:absolute oder relative drin?
zeigma quelltext.
gruß
peterposition:relative; z-index:1;
-
hi,
haste position:absolute oder relative drin?
zeigma quelltext.
gruß
peterposition:relative; z-index:1;
wennde net mehr rausrückst, kann man dir auch nicht helfen.
gruß
peter-
Ich will nur ein Bild in den Vordergrund bringen.
Andere Browser ist jetzt erst mal egal.
Hier nun das komplette Script.<html>
<head><title></title>
<script language="JavaScript">
function tauschen() {
document.all.bot.style.zIndex = "10";
}
</script></head>
<body><div id="bot" style="position:relative; top:100; left:0;"><a href="#" onmouseover="tauschen();"><img border="0" src="images/start/wechsel1.jpg" width="180" height="135"></a></div>
<div id="wasserf" style="position:relative; top:-135; left:130;"><img border="0" src="images/start/wechsel2.jpg" width="135" height="180"></div>
<div id="berge" style="position:relative; top:-200; left:203;"><img border="0" src="images/start/wechsel3.jpg" width="135" height="180"></div><script language="JavaScript">
document.all.bot.style.zIndex = "1";
document.all.wasserf.style.zIndex = "2";
document.all.berge.style.zIndex = "3";
</script></body>
</html>-
Hi,
denke mal, das liegt an position:relative.
Probiers mal mit position:absolute aus.
gruß
peter -
Hi,
hab das nochmal in Netscape und Internet Explorer ausprobiert.
im NS isses ok, im IE funktionierts nicht.erstmal zu deinem Code:
<html>
<head><title></title>
<script language="JavaScript">
sollte lauten:
<script type="text/javascript">function tauschen() {
document.all.bot.style.zIndex = "10";
}document.all is nur IE.
</script>
</head>
<body><div id="bot" style="position:relative; top:100; left:0;"><a href="#" onmouseover="tauschen();"><img border="0" src="images/start/wechsel1.jpg" width="180" height="135"></a></div>
Das <div> und <a> brauchst du hier garnicht.
Das kann man auch direkt dem image zuweisen:<img border="0" src="images/start/wechsel1.jpg" width="180" height="135" alt="" style="position:relative; top:100; left:0; z-index:1;" onmouseover="tauschen();">
<div id="wasserf" style="position:relative; top:-135; left:130;"><img border="0" src="images/start/wechsel2.jpg" width="135" height="180"></div>
<div id="berge" style="position:relative; top:-200; left:203;"><img border="0" src="images/start/wechsel3.jpg" width="135" height="180"></div><script language="JavaScript">
document.all.bot.style.zIndex = "1";
document.all.wasserf.style.zIndex = "2";
document.all.berge.style.zIndex = "3";
</script>warum per Javascript zuweisen?
Das geht doch direkt im style (s.o.)</body>
</html>denke, das könnte auch so aussehen:
-----------------------------------------------------------
<html>
<head><title></title>
<script type="text/javascript">
function tauschen()
{document.getElementById('bot').style.zIndex="10";}</script>
</head>
<body><img id="bot" border="0" src="images/start/wechsel1.jpg" width="180" height="135" alt="" style="position:relative; top:100px; left:0px; z-index:1;" onmouseover="tauschen();">
<img id="wasserf" style="position:relative; top:-135px; left:130px; z-index:2;" border="0" src="images/start/wechsel2.jpg" width="135" height="180">
<img id="berge" style="position:relative; top:-200px; left:203px; z-index:3;" border="0" src="images/start/wechsel3.jpg" width="135" height="180">
</body>
</html>-----------------------------------------------------
Habe den einzelnen Images mal unterschiedliche z-Indizes gegeben.
Sowohl der IE als auch der NS haben das entsprechend interpretiert und die Images gemäß den Indizes überlappend angezeigt.Ein Wechsel des z-Index per Javascript wurde vom NS wie erwartet interpretiert.
Der IE reagierte jedoch nur, wenn position:absolute gesetzt war.
Bei position:relative ignorierte er die Änderung des z-Index einfach.Ist das ein Bug des IE ???
gruß
peter-
Hallo,
folgendes funkioniert im IE wie im Mozilla:
<html>
<head><title>Test1</title>
<script type="text/javascript">
function tauschen() {
document.getElementById('bot').style.zIndex = "10";
}
</script></head>
<body><div id="bot" style="position:relative; top:100px; left:0; width:180px; height:135px; background-color:red" onclick="tauschen();"></div>
<div id="wasserf" style="position:relative; top:-130; left:130; width:180px; height:135px; background-color:blue;"></div>
<div id="berge" style="position:relative; top:-120; left:65; width:180px; height:135px; background-color:black;"></div><script type="text/javascript">
document.getElementById('bot').style.zIndex = "1";
document.getElementById('wasserf').style.zIndex = "2";
document.getElementById('berge').style.zIndex = "3";
</script></body>
</html>Die Bilder habe ich mal weggelassen und duch Hintergrundfarbe ersetzt. Deine Anmerkungen zur zIndex-Zuweisung per Style und nicht per Script sind selbstverständlich richtig. Voraussetztung scheint zu sein, daß nicht nur position, left und top, sondern auch width und height als style angegeben sind. Du kannst ja mal testen, ob das mit Bildern direkt und ohne divs genauso funktioniert.
Wenn ich denn schon die Größe der Bilder kenne, würde ich das in diesem Falle jedoch mit absoluter Positionierung machen, ich finde diese negativen Werte für top und left ziemlich unsauber.cu,
ziegenmelker
-
-
-
-
-
-
-