Html Frage - amiga-news.de Forum

amiga-news.de Forum > Programmierung > Html Frage

[ - Suche - Neue Beiträge - Registrieren - Login - ]

-1-

[ - Beitrag schreiben - ]

29.05.2006, 19:31 Uhr

Bjoern
Posts: 1730
Nutzer

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

[ - Antworten - Zitieren - Direktlink - ]

29.05.2006, 23:44 Uhr

Turrican
Posts: 849
Nutzer

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

[ - Antworten - Zitieren - Direktlink - ]

30.05.2006, 01:50 Uhr

Maja
Posts: 15429
Nutzer

@Bjoern:

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

Vielleicht hilfts weiter.

[ - Antworten - Zitieren - Direktlink - ]

30.05.2006, 01:55 Uhr

_PAB_
Posts: 3016
Nutzer

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

[ - Antworten - Zitieren - Direktlink - ]

30.05.2006, 08:03 Uhr

Turrican
Posts: 849
Nutzer

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

[ - Antworten - Zitieren - Direktlink - ]

30.05.2006, 08:26 Uhr

Bjoern
Posts: 1730
Nutzer

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.

[ - Antworten - Zitieren - Direktlink - ]

30.05.2006, 12:35 Uhr

Maja
Posts: 15429
Nutzer

@Bjoern:

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

[ - Antworten - Zitieren - Direktlink - ]

30.05.2006, 13:48 Uhr

Holger
Posts: 8116
Nutzer

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.

[ - Antworten - Zitieren - Direktlink - ]

30.05.2006, 18:22 Uhr

Bjoern
Posts: 1730
Nutzer

@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. ]

[ - Antworten - Zitieren - Direktlink - ]

30.05.2006, 19:59 Uhr

Holger
Posts: 8116
Nutzer

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

[ - Antworten - Zitieren - Direktlink - ]

31.05.2006, 19:20 Uhr

Bjoern
Posts: 1730
Nutzer

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. ]

[ - Antworten - Zitieren - Direktlink - ]

-1-

[ - Beitrag schreiben - ]

amiga-news.de Forum > Programmierung > Html Frage

[ - Suche - Neue Beiträge - Registrieren - Login - ]