Edited at

これは便利!!『HTML Imagemap Generator』を使って<area>タグの座標をかんたんに取得


概要

初めてイメージマップ案件が来ました。

日本地図の画像に100個のareaタグ。1つ1つ手作業で座標を図っていくのは絶望的に大変。。

そんなときに出会ったのが、こちら。

http://labs.d-s-b.jp/ImagemapGenerator/

本日ご紹介する『HTML Imagemap Generator』です!!!!!!

(通販番組みたいだな..)

↓↓↓ 作者はこの方です ↓↓↓

https://bunlog.d-s-b.jp/html-imagemap-generator


使い方

私はjsonに座標だけ書き込みたかったので、ジェネレートまで至らなかったのですが、非常に使いやすいです。詳しい使い方は上記のサイトやブログに書かれています

私が使ったやり方は、

1. 画像をドラッグアンドドロップ(解像度対策で2倍サイズ画像をお持ちの場合は、1倍のものを使ってくださいね)

2. 右上の3種類のボタンから好みの形を選びます(私は丸と矩形両方使いました)

3. 座標を取りたい場所を左上からドラッグします

4. 手を離したら、右側にareaタグが追加されています

5. わたしはジェネレートせずにそのままcoordsの値をコピって使いました

以上です。


おまけ

ありがたい。。。とてもありがたい。。。

自分もこんなふうに誰かの役に立つwebサービスをつくって見たいものです。

しかし、イラレからこういうのって自動生成できそうな気がしました。だめなのかなぁ?

これだと100%手作業ってわけではないですが、まだ手作業の域ですよね;

完全に自動生成できればとっても楽ちんになりそうです。