クリッカブルマップ(イメージマップ)の作成方法！

こんにちは。Webデザイナーのotarieです (｡-_-｡)
今回はクリッカブルマップ(イメージマップ)を使う機会があったので、クリッカブルマップ(イメージマップ)の作成方法について学んだことを書きます。

画像1枚をまるごとリンクにするのではなく、画像の一部分だけをリンクにしたい。画像内の複数の部分に違うリンク先を指定したい。と思ったアレ。クリックする場所によってリンク先が違う指定をしている絵や画像をクリッカブルマップ(イメージマップ)と言います。

このクリッカブルマップ。初めましての時はとても難しく考えていたのですが、3つの要素を指定するだけで簡単にできたのでご紹介します。
その3つが「img要素」、「map要素」、「area要素」です。
1つづつ見ていきます。
 
 
STEP1「img要素」

img要素は、通常の指定と同様で
<img src=”img/xxxxx.png”>
これに、クリッカブルマップの属性を追加します。

・usemap属性：クリッカブルマップの名前を、頭に「#」を入れ指定してあげます。
・src属性：画像ファイルを指定してあげます。
・alt属性：代替テキストを指定してあげます。
 
 
STEP2「map要素」

先ほどのimg要素に指定したクリッカブルマップの名前を使ってmap名を指定してあげます。

 
 
STEP3「area要素」

area要素は少しだけ複雑になります。先ほど指定したmap要素の中に入れていきます。
画像のどの部分にリンクさせるかを形と座標と共に指定してあげます。
指定の詳しい内容は下で説明します。

■「shape=””」　領域の形

　rect：四角形
　circle：円形
　poly：多角形
　default：画像全体

■「coords=””」　領域の座標

　座標(x,yなど)
　rect：左上と右下の角の座標(x,y,x,y)
　circle：中心点の座標と半径(x,y,半径)
　poly：全ての角の座標(x,y,x,y,x,y,x,y,…)
　default：coords属性は指定できない

■「href=””」　リンク先の指定

　URL：リンク先のURL

■「alt=””」　代替テキスト

　テキスト：マップが表示できない場合のリンクテキスト

この3つの指定をしてあげるだけでできるんです！簡単ですよね！
では全部を指定したサンプルコードを書きます。

 
 
STEP4「座標指定」の方法

では、座標はどうやって指定するのか？ここです。ここが面倒です！（´-`）.｡oO
Photoshopで座標を調べてもいいのですが、ここで私は便利なものを紹介します。
その名も・・・・！　

HTML Imagemap Generator!!!!

この便利なジェネレーターに座標を指定したい画像をポイっ！
そして指定したい形を選んで、絵の上でドラックして形を合わせて。。。。。
指定していくと、右側に自動的にコードが書かれ、座標も入れ込んでくれる本当に便利なジェネレーターで、強く、強くオススメします！！
あとはこのソースコードをコピペすれば簡単に指定できますよ＾＾

いかがでしたか？
また次回をお楽しみに〜