ひとつの画像に、範囲を指定してひとつ〜複数のリンクを貼ります。
これをするには、簡単なものでよいのでペイントツールが必要です。
Winなら、すべてのプログラム＞アクセサリにある「ペイント」でも。
なくてもカンでやって、少しづつ修正すればできるかもですが、気が狂いそうですｗ
<見本>
↑このタグは以下のとおり。
<img src=map.gif usemap=#sample>
<map name=sample>
<area shape=circle coords=64,50,28 href=http://www.takoten.com/>
<area shape=rect coords=132,22,183,72 href=http://www.takoten.com/>
<area shape=poly coords=276,18,269,40,245,41,264,54,258,76,277,64,294,76,288,54,307,41,283,40 href=http://www.takoten.com/>
</map>
1) 以下のタグを使います。
<img src=【画像】 usemap=#【名前】>
<map name=【名前】>
<area shape=【形】 coords=【リンク範囲】 href=【リンク先】>
</map>
|
【名前】には、半角英数字でこの一式に名前をつけ、2か所に同じものを入れます。
【形】の部分には、円なら「circle」、四角なら「rect」、多角形 ( 三角形含む ) なら「poly」と入れます。
【リンク範囲】の部分の指定は、形によって書き方が変わります。
位置は、画像のいちばん左上が0,0、「x」は0,0から右へ何ピクセル、「y」は0,0から下へ何ピクセルの意味です。
円の場合は、円の中心の位置と半径の長さを、以下のように入れます。
【円の中心x】,【円の中心y】,【半径】
四角の場合は、四角の左上の位置と右下の位置を、以下のように入れます。
【左上x】,【左上y】,【右下x】,【右下y】
多角形の場合は、角の位置を左上から左まわりに「x,y,x,y,x,y,x,y,x,y,…」と書いていきます。
ただ、上の例の星のように複雑な形のときは、「左上」となる位置がよくわかりませんｗ
「左まわり」が合っていれば、最初になる「左上」の位置が変わっても問題ないっぽいので、悩む前にとりあえずいろいろやってみて下さいｗ
※<img〜>内に「 border=0」を追加して、リンク画像の枠をなくした方が見た目がいいと思います。
※普通のリンクと同じように、<area〜>の中に追加して「alt」や「target=_blank」が使えます。
参考URL…http://park16.wakwak.com/~html-css/map/map1.html
参考URL…http://www.seo-equation.com/html/html/map
「HTMLタグ」のトップに戻る
|
