..



 ■HomeHomePageTips−画像にリンクを付ける(クリッカブルマップ)

+1JavaScript 無料のフリースクリプト集...

 クリッカブルマップ
画像にリンクを付ける(クリッカブルマップ)

 一枚の画像の複数の範囲にリンクを付けることができます。



 ちょい技の方法
サンプルの解説
  1. <img>タグに「usemap」属性を指定。「menu」の部分は任意の名前をつける。
  2. <map>タグを使ってクリッカブルマップを定義する。
  3. <area>タグの書式は、<area shape="領域の形状" coords="座標" href="リンク先のURL">
  4. 領域の形状と座標はカンマ「,」でくぎります。下表を参照。

<img src="click.gif" border="0" usemap="#menu">
<map name="menu">
<area shape="rect" coords="18,8,485,69" href="../index.html"
target="_blank">
<area shape="rect" coords="90,75,205,172" href="../sample/movie/index.html" target="_blank">
<area shape="rect" coords="29,203,150,358" href="../sample/minigame/index.html" target="_blank">
<area shape="rect" coords="222,255,339,341" href="../sample/pic/index.html" target="_blank">
<area shape="rect" coords="333,112,478,215" href="../sample/mouse/index.html" target="_blank">
</map>


◇ 領域の形状と座標 ◇
領域の形状
shapeの値
coordsの値
 矩形
 rect
 左上のX座標,左上のY座標,右下のX座標,右下のY座標
 円
 circle
 中心のX座標,中心のY座標,半径
 多角形
 poly
 各頂点のX座標とY座標を順番に記述
 領域全体
 default
 なし


..


..