Html Frage - amiga-news.de Forum

amiga-news.de Forum > Programmierung > Html Frage

[ - Search - New posts - Register - Login - ]

-1-

[ - Post reply - ]

2006-05-29, 19:31 h

Bjoern
Posts: 1730
User

Hallo zusammen,

ich möchte auf einer Seite Ebenen erscheinen lassen, wenn man auf verschiedene Buttons klickt. Das lässt sich ja einfach mit dem Aus/Einblenden von Ebenen machen. Wenn man nun auf einen Button klickt dann wird eine Ebene eingeblendet, wenn man auf den anderen Button klickt, wird die andere Ebene eingeblendet. Soweit kein Problem. Jetzt möchte ich dass die Ebene, die zuletzt eingeblendet wird, immer in den Vordergrund gebracht wird. Im Moment funktioniert das nur mit der Ebene, die den höhreren z-Index hat. Frage: Kann man irgendwie den z-Index der Ebenen vorübergehend ändern und später wieder zurücksetzen? Oder gibts da einen anderen Lösungsansatz? Danke schonmal im Voraus.

Gruß,
Björn

[ - Answer - Quote - Direct link - ]

2006-05-29, 23:44 h

Turrican
Posts: 849
User

das problem hatte ich auch mal ...
leider hab ich auch keine lösung gefunden. soweit ich weiß kann man den z-index nicht dynamisch ansprechen.
--
A1200 Tower
Blizzard 1260 & SCSI
Cybervision64 3D 4MB
256 MB FastRAM
DVD-Brenner
20GB IDE
9,1GB SCSI
ALL MY SYSTEMS

[ - Answer - Quote - Direct link - ]

2006-05-30, 01:50 h

Maja
Posts: 15429
User

@Bjoern:

http://de.selfhtml.org/css/eigenschaften/positionierung.htm#visibility

Vielleicht hilfts weiter.

[ - Answer - Quote - Direct link - ]

2006-05-30, 01:55 h

_PAB_
Posts: 3016
User

Soweit ich mich erinnere, kann man den z-Index manipulieren.
Allerdings bin ich mir gerade nicht sicher, ob das mit JavaScript ging...

[ - Answer - Quote - Direct link - ]

2006-05-30, 08:03 h

Turrican
Posts: 849
User

mit javascript gehts leider nicht.
--
A1200 Tower
Blizzard 1260 & SCSI
Cybervision64 3D 4MB
256 MB FastRAM
DVD-Brenner
20GB IDE
9,1GB SCSI
ALL MY SYSTEMS

[ - Answer - Quote - Direct link - ]

2006-05-30, 08:26 h

Bjoern
Posts: 1730
User

Zitat:
Original von Maja:
@Bjoern:

http://de.selfhtml.org/css/eigenschaften/positionierung.htm#visibility

Vielleicht hilfts weiter.

Leider nicht. Die als letztes angeklickte Ebene soll ja über der vorher angezeigten Ebene liegen. Es soll keine Ebene ausgeblendet werden.

[ - Answer - Quote - Direct link - ]

2006-05-30, 12:35 h

Maja
Posts: 15429
User

@Bjoern:

Da fällt mir auf Anhieb nur noch Flash ein. Wäre für Dich aber wohl auch kein gangbarer Weg?

[ - Answer - Quote - Direct link - ]

2006-05-30, 13:48 h

Holger
Posts: 8116
User

Zitat:
Original von Turrican:
mit javascript gehts leider nicht.

Wieso sollte das nicht gehen?

element.style.zIndex=neuerWert;

Und das war's auch schon.

Hier ein kurzes Beispiel, viel Spaß beim Klicken:

html code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>z-Index</title>
<script type="text/javascript">
var maxIndex=6;
function up(element)
{
  element.style.zIndex=maxIndex++;
}
</script>
<style type="text/css">
div {border:1px solid #888888; width:200px; position:absolute; font-size:28px;
     text-align:center; padding-top:70px; padding-bottom:70px;}
</style>
</head>
<body>
<div onClick="up(this);" style="background:yellow;top:100px;left:120px;z-index: 1;">1</div>
<div onClick="up(this);" style="background:green; top:130px;left:150px;z-index: 2;">2</div>
<div onClick="up(this);" style="background:blue;  top:30px; left:90px; z-index: 3;">3</div>
<div onClick="up(this);" style="background:gray;  top:80px; left:30px; z-index: 4;">4</div>
<div onClick="up(this);" style="background:red;   top:60px; left:60px; z-index: 5;">5</div>
</body></html>

mfg

--
Good coders do not comment. What was hard to write should be hard to read too.

[ - Answer - Quote - Direct link - ]

2006-05-30, 18:22 h

Bjoern
Posts: 1730
User

@Holger

Super! Danke, ich werd mir den Code gleich mal näher ansehen und versuchen einzubinden. Ich versuche jedoch eine Ebene auf "Knopfdruck" d.h auf einen bestimmten Button in den Vordergrund zu bekommen, aber das dürfte eigentlich kein Problem mehr sein. Oder doch?

Gruß,
Björn

[ Dieser Beitrag wurde von Bjoern am 30.05.2006 um 18:24 Uhr geändert. ]

[ - Answer - Quote - Direct link - ]

2006-05-30, 19:59 h

Holger
Posts: 8116
User

html code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>z-Index</title>
<script type="text/javascript">
var maxIndex=6;
function up(name)
{
  document.getElementById(name).style.zIndex=maxIndex++;
}
</script>
<style type="text/css">
div div {border:1px solid #888888; width:200px; position:absolute; font-size:28px;
     text-align:center; padding-top:70px; padding-bottom:70px;}
</style></head>
<body>
<form action="#">
<button onClick="up('red')">Rot</button>
<button onClick="up('green')">Grün</button>
<button onClick="up('yellow')">Gelb</button>
<button onClick="up('blue')">Blau</button>
<button onClick="up('gray')">Grau</button>
</form><div style="position:absolute;">
<div id="yellow" style="background:yellow;top:100px;left:120px;">1</div>
<div id="green"  style="background:green; top:130px;left:150px;">2</div>
<div id="blue"   style="background:blue;  top:30px; left:90px; ">3</div>
<div id="gray"   style="background:gray;  top:80px; left:30px; ">4</div>
<div id="red"    style="background:red;   top:60px; left:60px; ">5</div>
</div></body></html>

mfg

[ - Answer - Quote - Direct link - ]

2006-05-31, 19:20 h

Bjoern
Posts: 1730
User

Holger, ich kann mich wiedermal nur bedanken...
Funktioniert perfekt!

Gruß,
Björn

[ Dieser Beitrag wurde von Bjoern am 31.05.2006 um 21:03 Uhr geändert. ]

[ - Answer - Quote - Direct link - ]

-1-

[ - Post reply - ]

amiga-news.de Forum > Programmierung > Html Frage

[ - Search - New posts - Register - Login - ]