透過pngの透明部分以外をクリックできるように

質問

現在透過pngを絶対配置でいくつも重ね合わせてサイトを制作しようとしています。
透過pngが複雑な形をしているためクリック領域が重なってしまい、ロールオーバーなどのマウスイベントが上手くいきません。
透明部分を無視するようなjavascriptなど良い方法がないか探しています。

回答No.2

fujillin

ANo1です。

反応がないので、もう見ていらっしゃらないのかもしれませんが、上記のcanvasを重ねておく方法で簡単に試してみたところ、一応取得できるようです。

クリックの位置からカーソル座標を割り出して、各canvas上のその座標のイメージデータを取得し、透明度が0でなかったら（＝不透明だったら）その画像を対象画像と判定するという考え方です。

回答No.1

fujillin

普通にやるならクリッカブルマップを利用するのが簡単そうに思いますが、エリアを自分で定義する必要があります。

スクリプトで画像を解析するのなら、canvasを利用して透明部分とそれ以外を区別する方法がありそうです。
画像一枚々々を解析する必要がありますので、ピクセル単位で行なうと時間とメモリがかかりそう。
2×2とか3×3を1単位として定義できるくらいの画像であれば、この方法でもいけるかもしれません。

あるいは、canvas要素を複数重ねあわせておいて、クリックされる度にそれぞれを調べるとか…
こちらの方法ならスクリプトでメモリを大量に使うことはなさそうに思います。
（検証はしていません）

もっとうまい方法があるかも知れませんが、すぐに思いつくアイデアとしてご参考までに。