【ツール紹介】Dreamweaverナシでもクリッカブルマップを作成可能！「Image Map Generator」
最近は少なくなりましたが、まだまだゾンビのように残っているのが、画像中の特定の場所をクリックして別ページなどにリンクするための仕組み「クリッカブルマップ」
このクリッカブルマップ、以前はAdobeのDreamweaverを使用して作成することが一般的でしたが、最近ではWebサイトのコーディング自体に、動作が重いなどの理由でDreamweaverを使用していない方も多いと思います。
そんな方でもDreamweaverナシでクリッカブルマップのソースコードが作成できるサービス「Image Map Generator」をご紹介します。
まずは画像をアップロード
Free Online Image Map Generator
Easy free online html image map generator. Select an image, click to create your areas and generate html your output!
サイトにアクセスすると、画像をアップロードするためのボタンがあらわれますので、「Select Image from My PC」をクリックし、対象となる画像を選んでください。
図形を設定
画像をアップロードすると、プレビューが表示されます。
そのプレビューの中で、クリッカブルマップとしたい部分を指定します。
クリッカブルマップの形は画像下の「Shape」部分から選択できます。
- Rect（四角形）
- Poly（多角形）
- Circle（円）
複数のクリッカブルマップを設定する場合は、1つ設定した後に右下部分の「＋Add New Area」のボタンをクリックすると、新しい領域を設定することができます。
「Rect（四角形）」を設定するためには、画像上で指定したい四角形の左上の頂点となる部分をクリック後、次に右下の頂点となる部分をクリックすると、プレビュー画面上に四角形が表示されます。
その四角形に対して、リンク先の設定やタイトルの設定ができます。さらに、ウィンドウの開き方（target属性）も指定できます。
「Poly（多角形）」の場合は、画像上で頂点となる部分を連続でクリックしていくことにより、多角形を設定することができます。
「Circle（円）」の場合は、1回目のクリックが円の中心の設定、2回目のクリックが設定したい円周上の点となります。
慣れるまでは、色々と試してみると勝手がわかると思います。
最後にコードを発行
図形の設定が完了したら、最後に下部の「Show Me The Code!」をクリックすると、htmlファイルに貼り付けるためのソースコードが表示されるので、こちらをコピーして貼り付ければ完成です！
まとめ
最初にも書きましたが、JavaScriptが発展した現在でも、クリッカブルマップが必要になってくることはまだあります。
そんなときに「Dreamweaverを持っていないので設定できない」と断るのではなく、このようなオンラインツールを使用することで乗り切ることができます。
Dreamweaverを持ってなくてクリッカブルマップをあきらめていたという方は、ぜひ一度、試してみてください。