Wabenraster in Homepage einbauen

[DiDiJo]

Hi Leute,

wir planen ein Browserspiel zu bauen. Dazu wollen wir unsere virtuellen Spielfiguren über ein (am liebsten schräg gekipptes) Wabenmuster laufen lassen.

Wir fragen uns gerade nur wie man ein solches Wabenmuster umsetzt. Einfach mehrere DIVS mit nem entsprechenden Hintergrund kann man zwar absolut irgendwie nebeneinander legen, allerdings würde sich dann auch immer die quadratischen katen des DIVs überlagern und man kann nie sauber herausfinden, welche Wabe angeklickt / gehovert wurde.

Kann mir einer von euch vlt. auf die Sprünge helfen, wie ich ein solches anklickbares Wabennetz erzeugen kann ... vlt gibt es ja irgendwelche Javascript / jQuery Geschcihten, die so ein Raster sauber erzeugen können.

Das ganze wollen wir ohne Flash umsetzten, kann das Spiel später auch vom iPad genutzt werden soll.

mfg

Daniel Schmidt

 

[CPoly]

Ich denke der beste Ansatz ist mittels area-Tag. Damit kannst du für ein img-Tag gewisse Bereiche festlegen (Rechtecke, Kreise oder auch beliebige Polygone), welche dann anklickbar sind. In Verbindung mit Javascript lässt sich bestimmt etwas passendes damit zaubern.
http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm

Edit:
Außerdem gäbe es noch folgende "modernere" Ansätze, welche aber nicht in allen Browsern in gleichem Maß unterstützt werden.
1.SVG Grafiken
2.Canvas Tag

 

[DiDiJo]

ok ... die idee mit der image-map hatten wir auch ... gibt es denn ne möglichkeit die area tags mit einer border oder so sichtbar zu machen ?

 

[SpiceLab]

Wenn, dann nur über den Einsatz von entsprechenden Grafiken, die die Area-Konturen nachzeichnen - siehe z.B. http://doktormolle.de/temp/haeusle/

 

[SpiceLab]

Dazu wollen wir unsere virtuellen Spielfiguren über ein (am liebsten schräg gekipptes) Wabenmuster laufen lassen.

http://www.cssplay.co.uk/menu/mantis.html wäre eine Alternative zur "konventionellen" Image-Map.

 

[DiDiJo]

das sieht super aus ... allerdings geht das auch nur bei solch großen waben ... wenn ich kleinere nehme, hab ich wieder das problem, dass sich diue kanten vom objekt überlagern (sie opacity -> mozilla).

ich werde mal schauen wie weit ich mit dem canvas objekt komme

 

[hela]

Hallo,

Border Slants statt Hintergrundbild wären hierbei m.E. auch eine Darstellungsmöglichkeit.