Chapter STEP4
2
イメージ／マルチメディア
上級の出題範囲には、
初級の出題範囲も含まれます。初級の出題範囲を復習しましょう。
概要
1
2
3
4
模擬試験
過去問題
索引
❶img要素
❶img要素
<img src="ファイルのパス" alt="代替文字" width="幅" height="高さ">
イメージ
（画像）
を挿入する
イメージ（画像）を挿入します。img要素は単独では使わず、
src属性とセットで使います。
終了タグは記述しません。
また、
ブロックレ
img要素は空要素なので、
img要素はインライン要素なので、
ベル要素の中に記述します。
挿入するイメージのパスを記述します。同一のWebサイト内のファイルの場所は、
一般的
src属性には、
に相対パスで指定します。
イメージの代替文字を指定します。
alt属性には、
表示するイメージの幅をピクセル数、
またはウィンドウのサイズに対する割合（%）で指
width属性には、
定します。
表示するイメージの高さをピクセル数、
またはウィンドウのサイズに対する割合（%）で
height属性には、
指定します。
36
解 説
<img src="ファイルのパス" usemap="#マップ名">
イメージにクリッカブルマップを関連付ける
イメージにクリッカブルマップを関連付けます。
「#
（シャープ）
」に続けて参照するクリッカブルマップの名前を指定します。
usemap属性には、
「クリッカブルマップ」
とは、
クリックする領域によって異なるリンク先を表示するイメージのことで、
ひとつのイ
メージに複数のリンク先を指定できます。
解 説
クリッカブルマップを作成します。map要素は単独で使わず、
name属性とセットで使います。
■第
章■ 2
<map name="マップ名">　</map>　クリッカブルマップを作成する
クリッカブルマップの名前を指定します。任意の名前を適宜指定します。
name属性には、
map要素は、
img要素のすぐ後ろに記述します。
解 説
<area shape="形状" coords="座標" href="リンク先のファイルのパス">
クリッカブルマップのリンクの詳細を指定する
の記述
HTML
クリッカブルマップのリンクの詳細を指定します。
終了タグは記述しません。
area要素は、
<map>∼</map>の間に記述します。空要素なので、
リンク領域の形状を"rect"（長方形）、
shape属性には、
"circle"（円）、
"poly"（多角形）で指定します。
リンク領域の座標を指定します。shape属性の値に応じて、
coords属性には、
coords属性の指定方法は異
なります。
リンク先のファイルのパスを指定します。
href属性には、
指定方法
shape="rect"
coords="a,b,c,d"
説明
b
a
d
長方形の領域にリンクを指定します。
左上のＸ座標,左上のＹ座標,右下のＸ座標,右下の
Ｙ座標の順番で指定します。
c
shape="circle"
coords="a,b,c"
b
c
a
a b
shape="poly"
coords="a,b,c,d,e,f,･･･"
c
e
d
円の領域にリンクを指定します。
中心のＸ座標,中心のＹ座標,半径の順番で指定しま
す。
多角形の領域にリンクを指定します。
すべての角の座標をＸ座標，
Ｙ座標の順番で指定し
ます。
f
※数値はすべてピクセルで指定し、座標ごとに
「,
（カンマ）
」
で区切ります。
解 説
<area shape="形状" coords="座標" href="リンク先のファイルのパス" alt="代替文字">
代替文字を指定する
各area要素には、
alt属性を使って代替文字を指定します。ひとつのイメージでも領域によって異なる代替
文字が指定でき、
音声ブラウザで読み上げられます。各リンク先の説明を記述しておくとよいでしょう。
37
<p>
img要素
<img src="ファイルのパス" usemap="#マップ名">
<map name="マップ名">
<area shape="形状" coords="座標" href="リンク先のファイルのパス" alt="代替文字">
<area shape="形状" coords="座標" href="リンク先のファイルのパス" alt="代替文字">
map要素
<area shape="形状" coords="座標" href="リンク先のファイルのパス" alt="代替文字">
・
area要素
・
・
概要
1
</map>
</p>
2
3
クリッカブルマップの種類
クリッカブルマップには、
「クライアントサイドクリッカブルマップ」
と
「サーバサイドクリッカブルマップ」の2種
類があります。map要素で定義できるのは、前者です。
●クライアントサイドクリッカブルマップ
ブラウザで処理するクリッカブルマップのことです。
3
模擬試験
過去問題
●サーバサイドクリッカブルマップ
WWWサーバで処理するクリッカブルマップのことです。
問題
4
索引
フォルダ「問題3」のファイル「index.html」をテキストエディタで開き、
以下の設定でクリッカブルマップを作
成しなさい。
マップ名
quiz
リンク先
代替文字
四角形（38,27,114,96）
エリアの形状と座標
answer1.html
四角顔の答えを見る
円（212,64,42）
answer2.html
丸顔の答えを見る
三角形（295,28,395,27,329,114）
answer3.html
三角顔の答えを見る
＜仕上がりイメージ＞
38
解答
次のように記述します。
■第
章■ 2
※ファイルを上書き保存し、Internet Explorerで確認しておきましょう。
の記述
HTML
相対パスによるファイルの指定
相対パスは、作成しているHTMLファイルが保存されているフォルダを基準に、
ファイルを指定する方法です。
たとえば、次のようなWebサイトで、
フォルダ
「site」内のWebページ
「index.html」
を基準とした場合、
イメー
ジ
「back.gif」
を指定する方法は、次のとおりです。
●同じ階層にあるイメージを指定
back.gif
site
index.html
back.gif
●同じ階層のフォルダ「images」にあるイメージを指定
images/back.gif
site
index.html
images
back.gif
●ひとつ上の階層にあるイメージを指定
../back.gif
site
html
index.html
back.gif
●ひとつ上の階層のフォルダ「images」にあるイメージを指定
../images/back.gif
site
39
html
index.html
images
back.gif