読者です 読者をやめる 読者になる 読者になる

せらぴんブログ

サークル「せらぴん」のうのはな透です。やっぱり眼鏡っ娘が好き!!

透過PNGをマスクにしてクリッカブルマップを作ろうとしたが挫折した話

技術 html

図にするとこんなことをやりたかったがダメだった。

f:id:yuphiel:20150515113827j:plain

  1. アルファチャンネル付のpng複数枚用意する
  2. それぞれのpngに別々のページをアンカーする
  3. csspngをすべて重ねる
  4. pngで透明な部分は重なった後ろの方のpngにフォーカスする(といいなぁ)

→透明な部分にカーソルを当てても、一番上のpngにしかフォーカスしませんでした!!

解決案は?

PNG、重ねて | ローディアムアーカイブ

PNG、重ねて 後編 | ローディアムアーカイブ

上記サイトで似たような葛藤を抱えている感じが見えます。解決(代替)案も書いてあるので詳細はそちらを参照。
SVGは詳しくないので、自分でやるとしたらイメージマップ(map/area)かなぁ。あるいはflashとか?

こういう需要に対応することができれば強みになるかも。

追記

unohanat.hatenablog.com

代替方法探してみた編。