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

　画像1枚をまるごとリンクにするのではなく、画像の一部分だけをリンクにしたいと思ったことはありませんか？

　また、1枚の画像のうち、場所によってリンク先を変えたい(＝1画像内に複数のリンク先を設定したい)と思ったことはないでしょうか？

　HTMLのイメージマップ(クリッカブルマップ)という仕組みを使うと、座標を指定してリンク範囲を限定し、1画像内に複数のリンク先を簡単に設定できます。

​

・説明１

・説明２

・説明３

・Googleサイトの編集

・マウスオーバー２

・​ロールオーバー？⇒こっちか？

・クリッカブルマップの座標取得ソフト

・SNSリンクする際のURLの取得の手順

​・Google Drive にある画像をimgタグで取得させるURLについて

・【SVG】地図のエリアごとにリンクさせる方法（マウスオーバーで色を変える）

・マウスホバーで色が変わる

・

​

​

【説明】

■画像の５属性設定

（例）<img src="house.gif" usemap="#Map" width="250" height="208" alt="メニュー">

​〇src属性：画像ファイル名。Googleドライブのアドレスを指定。
〇width属性：画像の横幅。　〇height属性：画像の高さ。〇alt属性：代替テキスト

〇イメージマップとして使うマップ名を指定するusemap属性

この属性値には、この後で作成する「マップの名前」を記述します。ここでは例として「Map」というマップ名を使っています。usemap属性で指定する際には、マップ名の先頭に「#」記号を加えますので、usemap属性の値としては「#Map」と記述します。

※1ページ内に複数のイメージマップを作る場合には、それぞれに重複しないマップ名を付ける必要がありますので注意して下さい。

 

■map要素＋area要素でマップを作成 (個別のリンクを作る)
　画像の中の「どの範囲」を「どこへリンクする」のかを示す「マップ」を作成します。これは、map要素とarea要素を使って、例えば以下のような感じで記述します。

<map name="Map">
   <area shape="rect" coords="159,136,184,187" href="page1.html" alt="自己紹介">
   <area shape="poly" coords="170,97,182,107,182,120,159,120,159,107" href="page2.html" alt="日記">
   <area shape="circle" coords="60,30,9" href="page3.html" alt="掲示板">
</map>

 

■map要素：
イメージマップ用のマップを作成するには、map要素を使います。ここに、name属性を使ってマップ名を指定します。
<map name="Map">
   この内側には後述のarea要素を必要なだけ列挙する。
</map>
上記の場合は「Map」というマップ名です。同一ページ内に存在する他のマップと重複しない名称を付けて下さい。もし、何らかの事情でこのmap要素にid属性を付加したい場合は、name属性値と同じ値をid属性値にする必要があります。

 

■area要素：
「画像内のどの範囲をリンクにするのか？」という個々のリンクは、area要素を使って必要なだけ列挙します。area要素には、下記のように各属性を使って、リンクの形状、座標、リンク先などを記述します。

<area shape="形状" coords="座標" href="リンク先" alt="代替文字">

​

≪リンク属性別の設定≫

■共通

　href属性にリンク先URLを、alt属性に代替テキストを記述する。

​　座標のイメージは以下のとおり。

​

​

​

​

​

​

​

​

​

​

​

​

​

​

■四角形
　shape属性の値を「rect」にし、coords属性に「左上の座標(X,Y) , 右下の座標(X,Y)」(合計4つの値)を指定する。
<area shape="rect"
      coords="159,136,184,187"
      href="page1.html" alt="自己紹介ページ">

※右上に設定したければ（1,1,30,30）、左下なら（200,300,300,400）

 

■円形
　shape属性の値を「circle」にして、coords属性に「中心の座標(X,Y) , 半径」(合計3つの値)を指定する。
<area shape="circle"
      coords="60,30,9"
      href="page3.html" alt="このサイトについて">
上記の場合は、「中心座標(60,30)で、半径9ピクセル」の円の範囲を、page3.htmlへのリンクになる。

※試しに縦長の画像で小さな円でテストしてみた。

左上39,39,31、右上682,45,31、真ん中350,451,31、左下29,929,31、右下672,918,31

・まず共通する31は、半径だから変わらないのは当然。

・次にX座標だが、上下関係なく左ほど小さく、右に行くほど大きくなる。左が30位、真ん中で350、左で700位なので、上辺がゼロに設定されているのか？Xは横軸だから、上下が関係ないのは当然か。

・次に縦軸となるY座標だが、上辺が小さく、真ん中が450位、下辺で900位になっている。

・これらを考えると、画像の左上が座標の始点（0,0）で、右下が極大になるのか？

⇒正解！

​

■多角形　shape属性の値を「poly」にし、coords属性に「すべての点の座標(X,Y)」を必要なだけ順番に指定する。<area shape="poly"      coords="170,97,182,107,182,120,159,120,159,107"      href="page2.html" alt="ブログ">上記の場合は、座標(170,97)→(182,107)→(182,120)→(159,120)→(159,107)の点で結ばれた領域となる。ここでは座標を5個列挙しているので五角形のリンクになる。座標を増減させることで三角形や六角形なども作れるし、凹形や凸型のような複雑な形も作れる。

​

​

​

​

​