WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： かじかじ
カテゴリー： マークアップ >サービス

今回はクリッカブルマップが簡単に作成できるサイトをご紹介します！
ブラウザ上の操作だけで、画像の座標の取得、コードの生成までおこなうことができます。

HTML Imagemap Generator
https://labs.d-s-b.jp/ImagemapGenerator/

クリッカブルマップとは

クリッカブルマップとは、1枚の画像に複数のリンク先を設定された画像のことです。
クリッカブルマップを作成するには、画像内の座標を取得してリンクの範囲を指定する必要があります。
手作業では難しく感じますが、今回ご紹介するサイトを使えば専門の知識なしで、簡単な操作で作成することができます。
今回は、日本地図の画像にリンクを設定していきます。

HTML Imagemap Generatorの使い方

1.画像をアップロードします。

するとこのように、右側にコードが自動で生成されます。

2.右上のツールを選択します

今回は多角形を選択します。

3.リンクにしたい場所をクリックで囲んでいきます。

4.コードが生成されました。

あとはコードをコピーしてhtmlに貼り付ければ、クリッカブルマップの完成です。

まとめ

いかがでしたか？
ツールを知っているだけで複雑に思えるものも、簡単な操作で作成できるのでぜひ覚えて使ってみてください！