1UP: <canvas> und <map>

Hi,
gibt es eine Möglichkeit oder ein Work-Around, wie ich eine Map mit einem Canvas kombinieren kann? Habs einfach mal ganz straight mit usemap probiert, aber das funktioniert leider nicht.

  
<canvas usemap="#eineMap"></canvas>  
<map name="eineMap">  
   ...  
</map>  

  1. Okay, ich hab jetzt ein unsichtbares Bild drüber gelegt, aber das gefällt mir überhaupt nicht, allein schon, weil es das Event-Handling mit dem Canvas erschwert. Wär immernoch dankbar für eine bessere Lösung.

    1. Hi,

      Okay, ich hab jetzt ein unsichtbares Bild drüber gelegt, aber das gefällt mir überhaupt nicht, allein schon, weil es das Event-Handling mit dem Canvas erschwert.

      dann leg das Bild doch darunter.

      Wär immernoch dankbar für eine bessere Lösung.

      <canvas> kennt kein usemap-Attribut. Was Du vermutlich vorhast, ist bei <canvas> schlicht und ergreifend nicht vorgesehen.

      Cheatah

      --
      X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
      X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
      X-Will-Answer-Email: No
      X-Please-Search-Archive-First: Absolutely Yes
  2. Hallo,

    du hast verschiedene Möglichkeiten:

    • Lege die klickbaren Controls als normale HTML-Elemente mit absoluter Positionierung über die Canvas. So können sie ganz normal Maus-Events entgegennehmen. Das ist wohl das einfachste.
    • Berechne bei Mausklicks auf die Canvas, welches Zeichenelement auf der Canvas getroffen wurde, und lass dieses Zeichenelement das Ereignis verarbeiten. Ich habe mir dazu eine Bibliothek geschrieben. Für die Canvas gibt es eine Display-List mit Display-Elementen. Bei einem Klick wird diese durchlaufen und eine Kollisionsabfrage findet statt (über bounding boxes). Bei einem Treffer kann das Display-Element das Ereignis z.B. mit einer click-Methode verarbeiten. Die Bibliothek findest du hier: http://github.com/molily/liquid

    Grüße, Mathias