Seite mir mehreren Layern
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anfangen
anzeigen
arbeiten
ausblenden
code
container
dokument
einschalten
http
index
jemand
karte
machen
realisieren
schalten
show
transparente bilder
url
verwenden
vorschlag
-
Hallo,
ich möchtegerne eine Karte mit verschiedenen Overlays anzeigen, die man ab- und abwählen kann. Also, dass es machbar ist die einzelnen Layer ein und aus schalten könnte bzw. auch mehrere gleichzeit einschalten kann.
Die einfachste Möglichkeit ist das ganze durch ein kleines Javascript zu realisieren z.B. so:
<table> <tr> <td> <img src="1.gif" name="image" alt="Karte"> </td> <td> <input type="button" value="Grundkarte" onclick="document.image.src='1.png'"><br> <input type="button" value="Ansicht1" onclick="document.image.src='2.png'"><br> <input type="button" value="Ansicht2" onclick="document.image.src='3.png'"><br> <input type="button" value="Alles" onclick="document.image.src='4.png'"> </td> </tr> </table>
Hierbei wird allerdings nur das Overlay vorgetäuscht, was das ganze ein wenig unflexibel macht - zudem passt mir aufgrund der Javascriptproblematik diese Lösung nicht ganz.
Zu einen wäre ja ein vorgaukeln durch html eine Lösung weg vom Javascript, aber das macht alles nicht gerade einfacher (ehr noch aufwendiger zu verändern), da ich mit sehr vielen Seiten arbeiten müsste.
Hat jemand einen Vorschlag? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Servus,
Damit kannst soviele div-container einblenden/ausblenden wie du möchtest.
Nur der erste Div-Container (z-index:1) ist anfangs sichtbar - kann jedoch auch an/ausgeschalten/überlagert werden.
Natürlich transparente Bilder verwenden :-)
Ich hoffe du kannst damit was anfangen.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Unbenanntes Dokument</title> <style type="text/css"> #bild1 { z-index:1; visibility:visible; } #bild2 { z-index:2; visibility:hidden; } #bild3 { z-index:3; visibility:hidden; } .L1 { height:200px; width: 200px; border: thin solid #000; position: absolute; } #links { position:absolute; top:230px; left:10px; } </style> </head> <body> <div class="L1" id="bild1" > <img src="bilder/bild1.png" width="200" height="200" alt="kjfsfkl" /></div> <div class="L1" id="bild2" > <img src="bilder/bild2.png" width="200" height="200" alt="hjkhjkhjk" /> </div> <div class="L1" id="bild3" > <img src="bilder/bild3.png" width="200" height="200" alt="sdgghtf" /></div> <div id="links"> <a href=# onclick=javascript:document.getElementById('bild1').style.visibility='visible'>Layer 1 einblenden</a> || <a href=# onclick=javascript:document.getElementById('bild1').style.visibility='hidden'>Layer 1 ausblenden</a><br /> <a href=# onclick=javascript:document.getElementById('bild2').style.visibility='visible'>Layer 2 einblenden</a> || <a href=# onclick=javascript:document.getElementById('bild2').style.visibility='hidden'>Layer 2 ausblenden</a><br /> <a href=# onclick=javascript:document.getElementById('bild3').style.visibility='visible'>Layer 3 einblenden</a> || <a href=# onclick=javascript:document.getElementById('bild3').style.visibility='hidden'>Layer 3 ausblenden</a><br /> </div> </body> </html>
Beitrag zuletzt geändert: 27.5.2012 11:51:06 von che1974 -
kanexo schrieb:
ich möchtegerne eine Karte mit verschiedenen Overlays anzeigen, die man ab- und abwählen kann. Also, dass es machbar ist die einzelnen Layer ein und aus schalten könnte bzw. auch mehrere gleichzeit einschalten kann.
...
Hat jemand einen Vorschlag?
Ist es das, was Du suchst?
Show hidden Div
LG, Menschle -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage