クリッカブルマップを作成する
ホームページやブログなどのウェブサイトに、画像を表示する際に、画像内にクリック可能な領域を作り、リンクを貼ることができます。クリッカブルマップとも言います。マップ用画像ファイルとマップ定義します。
マップ用画像ファイルとマップ定義を指定する
<img src="画像URL" usemap="#マップ名">
マップを定義する
<map name="マップ名">
<area shape="形状" coords="座標値" href="リンク先URL">…リンクの数だけ繰り返す
</map>
<area shape="形状" coords="座標値" href="リンク先URL">…リンクの数だけ繰り返す
</map>
という記述になります。形状や座標の指定方法は、下記の通りです。
- 画像URL:クリッカブルマップで使用する画像ファイルのURLを指定します。
- マップ名:クリッカブルマップで使用するマップ名を指定します。任意名称です。
- 形状:クリッカブルマップの形状を指定します。下記の中から選択することができます。
キーワード マップ形状 default 画像全体 rect 四角形 circle 円 poly 多角形 - 座標値:座標値を指定します。形状により、指定する要素が異なります。
形状 座標の指定方法 default なし rect X1,Y1,X2,Y2(対頂角 2点のⅩ座標、Y座標をカンマで区切って指定します。) circle 中心X,中心Y,半径(カンマで区切って数値を指定します。) poly X1,Y1,…Xn,Yn(各頂点のⅩ座標、Y座標をカンマで区切って指定します。スタートはどこでも構いませんが、頂点はつながるようにしてください。頂点が飛ぶとクリック範囲がねじれます。) 座標はマップ左上を原点とし、右手方向が+Ⅹ、下方向が+Y になります。下図を参考にしてください。
- リンク先URL:クリックされたときにジャンプするURLを指定します。
こちらがサンプルです。マルや三角の図形にリンクが貼ってあります。
このソースは、次のようになります。
<img usemap="#clickmap" src="http://html.appelle.jp/sample/clickmap.gif" border="0" width="250" height="250" />
<map name="clickmap">
<map name="clickmap">
<area shape="rect" href="cat1/cat2/" coords="88,225,172,142">
<area shape="circle" href="cat1/cat6/" coords="58,90,40">
<area shape="poly"href="cat1/cat12/" coords="229,22,211,130,127,59">
</map>
<area shape="circle" href="cat1/cat6/" coords="58,90,40">
<area shape="poly"href="cat1/cat12/" coords="229,22,211,130,127,59">
ランキングに参加中です! お役に立てたらクリックをお願いします→
コンピュータとインターネット > データ形式 > HTML > リファレンス