サイトマップ   お問い合わせ   このサイトについて   ホーム   
WEB制作支援
 HTMLリファレンス
 スタイルシート
 JavaScript
 PHP/データベース
WEBデザイン
 デザインテクニック
 素材集/テンプレート
 ウェブ配色の見本
 ユーザビリティ
WEB運営
 ウェブの開設と運営法
 アクセスアップの技
 アフィリエイト (WEB広告)
 ドメインとサーバー
特集・トピックス
 Web広告で収入を得る
 独自ドメインの利点
 使えるWeb作成ソフト
 Webデザイナーになるには
 SEOでアクセスアップ
 光ファイバーの導入
リンク集
 ウェブ作成リンク
 無料リンク
 オンラインソフトリンク
 ユーザーリンク
 ウェブコラム
 参考文献一覧
 サイトマップ
 このサイトについて
 お問い合わせ
 eWebホーム


Home >> HTMLタグリファレンス/Tips >> マップ <MAP> <AREA>

マップ <MAP> <AREA>



<MAP>タグについて

1つの画像を複数の領域に分けて、それぞれの領域にリンクを設定します。これはクリッカブルマップやイメージマップと呼ばれます。
<MAP>タグでは、イメージマップでどのような領域を区切るか定義します。
イメージマップで使用する画像を指定している<IMG>タグにはusemap属性が必要です。

属性 機能 記述例
name 名前 マップの名前(IMGタグと対応) <MAP name="map">


<AREA>タグについて

1つの画像を複数の領域に分けて、それぞれの領域にリンクを設定します。これはクリッカブルマップやイメージマップと呼ばれます。
<AREA>タグでは、リンク先のURLや領域の位置、形などを設定します。

属性 機能 記述例
href 画像ファイル 画像ファイルの指定 <AREA src="img.jpg">
alt テキスト 画像の代替テキスト <AREA alt="全体写真">
taget フレーム名
ウィンドウ名
_blank
_self
_top
_parent
指定したname属性を表示
指定したname属性を表示
新しいウィンドウを開く
同じウィンドウに表示
フレームを解除する
親フレームに表示
<AREA target="lFrame">
<AREA target="nWindow">
<AREA target="_blank">
<AREA target="_self">
<AREA target="_top">
<AREA target="_parent">
shape rect
circle
poly
四角形の領域
円形の領域
多角形の領域
<AREA shape="rect">
<AREA shape="circle">
<AREA shape="poly">
coords 数値*1 領域の座標 <AREA coords="1,1,30">
nohref 領域にリンクがないことを示す <AREA nohref>
tabindex 数値 タブキーで移動する順番 <AREA tabindex="2">
accesskey 英字 ショートカットキー <AREA accesskey="B">
*1coordsには次のように設定します。
rect 四角形の左上のx座標, y座標, 四角形の右下のx座標, y座標
circle 円の中心のx座標, y座標, 円の半径
poly 多角形のすべての点のx座標, y座標を交互に記述


サンプル

イメージマップ

オレンジ色の部分をクリックしてください(リンク先はありません)




サンプル・ソース

緑の文字が変更箇所で、赤い文字が対応するタグ・属性です。

<H2>イメージマップ</H2>
<IMG src="img/i0501a.gif" width="400" height="250" border="1" usemap="#mapID"><BR>
<MAP name="mapID">
<AREA shape="rect" coords="259,15,288,69" href="sample1.html" title="コンビニ">
<AREA shape="rect" coords="225,192,288,223" href="sample2.html" title="電器屋">
<AREA shape="circle" coords="59,101,26" href="sample3.html" title="">
<AREA shape="poly" coords="40,183,124,152,124,183" href="sample4.html" title="GS">
</MAP>


解説・注意点など

複数リンクしたい画像にusemap属性を記述し、#mapIDのように「#」をつけて名前を設定します。

AREAタグはいくつでも指定することができます。


 
 

HTMLタグリファレンス/Tipsに戻る




 eWeb/ HTML/ スタイルシート/ Javaスクリプト/ PHP/ 素材集/ テクニック/ 配色/ ユーザビリティ/ 開設と運営/ アクセスアップ/ アフィリエイト/ ドメイン
Copyright(C) 2004. Aeu, Gundam, eWeb, HTML Tag Reference Samples Tips. All rights reserved. - Home