layer/div übereinander anzeigen...

Z

zZ-mAydaY

Grünschnabel
Hi ich habe ein kleines Problem zum Thema JavaScript...
und zwar habe ich ein Formular, die Felder rufen onMouseOver ein script auf, und dieses Script wiederum zeigt ein <div> an oder blendet es aus (hidden/visible)

Kurz gesagt: onmouseover über einem Formularfeld soll eine hilfe dazu angezeigt werden...

Kleines Beispiel was ich bis jetzt habe:
Code: 
<html>
<body>
<script type="text/javascript">
function hide() {
	layer1.style.visibility ="hidden";
} 
function show() {
	layer1.style.visibility ="visible";
} 
</script>

<img src="bild.gif" border="1" onMouseOver="show()" onMouseOut="hide()">
<div id="layer1" style="width:100px; height:60px; z-index:1; left: 0px; top: 0px; background-color: #666666; border: 1px solid #000000; visibility: hidden">Hilftext</div>
</body>
</html>

soweit klappt dies ganz gut...
Was jetzt aber mein Problem ist:
Wenn ich mehrer <div>/Hilfstexte habe erscheinen diese untereinander, und nicht "übereinander"
also mein Ziel ist es an der selben Position alle Hilfstexte zu zeigen...
(also alle übereinander nur das welches gerade aktiv ist ist sichtbar)

Wie bekomme ich das so hin?

Ich hoffe ich konnte mein Problem verständlich ausdrücken...


gruß mAy
 
Hallo!

Wenn ich es richtig sehe, willst du zig DIVs verwenden, um diese an die gleiche Stelle setzen.
Mal 'ne Frage:
Wäre es nicht einfacher, nur ein DIV zu benutzen, und statt dessen den Text darin zu verändern?

Aber zu deiner eigentlichen Frage:
Das Problem kannst du mit CSS und dessen z-index lösen.
Dieser beinhaltet einen numerischen Wert. Je höher dieser Wert ist, desto weiter vorne in der "Ebene" wird dein DIV angezeigt.
Da bist du in diesem Forum falsch.
Hier mal ein Beispiel wie du es in dein JavaScript integrieren kannst:


Code: 
function hide() {
	layer1.style.visibility ="hidden";
                     layer1.style.zIndex = '1000';
} 
function show() {
	layer1.style.visibility ="visible";
                     layer1.style.zIndex = '1';
} 
</script>
 
Wenn du alle Layer an der selben Stelle positionieren willst kannst du einfach noch das Attribut position verändern:

<div id="layer1" style="width:100px; height:60px; z-index:1; position:absolute; left: 0px; top: 0px; background-color: #666666; border: 1px solid #000000; visibility: hidden">Hilftext</div>

Im Beispiel wird der Layer immer in die obere linke Ecke gesetzt. Der z-index kann dann für alle Layer der gleiche sein, weil ja immer nur 1 Layer angezeigt wird. In selfhtml steht noch einiges über das position Attribut.

Frohes Schaffen ...
 
ich hab praktisch dasselöbe problem nur funktioniert bei mir erstmal garnichts hier der code

Code: 
<body>
<script type="text/javascript">
function showlinks() {
	links.style.visibility ="visible";
        member.style.visibility ="hidden";
        wars.style.visibility ="hidden";
		links.style.z-index ='3';
		wars.style.z-index ='2';
		member.style.z-index ='1';
} 
function showmember() {
	member.style.visibility ="visible";
	wars.style.visibility ="hidden";
	links.style.visibility ="hidden";
		links.style.z-index ='1';
		wars.style.z-index ='2';
		member.style.z-index ='3';
} 
function showwars() {
	wars.style.visibility ="visible";
	links.style.visibility ="hidden";
	member.style.visibility ="hidden";
		links.style.z-index ='2';
		wars.style.z-index ='3';
		member.style.z-index ='1';
}

</script>
<div style="position:absolute; border:thin solid #424675; padding: 10px; top:150px; left: 200px;">
<img src="C:\Dokumente und Einstellungen\Vali\Eigene Dateien\e\clan\bilder\members.jpg" onClick="showmember()">
<img src="C:\Dokumente und Einstellungen\Vali\Eigene Dateien\e\clan\bilder\links.jpg" onClick="showlinks()">
<img src="C:\Dokumente und Einstellungen\Vali\Eigene Dateien\e\clan\bilder\wars.jpg" onClick="showwars()">
</div>

<div id="wars" style="width: 200px; height:400px; visibility: hidden; z-index:3; font-family:Forte; position:absolute; left:300px; top:300px;">
derzeit noch keine wars ausgeführt
</div>

<div id="links" style="width: 200px; height:400px; visibility: hidden; z-index:2; font-family:Forte; position:absolute; left:300px; top:300px;">
<a href="http://www.giga.de">giga</a>
</div>


<div id="member" style="width: 200px; height: 400px; visibility: hidden; z-index:1; font-family:Forte; position:absolute; left:300px; top:300px;">
<table style="border: thick solid #424675; background-color:#8488B9;">
<tr>
<th>Nickname</th><th>Wohnort</th><th>Xfire-nickname</th><th>ICQ</th>
</tr><tr>
<td>Bastard</td><td>Salzburg</td><td>gentax</td><td>-</td></tr><tr>
<td>GrannySmith</td><td>Graz</td><td>grannysmith</td><td>324447506</td></tr><tr>
<td>MaxPredator</td><td>Salzburg</td><td>maxpredator</td><td>-</td></tr><tr>
<td>Intruder (Meti86)</td><td>Linz</td><td>meti86</td><td>-</td></tr><tr>
<td>Machi</td><td>weiß ich nicht</td><td>machi</td><td>-</td></tr>

</table>
</div>
</body>
 
Zuletzt bearbeitet:
Hi,

Du schreibst in Deinem Script überall
objekt.style.z-index.

Korrekt müsstest Du zIndex statt z-index schreiben.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück