メモ帳で作るWEB-P画像編３＆テーブル

別名を「クリッカブルイメージマップ」ともいいます。１枚の画像から何箇所にもリンクが張れます。

イメージマップ作成手順

使用する要素は[img].[map].[area] の３種類です。

1. 先ず、画像を１枚用意します。[img}要素は、{src}属性で画像を読み込みます。
   画像挿入の構文は、<img src="画像名"でした。
   (WORDを開いて、メニューの[挿入]→[図]→[クリップアート]から適当な１枚をコピーし、下に貼り付けました。 画像サイズは、横[397px]×縦[299px]です。これで、準備完了です。)
2. 続けて、{usemap}属性で「#付きマップ名」を決めます。(マップ名は[半角英数字]で任意です。)
3. [map]要素は、[name]属性でマップを定義します。（このマップ名により、画像とリンクの設定が関連付けされることになります。）
4. [map]要素間に
   [area]要素を入れ子にして、[shape]属性で「領域の形状」を指定します。構文は下記になります。
   <area shape=""の[""]中に、[rect(長方形)],[circle(正円)],[poly(多角形)] の何れかを記述します。

範囲指定には、[COORDE]属性を使用し、リンクボタンのXY座標を設定します。

• [rect]の場合：[coords=""]の値に、(1)X 座標,(2)Y 座標,(始点) (3)X 座標,(4)Y 座標(終点)で長方形を指定します。
• [circle]の場合：[coords=""]の値に、(1)X 座標,(2)Y 座標で中心点を決めます(3)円の大きさ(半径)を決めます。このページで採用しています。
• [poly]の場合[coords=""]の値に、X1,Y1, 座標の始点から) ・・・Xn,Ynと多角形分記述します。
• 各数値の区切りは、半角[,]カンマ区切りです。
5. その領域に、[HREF]属性」で、リンク先の[URL]を設定します。
   （上記一連の作業が連続して記述できます。記述した分「リンク先」が設定できることになります。）
6. 終了タグ</map>を忘れずに。

イメージマップの構文例

頭の部分でも、目でも、尻尾のどこにでも張れます。座標の数値は画像のサイズから判断します。構文は下記になります。

<img src="tora.jpg" usemap="#マップ名"> (何でもよいです。私はmappと付けました。)
<map name="マップ名">
<area shape="circle" coords="50,150,50" href="リンクの相手先URL">
<area shape="circle" coords="170,150,60" href="リンクの相手先URL">
<area shape="circle" coords="280,100,50" href="リンクの相手先URL">
</map>

画像の上にマウスを乗せ、右クリックすると丸枠が表示されます。
１．顔の部分をクリックすると、W3Cの [22 Transitional DTD] に繋がります。現在最も使用されていると思われるHTML401 Transitionalを規定しています。
２．胴体部分をクリックすると「利根町イラストマップ」（正式名：クライアントサイドクリッカブルイメージマップです。）クリックしてみてください。
３．尻尾の部分をクリックすると、私のトップページに繋がります。

テーブルを利用して画像をページ内の任意の場所に貼り付ける

前回の画像位置設定は一般向きではないようですので、テーブルで試してみました。

<caption> タグを使用。(テーブルの下に設定することも可能です。)

テーブルを使用し、画像を配置する。 <th>タグを使用した１行目です。6列を「colspan="6"」を使用し1列にし 　ました。1行目の縦幅90ピクセルです。縦幅の変更は自由に設定できます。
（2行目の1〜4列）で、5列目に画像を挿入するのですが、通常の挿入法では、左の400ピクセルが縮んでしまうのです。 「background="画像名"」で、やっと解決しました。		（2行目の6列目です。横サイズ100ピクセル）だが、膨らんでいます。？
（3〜5行目「colspan="6"」と 「rowspan="3"」使用しました。） 以上の結果、テーブルを使用すれば、画像が任意の場所に貼り付けできることが分かりました。 使用したテーブルのサイズは600ピクセル×570ピクセルで、6列5行の30セルを5つのセルに纏めたものです。画像の四周に文字の周り込みも出来ています。

注釈：テーブルの外枠四周の設定について、<table border frame="box">がありますが、ここでは、変化のあるスタイルシートで記述しました。テーブルの関して記述済みのページがあります。こちら「表組み（で使用する）HTMLタグ一覧」をご覧ください。また、 こちら「いろいろな枠の設定」をご覧ください。

また、レッスンのため、色をごてごてと塗り、文字色も替えていますが、文字サイズ、文字色を一定に、シンプルに仕上げた方が文字の 回り込みなどが綺麗に表現できると思います。

上のテーブルで使用した「要素」と「属性」について

• 要素：[table], [caption],[tr],　　[th], 　 [td], 　　[colspan],　　[rowsoan]
• 属性：[border].[align],　[width], [height],[valign], [cellspacing],[cellpadding],[bgcolor],[background]
• 文字装飾関係（文字色、文字サイズ、太字、アンダーライン）については、[style]属性を使用し、スタイルシート記述で 処理しました。（[font]タグを使用するより「表現力に優れ連記が出来るので。」）
• これらの要素、属性の一覧は下記「W3C DTD」と対比してください。

上記虎の顔をクリックし、７分目位に　<!--=== Tables ===-->　があり、その下の[<!ELEMENT TABLE - -] が、下記になります。（ [--***-->] のメモはカットし、私のメモを載せました。）

表の見方

• ELEMENT:要素型
• 次が要素名（[CAPTION][THEAD]などの列です。）
• %***は、前段に記載あり。を見よ参照で、パラメータ実体定義を参照する。
• - - は、開始タグ必須、終了タグ必須を表しています。
• - O は、開始タグ必須、終了タグ省略可を表しています。
• O O は、開始タグ、終了タグ共省略可
• (**)+ は、** は１回以上出現しなければなりません。
• (**)* は、** は０以上の回数出現してもよい。
• EMPTY は、空要素といって、終了タグの必要なし、付けてはいけません
• (TH|TD) は、THとTD のどちらかが出現しなければなりません。双方同時に出現してはいけません。
• 全体について、[（　）]は括弧内はグループの範囲を示します。

<!ELEMENT TABLE - -
     (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>
　　　CAPTION、THEAD、 TFOOTは現れないか、1回のみ出現する。
　　　COLとCOLGROUPは現れないか、任意回数出現しても良い。双方同時に出現してはいけません。
　　　TBODYは１回以上出現しなければなりません。となっていますが、開始、終了タグ省略可です。
<!ELEMENT CAPTION  - - (%inline;)*  [要素で上記tableで使用] 　表題を入力する部分。 こちら「参照」
<!ELEMENT THEAD    - O (TR)+　[要素です。] ヘッダでTHEADで囲まれた部分はグループを形成する。同上参照　
　　　　　　　　　　　　　　　　　　　　また、こちらの表のソ-スをご覧ください。　　　　　　　 
<!ELEMENT TFOOT    - O (TR)+　[要素です。] フッタでTFOOTで囲まれた部分はグループを形成する。同上参照
　　　　　　　　　　　　　　　　　　　　また、こちらの表のソ-スをご覧ください。　
<!ELEMENT TBODY    O O (TR)+　　　　[要素で開始終了タグ共省略可] 本体部分で、同上。　　　　 同上参照　
　　　　　　　　　　　　　　　　　　　　また、こちらの表のソ-スをご覧ください。
<!ELEMENT COLGROUP - O (COL)*　　　 [要素です。] 
<!ELEMENT COL      - O EMPTY　　　　[要素です。]  
<!ELEMENT TR       - O (TH|TD)+ 　　[要素で上記tableで使用] 　横列の行を設定し、この中にセルを配置します。
<!ELEMENT (TH|TD)  - O (%flow;)*[要素で上記tableで使用] TH ：表組の見出しのセルで、太字・中揃いで表示。
　　　　　　　　　　　　　　　　　　　　　　　　　　　　TD ：データ入力セルです。１つのセルを設定します。
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 この中には他のブロックレベル要素や別の
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 テーブルなどを配置することが可能です。
左端は属性名です。
%attrs; は、attrsを参照せよです。
#IMPLIED は、省略可能で、省略された場合はアプリケーションに依存することになります。
ちなみに、「#REQUIRED」は省略不可です。
<!ATTLIST TABLE
  %attrs; (パラメータ実体参照で、右記の実体定義がされている)　[%coreattrs; %i18n; %events;の３属性です。]                              
  summary     %Text;     #IMPLIED　 [属性です。] 　　　　　 (表の目的や構造の概要を記述)
  width       %Length;   #IMPLIED　 [属性で上記tableで使用] (表の横幅のサイズを指定：ピクセルor％表示)
  border      %Pixels;   #IMPLIED　 [属性で上記tableで使用] (表の外枠の太さを指定：ピクセル表示)
  frame       %TFrame;   #IMPLIED 　[属性] 　　　　　　　　 (表の外枠の表示形式を指定)
　rules       %TRules;   #IMPLIED 　[属性] 　　　　　 　　　(表の内枠の表示形式を指定)
  cellspacing %Length;   #IMPLIED 　[属性で上記tableで使用] (セル間の間隔を指定）
  cellpadding %Length;   #IMPLIED　 [属性で上記tableで使用] (セル内のマージンを指定）
  align       %TAlign;   #IMPLIED　 [属性で上記tableで使用]（表の表示位置を指定：left,rightに文字･画像）
  bgcolor     %Color;    #IMPLIED　 [属性で上記tableで使用]（表全体の背景色を指定）
  %reserved;　　　　　　　　　　　　[属性] 　　　　　（可能な将来の使用のために取っておく） 
  datapagesize CDATA     #IMPLIED 　[属性] 　　　　　（データソースにバインドされている表に
　　　　　　　　　　　　　　　　　　　　　　　　　　　 表示されるレコード数を設定） 　　　 
  >

また、(TH|TD)をクリックすると

<!ATTLIST (TH|TD) 　　　　　　　　
  %attrs;　(パラメータ実体参照で、右記の実体定義がされている)　[%coreattrs; %i18n; %events;の３属性です。]
  abbr        %Text;      #IMPLIED 　[属性] （アクセサビリティ（情報を容易に知見できる）見地からヘッダセルの概要
　　　　　　　　　　　　　　　　　　　　　　　を示すabbr属性の記述（非視覚系ブラウザ用に）が求められます。）
  axis        CDATA       #IMPLIED 　[属性] （カテゴリー名を指定）
  headers     IDREFS      #IMPLIED　 [属性] （現在のデータ・セルにヘッダー情報を供給するヘッダー・セルのリストを指定）
  scope       %Scope;     #IMPLIED 　[属性] （ヘッダセルのヘッダ情報を供給するデータ・セルの範囲指定）
  rowspan     NUMBER      1 　　　　 [属性で上記tableで使用]（縦に跨るセル、行の数を指定し結合。１はデフォルト値。）
  colspan     NUMBER      1 　　　　 [属性で上記tableで使用]（横に跨るセル、列の数を指定し結合。１はデフォルト値。）
  %cellhalign; 　　　　　　　　　　　[属性] 下記に展開します。
　　　 align      (left|center|right|justify|char) #IMPLIED　（left|center|right|justify|charの値をとります。）
   　　char       %Character;    #IMPLIED  （整列用の軸の役割をするためにテキストfragment内（本来連続した情報で
　　　　　　　　　　　　　　　　　　　　　　 あるはずのファイルが、ディスク内で細かく分断された状態をフラグメント
　　　　　　　　　　　　　　　　　　　　　　 という。）の単一の特徴を指定）
   　　charoff    %Length;       #IMPLIED  （各ライン上の整列文字の第1の発生へのオフセットを指定）
  %cellvalign; 　　　　　　　　　　　[属性] 下記に展開します。
　　　 valign     (top|middle|bottom|baseline) #IMPLIED
　　　　　　　　　　　　　　　　　（セル内文字･画像の縦方向の位置指定top|middle|bottom|baselineの値をとる。）
  >  

トップへ戻る     スタイルシート目次へ戻る
前のページへ戻る     画面を分割するフレーム機能へ進む