クリッカブルマップの作り方

ブログ

Blog
  1. ホームページ制作・運営はアウラ:ホーム
  2. ブログ
  3. クリッカブルマップの作り方

クリッカブルマップの作り方

クリッカブルマップの作り方

牧野です。

なんとなく面白いものに出くわしたので、紹介したいと思います。
画像のある範囲をクリックした時にリンク先へジャンプする<area>タグですが、画像中の座標などを指定して、選択範囲を指定する必要があります。

簡単なものならhtml Imagemap generator (http://labs.d-s-b.jp/ImagemapGenerator/) などがありますが、もっと精確にDream Weaverでイメージマップを作成できるので、やり方をご紹介したいと思います。

Dreamweaverでイメージマップ

今回使用するソフトはDreamweaverですが、ツールとして用意されている多角形機能を使用します。
[ツール]から挿入を選んで、imgタグと挿入する画像を選択します。
[ウインドウ]から[プロパティ]を選択してツールボックスを表示させます。(右下のタグにあるimgタグをクリックしておいてください)

[プロパティ]の中にある、多角形ツールを選択して、リンクの範囲を選択しておきます。すると、選択部分が青く表示されるので、この部分がリンク先への部分となります。

上記のツールバーにある分割を選んで、コードビューを開いて、<map>や<area>などのタグを含めて、コピペすれば、他のファイルにも応用できます。

必要に応じてリンク先やalt属性は変更してください。

下の画像のいちごとコーヒー部分にリンクを付与していますので、クリックするとリンク先へのジャンプが実行されます。

↓写真中のいちごかコーヒーをクリックしてみてください。

(いちご→このページの一番上に移動します。コーヒー→前のこのセクションの見出し部分へ移動します。

日本地図などの地方、都道府県の矩形や例でいうと、いちごやカップなどの複雑な形をなぞらえることができるので、視覚的にもリンク先を指定しやすくすることができます。

レスポンシブにも対応

jsのライブラリーにjQuery RWD Image mapがあります。これを同ファイルに読み込ませて、jqueryでimgのセレクタを指定し、rwdImagemap()を適応させるとレスポンシブにも対応したイメージマップを作成することができます。ただし、元々の画像の比率を変更しないことが条件で、もし変更したければ、新たにイメージマップを作成して、適応させる必要があるので、注意が必要です。

 

最後に

便利で、ユーザー目線なリンク先を作れることが魅力です。ぜひ、いろんなリンクを作ってみてください笑。

coffee

前後の記事

ホームページの寿命について思いを馳せる回

こんにちは!アウラの松浦です。 突然ですが、私はとあるニュースを見て衝撃を受けました。 忍者ツールズさんが提供する、「忍者カウンター」ほか8つのWebツールがサービスを停止されるとのこと。 リンク:『…

お電話でのお問い合わせはこちら:06-6292-8577。受付時間は平日9:30~18:30 インターネットからは24時間受付中!お問い合わせフォームはこちら