こんにちは。藤本です。

画像の編集や作成をする機会が増え、ある日画像を見ていると
ふと、ある疑問が頭に過ぎりました。
webサイトやホームページで、画像の一部だけにリンクをつけて他のページに移動させることはできるのか。
みなさんも思ったことはないでしょうか？
今回は、そんな悩みを叶えてくれる方法を見つけたのでご紹介したいと思います。

イメージマップ（クリッカブルマップ）

画像の一部だけにリンクをつけたい、1枚の画像の中で複数のリンク部分を作り場所によってリンク先を変えたいを可能にしてくれるHTMLのイメージマップ(クリッカブルマップ)というものがあります。
イメージマップを使えば、座標を指定してリンク範囲をつくり、1画像内に複数のリンク先を簡単に設定できます。指定できる範囲の形は、円形や四角形に限らず複雑な形状も指定可能で、様々な図柄にぴったり合わせたリンクを作ることができます。

イメージマップつくってみた

コアラをイラストレーターで描いて1枚の画像を作成してみました。上記、コアラの画像の3箇所にリンクをつけています。
リンクのある箇所は、コアラの両目と鼻です。このページ内部に移動するリンク先URLを設定しています。

ソースコードは、下記のようにHTMLのみで実装可能です。CSSやJSの記述は一切いりません。

・usemap属性の値に、マップ名を記述します。

・map要素に、name属性を使ってマップ名を指定します。

・area要素に、形状・座標・リンク先URL・代替テキストを指定します。
　形状は、円形が「circle」、四角形が「rect」、その他の多角形が「poly」です。

イラストのクオリティーを無視しても、すごく簡単に設定できました。
問題は座標の指定部分をどう設定するかですが、簡単に設定できる方法があります。

簡単に座標を指定できるオススメのサービス

座標を細かく調べて記述するのは、形状によってはかなりの手間がかかります。
なので簡単に座標を設定できる便利なサービスやツールを使うのがオススメです。
今回は、「HTML Imagemap Generator」というツールを使ってみました。

使い方は簡単で、画像をドロップして、形を選択し、指定したい箇所に形を当てはめると、右側にソースコードまで作成してくれます。
あとはリンク先URLを指定してあげれば、イメージマップの完成です。

他にも、簡単に座標を設定できる便利なサービスなどは、たくさんあるので試してみるのも良いと思います

1枚の画像だけでWEBサイトの1ページ分、つくれる？

1枚の画像に、複数のリンク先を設定できるなら、1枚の画像だけでWEBサイトの1ページ分をつくることができるのではないかと、ふと気になったので少し調べてみました。

問題は何らかの影響で画像が表示できない場合、何も表示がされないということです。なので、別途テキストリンクも用意しておくなどの対策が必要になります。
その他にも色々問題は、ありそうなので、1枚の画像だけでWEBサイトの1ページ分つくるのは、やめておいた方が良さそうですね。

今後、ごちゃごちゃしたソースコードではなく、1枚の画像だけで完璧なWEBサイトを制作できるような技術やサービスが誕生すれば、ページ移動だけのWEBサイトは誰でも簡単につくることができますね。