中年おっちゃんでも出来た ウェブページ作成講座 with ? mark

client-side image MAPs

MAP要素は、表示された画像をイメージマップに指定する、インライン要素。

• 表示画像の一部をクリック入力箇所に指定された画像をイメージマップとよびます
• 表示画像の usemap属性値と同じ id属性値を指定する事で、表示画像をイメージマップに指定します。
• 要素の内容は、１個以上の
  • ブロック要素、FORM要素、SCRIPT要素、NOSCRIPT要素、INS要素、DEL要素

  • AREA要素- エリア

    client-side image map AREA

    AREA要素は、表示画像内のエリア（範囲）の形と座標を指定する、MAP要素の子要素。

    • 座標内でリンク先を指定する事ができます。
    • 複数の指定もできますが、エリアが重なってはいけません。
    • accesskey属性を必須とします。
    • 空要素です。

  どちらか片方です。
• イメージマップには、『 クライアントサイド-イメージマップ 』 と 『 サーバーサイド-イメージマップ 』 があります。
  • MAP要素は、『 クライアントサイド-イメージマップ 』 の指定です。
  • 『 サーバーサイド-イメージマップ 』 は、サーバーの機能を使用して実行します。詳細な使用方法は、使用できるかも含め、プロバイダにより違います。ご使用先のプロバイダの指定を参照して下さい。

W3C → XHTML 1.0 → Multi-part XHTML file → DTDs → XHTML-1.0-Strict より

<!--================== Client-side image maps ============================-->
<!-- These can be placed in the same document or grouped in a
     separate document although this isn't yet widely supported -->
<!ELEMENT map ((%block; | form | %misc;)+ | area+)>
<!ATTLIST map
  %i18n;
  %events;
  id          ID             #REQUIRED
  class       CDATA          #IMPLIED
  style       %StyleSheet;   #IMPLIED
  title       %Text;         #IMPLIED
  name        CDATA          #IMPLIED  >
 
<!ELEMENT area EMPTY>
<!ATTLIST area
  %attrs;
  %focus;;
  shape       %Shape;        "rect"
  coords      %Coords;       #IMPLIED
  href        %URI;          #IMPLIED
  nohref      (nohref)       #IMPLIED
  alt         %Text;         #REQUIRED
  target*     %FrameTarget;  #IMPLIED  >

*target属性は XHTML-1.0-Strict 配下では使用できない属性です。

id          ID             #REQUIRED

表示した画像の usemap属性と同じ識別名を付け、表示画像をイメージマップに指定します。省略不可。

class       CDATA          #IMPLIED

スタイルシート等で使用するクラス名を指定します。半角の空白で区切り複数記述する事も出来ます。省略可。

style       %StyleSheet;   #IMPLIED

スタイルシートを記述します。省略可

title       %Text;         #IMPLIED

要素にタイトルを付ける事により、要素の内容の説明等が記述出来ます。省略可。

使用例

name        CDATA          #IMPLIED

要素に識別名を付けます。name属性を使用する場合 id属性が必須。属性の値は、id属性の値と同じです。省略可。

shape       %Shape;        "rect"
coords      %Coords;       #IMPLIED

画像内のエリアの形と座標を指定します。

• 座標は、ベース画像の左上端を基点とした相対値で、ｐｘ かベース画像の％で示します。
• 円形の半径が％の場合、ベース画像の幅か高さの小さい方の％で示します。
• 多角形の場合、始点と終点は、同じ値になります。

href        %URI;          #IMPLIED

リンク先のURIを記述します。省略可。

nohref      (nohref)       #IMPLIED

当該領域がリンク先がを持たない事を示します。値は nohref です。省略可。

alt         %Text;         #REQUIRED

リンク先の説明。音声ブラウザ等を考慮し、省略できません。

target      %FrameTarget;  #IMPLIED

target属性は、Transitional DTDか Frameset DTD の配下にしか記述出来ません。省略可。

FRAME要素 や IFRAME要素 で表示されているフレームの内容を書き換える場合は、その要素のname属性に記述されている名前を属性値とします。

FRAMESET要素 で表示されているフレームを解除して表示させる場合の属性値は、_top です。

当サイトでは、上記の指定のみとします。

IMG要素を使用した使用例

OBJECT要素を使用した使用例

IMG要素とOBJECT要素の画像に対する説明の記述方法に注意。