Imagemap mit darüberliegenden trans. PNG - onClick durchreichen

T

Templorials

Erfahrenes Mitglied
Hallo!

Ich frage mich ob es zu meinen Problem ein Lösung gibt ohne das Konzept generell umzubauen.

Folgende Situation (im Anhang eine Grafik dazu):
Ich habe ein Bild das per usemap eine Imagemap verwendet für verschiedene klickbare Bereiche. Darüber liegt ein kleineres anderes Bild, das jedoch nicht komplett ausgefüllt ist sondern umliegend transparente Fläche besitzt. Jetzt wäre es natürlich optimal wenn man auf die transparente Fläche des kleinen Bildes klickt das dann der Klick weiter auf das darunterliegende Bild gegeben wird also dann das Imagemap greift. Geht das irgendwie oder ist das nicht möglich wie ich befürchte?

Danke,
Michael
 

Anhänge

  • onclickprob.jpg
    onclickprob.jpg
    10 KB · Aufrufe: 10
Genau solche Probleme musste ich lösen, als ich angefangen habe eine auf CSS, HTML und JavaScript basierende Game-Render-Engine zu schreiben, um die Pixel-Kollisionserkennung von Sprites zu machen.

Der Trick ist folgender: Nach dem geklickt wurde, versteckst du das Element (display:none) und benutzt dann die Funktion "document.elementFromPoint(x,y)" an der Klick-Position, um das darunterliegende Elemente zu finden und machst das obere Element sofort wieder sichtbar (man merkt davon also nichts). Ich habe das ganze dann rekursiv für beliebige Anzahl von übereinander liegenden Sprites gelöst, was du natürlich nicht brauchst.

Edit: Für die transparenten Bereiche zu erkennen, habe ich das Canvas Element im Hintergrund benutzt, um eine Boolsche-Map für Sichtbar/Unsichtbar zu erstellen. Da kannst du natürlich auch anders lösen, z.b. könntest du ja das Bild wieder mit einem Polygon annähern.
 
Danke das hat mir jetzt schon sehr weitergeholfen. Ich bring es nur noch nicht zusammen den Klick per Javascript auf das Imagemap zu steuern.

Da ich mit jQuery arbeite dachte ich es müsste sich ja einfach über die trigger('click',[x,y]) Funktion machen lassen. Wenn ich das auf das <img> oder auch auf die <map> anwende tut sich aber leider nichts.

Hast du da noch eine Idee?
 
Ich muss das wohl zurücknehmen. elementFromPoint() liefert immer das image-Element, nicht das area-Element wie ich erwartet hatte.

Also fallen mir folgende Möglichkeiten ein:
1. Bau das Overlay selbst in die Map mit ein. Funktioniert natürlich nur, wenn es sich nicht oft ändert.
2. Prüfe mit JavaScript selbst, in welchem area-Element der Klick war. Im Internet findest du mit Sicherheit Funktionen zur Prüfung ob ein Punkt in einem Polygon liegt.
 
Genau das war mein Problem, dass ich so nicht einfach das area Element bekomme. Aber das mit der Überprüfung in welchem Polygon es liegt werde ich mir als nächstes ansehen, das könnte klappen. Danke nochmal.

Was ich mir sonst noch gedacht hätte auf den Overlay Bildern auch einfach eine Map zu legen. Nur müsste ich dann eine dyn. Berechnung entwickeln welche mir aus dem großen Map genau den Ausschnitt für das Bild gibt. Sollte auch möglich sein, aber wahrscheinlich nicht sehr einfach.. Oder kann man vielleicht Imagemaps verschieben (wie z.B. Hintergründe mit background-position) - gleich mal schauen^^

UPDATE:
Ok jetzt bin ich schon kurz vor dem Ziel, jedoch passt bei meiner check Funktion ob der Punkt im Polygon noch nicht. Neben dem richtigen Polygon bekomme ich noch 1-2 andere als Ergebnis (ings. 10 Polygone). Bis jetzt habe ich aber noch keinen Hirnschmalz rein gesteckt und einfach zwei Funktionen die ich gefunden habe ausprobiert...

http://snippets.dzone.com/posts/show/5295
http://www.webmasterworld.com/javascript/3551991.htm

Ich werde einmal meine Polygone überprüfen, aber in den area-Elemente funktionieren sie richtig..
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück