<MAP><AREA>
一つの画像に複数のリンクを設定する
HTMLタグでひとつの画像に複数のリンクを設定することを、クライアントサイドイメージマップといいます。
クライアントサイドイメージマップでは、マップ全体を<MAP>タグで定義し<MAP>〜</MAP>間に<AREA>タグでリンク領域とそのリンク先を指定します。また、<IMG>タグでマップを適用する画像とその画像が使用するマップ名を指定します。
<AREA>タグで指定するリンク領域の形状には四角形（rect）・円形（circle）・多角形（poly）の3種類があります。<AREA>タグで指定する複数のリンク領域が重なった場合には、先に指定したリンク領域が優先されます。
ソース
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>タイトル</title>
</head>
<body>
<img border="0" src="../img/tagmaparea.jpg" usemap="#sample" alt="サンプル" width="300" height="150">
<map name="sample">
<area href="htmltag038" shape="circle" alt="円形" coords="50,109,32,104">
<area href="htmltag038" shape="poly" alt="多角形" coords="130,5,170,69,94,69">
<area href="htmltag038" shape="rect" alt="四角形" coords="192,75,291,142">
</map>
</body>
</html>
対応ブラウザ
NS3・・・○- NS4・・・○
- NS6・・・○
- NS7・・・○
IE3・・・○- IE4・・・○
- IE5・・・○
- IE5.5・・・○
- IE6・・・○
O6・・・○- O7・・・○
FX1・・・○
更新履歴
- 2008.8.7
- linkページのリンクに、リンク先のサイトサムネイルを表示させるようにしました。
PORTFOLIOのページもサムネイルをクリックすることにより、画像を拡大して表示するようにしました。 - 2008.7.4
- linkに3件追加
- 2008.6.22
- Portfolioに1件追加
サイトデザイン修正 - 2008.6.17
- linkに1件追加
- 2008.1.19
- Portfolioに1点追加
- 2008.1.16
- Portfolioに2点追加
- 2007.9.29
- BLOG開始
- 2007.8.6
- HTMLに一件追加
- 2007.8.3
- サイトリニューアル
- 2007.6.19
- Portfolioに1点追加
- 2006.9.13
- Portfolioに1点追加
- 2006.8.11
- Portfolioに1点追加
- 2006.8.11
- Blog更新、BBS削除しました、LINKに1件追加
DARKNESS
このサイトへのリンクはフリーです。ご連絡していただければ相互リンクもいたします。リンクの際は下記バナをご利用ください。
- 31×31px
- 88×31px
- 188×29px