✔ Gebäudeübersicht

M

Mo1k

Mitglied
Hallo,

ich bin gearde dabei für mein BG die Gebäudekarte zu erstellen, komme aber nicht weiter. Sie soll inetwa wie die von travian werden, also man soll sich den Bauplatz für das jeweilige Gebäude aussuchen können. Habe versucht das ganze mit divs zu lösen, aber ich komme damit auf keinen grünen Zweig. Hat jemand eine Idee wie ich so eine Karte programmieren könnte ? Ich will kein fertiges Script sondern nur einen Wink in die richitge Richtung.

Mfg Mo1k
 
Eines gleich vorweg, und hinter die Ohren schreiben: CSS ist keine Programmiersprache, sondern eine Formatierungssprache, und ebenso wenig wird mit CSS ein "Script" geschrieben.

Wie wäre es, wenn du deinen gescheiterten Versuch hier vorstellst, damit man darauf eingehen kann?
 
ok mein fehler.
ich habe versucht divs über eine karte zu legen, in denen die einzelnen Gebäude dann sind,jedoch hat es dann mit der verlinkung nicht mehr geklappt, wenn 2 gebäude nahe bei einander sind, zb eines weiter vorne und eines weiter hinten.Dann kann es sein, dass das eine div das andere überlagert und ich auf dem gebäude mit der Maus bin, jedoch ist noch ein anderes div davor und ich kann das Gebäude nicht mehr auswählen.
 
Klingt eindeutig nach einem Konflikt mit der Schichtposition der einzelnen Elemente; die darüberliegenden verwehren dem Nutzer den Mauszugriff auf das darunter befindliche Element und dessen Inhalt.

Da wird wohl vermutlich ein Javascript hinzugezogen werden müssen, das den zIndex-Wert der Objekte überwacht und ihn ggfs. tauscht.

Alle Angaben ohne Gewähr, da ohne detailierte Kenntnisse über dein Konzept.
 
so ich habe jetzt weiter experimentiert und bin fast am Ziel, jedoch funktioniert die map Funktion nicht mehr , gibt es eine Funktion die es mir erlaubt links wie in <map> zu erstellen, allerdings ohne ein Bild ?

Mo1k
 
ok habs hinbekommen, ist zwar meiner Meinung nach unelegant aber sie erfüllt den ihren Zweck.

<html>
<head>
<style type="text/css">
#EBENE {
position: absolute;
height: 312; width: 345px;
left: 100px; top: 100px;
}
</style>
</head>
<body>
<div id="EBENE">
<img src="rohkarte.jpg" width="345" height="312"">
</div>
<div id="EBENE">
div fuer gebaeude
</div>
<div id="EBENE">
<img src="x2.gif" width="345" height="312" border="0" alt="Karte" usemap="#karte">
<map name="karte">
<area shape="rect" coords="50,50,100,100"
href="#" alt="" title="">
<area shape="rect" coords="50,50,150,150"
href="#" alt="" title="">
</map>
</div>
</body>
</html>
Zum Vergrößern anklicken....

x2 ist ein transparentes 1px x 1px großes Bild
 
Stu Nicholls (http://www.cssplay.co.uk/index) hat ein paar nette Beispiele entwickelt, die die konventionelle Image-Map (http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm) simulieren:


Und gewöhn dir besser gleich und konsequent in CSS an, bei numerischen Werten, die größer oder kleiner null sind, eine Maßeinheit anzugeben, denn wenn du von deinem derzeitigen "Quirks Mode" (wg. der fehlenden Doctype-Deklaration) in den "Standards Mode" wechselst, verweigern moderne Browser solche unvollständigen Wertangaben, wie height:312 in deinem Stylesheet.
 
Mo1k hat gesagt.:
das weis ich, habe es ausversehen vergessen... ^^
Zum Vergrößern anklicken....

... und aus Versehen zerschiessen ausnahmelos alle Browser das CSS-Konzept / -Layout, wenn für das Dokument nachträglich einer dieser Doctypes angegeben wird, was schon so manchen Seitenautor in das Forum seines Vertrauens geführt hat ;-)


  • HTML 4.01
    • Variante "Transitional"
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
  • Variante "Strict"
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

  • XHTML 1.0
    • Variante "Transitional"
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • Variante "Strict"
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  • XHTML 1.1
    • Entspricht nur der "Strict"-Variante
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">




P.S. Wenn deine Frage damit hinreichend beantwortet ist, markiere das Thema zum Abschluß bitte als erledigt (oben neben dem Antworten-Button auf das Icon mit dem Häckchen klicken), damit es in der Themenübersicht entsprechend ausgezeichnet wird, und so zukünftigen Hilfesuchenden signalisiert, dass in diesem Thema eine Lösung vorliegt.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück