Klicken Sie sich durch das PNG-Bild - nur wenn die angeklickte Koordinate transparent ist

8

Ich habe ein Bild wie folgt:

Ich möchte, dass wenn ich auf die transparenten Teile klicke, der Klick zum darunterliegenden Element gehen soll, aber wenn ich auf ein nicht-transparentes Teil klicke, sollte dieses Bildelement den Klick bekommen.

Ist das überhaupt möglich?

    
Nick 20.07.2016, 17:55
quelle

2 Antworten

6
  1. Verwenden Sie ein temporäres Element Zeichenfläche .
  2. Holen Sie sich das Overlay-Bild mousedown Koordinaten
  3. Füllen Sie Ihre Arbeitsfläche mit diesen Bilddaten aus.
  4. Liest die 1px-Bilddaten aus dem Canvas (aus den gleichen Koordinaten).
    Wenn die abgerufenen Alpha-Kanaldaten 0 sind, heißt das transparent .
  5. Wenn das Pixel transparent ist, Bild ausblenden und unter dem Element abrufen, verwenden Sie Document.elementFromPoint
  6. Trigger "click" event auf dem Unterelement
  7. Zeigen Sie unser vorübergehend verborgenes Overlay-Bild zurück

%Vor% %Vor% %Vor%
    
Roko C. Buljan 20.07.2016, 18:31
quelle
5

Wäre es für Ihr Szenario ausreichend, Klickereignisse im nicht transparenten Bereich des Bildes zu erfassen?

Dies kann mit einem map und etwas JavaScript erfolgen:

%Vor%

(Die Koordinaten wurden mit dieser Site abgeleitet.)

    
Richard Everett 20.07.2016 18:10
quelle

Tags und Links