【調べ物】イメージマップ作成ツール「HTML Map Creator」

こんにちは製作部部長の藤原です。


先週イメージマップを作成する機会がありました。 モダンブラウザだけを考えればSVGでこと足りるのですが、まだまだそうはいかない案件も多いのが現状です。 イメージマップ・・・めんどくさいけどやるしかない。IE8対応はありまぁす!

で、いままではDreamweaverでやってたんですが、最近Dreamweaverを立ち上げるのが苦痛になってきたので、Web上でできるツールないんかなーと思ってしらべたら、やはり、ございました。大変ありがとうございます。

と、いうことで調べ物ついでにご紹介です。

HTML Map Creator

使い方は簡単。3ステップで完了。

  1. 画像のURLを指定(画像のアップロードは coming soon の模様 )
  2. カーソルで図を描くようにリンク範囲を指定
  3. リンク先URLを設定

で、おわりです。

あまり使う機会がなくなってきてるイメージマップですが、Dreamweaverをたちあげたくない人にはおすすめです。Illustratorでもできますがね!HAHA!

HTML Map Creator

イメージマップのレスポンシブWebデザイン対応

ついでに。

イメージマップは画像のサイズが変わってしまうと、座標もずれてしまい、リンク指定範囲が正常に動作しません。

今回は

stowball/jQuery-rwdImageMaps GitHub

を使うことにしました。これでばっちり。

 

では今回はこのへんで。