【ツール紹介】Dreamweaverナシでもクリッカブルマップを作成可能!「Image Map Generator」

【ツール紹介】Dreamweaverナシでもクリッカブルマップを作成可能!「Image Map Generator」

Dreamweaverナシでクリッカブルマップ

最近は少なくなりましたが、まだまだゾンビのように残っているのが、画像中の特定の場所をクリックして別ページなどにリンクするための仕組み「クリッカブルマップ」

このクリッカブルマップ、以前はAdobeのDreamweaverを使用して作成することが一般的でしたが、最近ではWebサイトのコーディング自体に、動作が重いなどの理由でDreamweaverを使用していない方も多いと思います。

そんな方でもDreamweaverナシでクリッカブルマップのソースコードが作成できるサービス「Image Map Generator」をご紹介します。


まずは画像をアップロード


image map generator

サイトにアクセスすると、画像をアップロードするためのボタンがあらわれますので、「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を持ってなくてクリッカブルマップをあきらめていたという方は、ぜひ一度、試してみてください。

Web開発カテゴリの最新記事