画像関係のタグ．こひつじの家

　画像関係のタグ

ホームページ作成の部屋－タグの使用法と使用例

　画像を表示させるためのタグ<img>の使用法です。

1．`src`	画像を表示する
2．`usemap`	クリッカブルマップを使う

画像を表示する
`<img src="☆">`	このページのトップへ

　画像を表示するためのタグです。
　☆には画像のURLを入れます。
　画像の形式は GIF，JPEG，PNG が有効です。
　終了タグはありません。

　画像の表示サイズを指定する

width="☆" height="★"

　☆や★には一般的に数値を与えます。数値% を与えることもできますが，テーブルの中では使用できません。
　表示される画像の大きさは，数値の場合はピクセル，数値% の場合はブラウザのウィンドウサイズに対する割合となります。
　widthやheightによる指定をしないときは，画像ファイルが持っている本来の大きさで表示されます。

　画像ファイルが持っている本来の大きさで表示させるときはwidthやheightによる指定をしなくてもかまいませんが，指定しない場合はページの表示が若干遅くなったり，表示中に画面がチラつくことがあります。
　ブラウザは送られてきたデータを元にページを作り上げていきますが，画像のサイズ指定がない場合はとりあえずページを作り上げ，画像サイズが分かった時点で，再表示するためです。

　width や heightの使用例

　上段がソース，下段がブラウザでの表示例です。

(1) <img src="d1930_l.jpg">

(2) <img src="d1930_l.jpg" width="133" height="142"> (3) <img src="d1930_l.jpg" width="266" height="71">

解説
(1) は width や height の指定をしない場合で，画像ファイルがもっている本来の大きさで表示します。
(2) は width や height の値を画像ファイル本来の大きさで指定したものです。表示の結果は (1) と同じです。
(3) は width や height の値を画像ファイル本来の大きさに対してそれぞれ 2 倍と 1/2 倍で指定したものです。width や height の値を変えることによって，画像を拡大したり縮小したり変型させたりすることができます。

　画像に付ける枠の太さを指定する

border="☆"

　☆にはピクセル数を与えます。
　borderを省略した場合，値を省略した場合，値に 0 を入れた場合には枠は表示されません。
　枠の色は黒です。（IE 以外のブラウザでは<font color>等で指定したテキストの色になります）
　borderによって付ける枠は黒枠（IE の場合）ですから，見栄えがよくありません。テーブルやスタイルシートを使った方が良いです。

　リンクアンカーになっている画像については，デフォルトでリンクカラーの枠が表示されます。枠を表示させたくないときは border="0" の指定をしてください。

注意 border属性はHTML 4.01の規格から除外されました。当分は使用できると思いますが，将来はブラウザが対応しなくなる可能性があります。

　borderの使用例

　上段がソース，下段がブラウザでの表示例です。

<img src="d1930_l.jpg" border="1">

<img src="d1930_l.jpg" border="10">

　画像に並ぶテキストの縦位置を指定する

align="☆"

`☆＝top`	：テキスト上端と画像の上端を揃える
`☆＝middle`	：テキストのベースラインと画像の中央を揃える
`☆＝blttom`	：テキストのベースラインと画像の下端を揃える（デフォルト）

注意 border属性はHTML 4.01の規格から除外されました。当分は使用できると思いますが，将来はブラウザが対応しなくなる可能性があります。

　align="top"，"middle"，"bottom"の使用例

　上段がソース，下段がブラウザでの表示例です。

私はだれでしょう。<img src="d1930_l.jpg" align="top">私の名前は「チョンコ」です。普通のぬいぐるみとちがって，中にはビーズが入っています。

私はだれでしょう。

私の名前は「チョンコ」です。普通のぬいぐるみとちがって，中にはビーズが入っています。

私はだれでしょう。<img src="d1930_l.jpg" align="middle">私の名前は「チョンコ」です。普通のぬいぐるみとちがって，中にはビーズが入っています。

私はだれでしょう。

私の名前は「チョンコ」です。普通のぬいぐるみとちがって，中にはビーズが入っています。

私はだれでしょう。<img src="d1930_l.jpg" align="bottom">私の名前は「チョンコ」です。普通のぬいぐるみとちがって，中にはビーズが入っています。

私はだれでしょう。

私の名前は「チョンコ」です。普通のぬいぐるみとちがって，中にはビーズが入っています。

解説
　テキストと画像が同じ行に並んでいるとき，画像はサイズが異なった文字として扱われます。そして縦位置については3種類の指定ができます。1行に表示できなかったテキストは次の行に表示されますが，次の行は画像の下側に移ります。

　テキストを画像の横にまとめて表示する

align="★"

`★＝left`	：左に画像，右にテキストを配置する
`★＝right`	：右に画像，左にテキストを配置する

　続くテキストや画像，罫線などを画像の下に表示するときは，テキストの最後に<br clear="all">を付けておくこと。

注意 border属性はHTML 4.01の規格から除外されました。当分は使用できると思いますが，将来はブラウザが対応しなくなる可能性があります。

　align="left"，"right"の使用例

　上段がソース，下段がブラウザでの表示例です。

<img src="d1930_l.jpg" align="left">私はだれでしょう。私の名前は「チョンコ」です。普通のぬいぐるみとちがって，中にはビーズが入っています。<br clear="all">

私はだれでしょう。私の名前は「チョンコ」です。普通のぬいぐるみとちがって，中にはビーズが入っています。

<img src="d1930_l.jpg" align="right">私はだれでしょう。私の名前は「チョンコ」です。普通のぬいぐるみとちがって，中にはビーズが入っています。<br clear="all">

私はだれでしょう。私の名前は「チョンコ」です。普通のぬいぐるみとちがって，中にはビーズが入っています。

解説
　画像の横に表示しきれなかったテキストは，画像の下に回り込みます。

　テキストの周囲に余白を設ける

hspace="☆" vspace="★"

　☆や★にはピクセル数を入いれます。
　hspaceの指定したときには，画像の左右に☆ピクセルの余白が設けられ，vspaceの指定したときは，画像の上下に★ピクセルの余白が設けられます。

注意 border属性はHTML 4.01の規格から除外されました。当分は使用できると思いますが，将来はブラウザが対応しなくなる可能性があります。

　hspaceとvspaceの使用例

　上段がソース，下段がブラウザでの表示例です。

<img src="d1930_l.jpg" > align="left" hspace="20">私はだれでしょう。私の名前は「チョンコ」です。普通のぬいぐるみとちがって，中にはビーズが入っています。<br clear="all">

私はだれでしょう。私の名前は「チョンコ」です。普通のぬいぐるみとちがって，中にはビーズが入っています。

<img src="d1930_l.jpg" > align="left" vspace="20">私はだれでしょう。私の名前は「チョンコ」です。普通のぬいぐるみとちがって，中にはビーズが入っています。<br clear="all">

私はだれでしょう。私の名前は「チョンコ」です。普通のぬいぐるみとちがって，中にはビーズが入っています。

<img src="d1930_l.jpg"> <img src="d1930_r.jpg">

<img src="d1930_l.jpg" hspace="20"> <img src="d1930_r.jpg">

解説
　特にhspaceを使用すると，画像の横に配置したテキストとの間に余白があくために，テキストが読みやすくなります。
　画像を横に並べて表示する場合もhspaceで適当な余白をあけることができます。
　hspaceを付けなくても，hspace="0"としても，隣の画像との間には若干の空白があきます。
　hspaceやvspaceでは画像の左右や上下に異なった幅の余白を指定することはできませんが，スタイルシートを使うと，4方の余白幅を独立して指定することができます。

　align="left"とhspaceの使用例

　上段がソース，下段がブラウザでの表示例です。

<img src="d1930_l.jpg" align="left">
<img src="d1930_r.jpg" align="left" hspace="20">
私たちはだれでしょう。私たちの名前は「チョンコ」と「チャンコ」です。普通のぬいぐるみとちがって，中にはビーズが入っています。
<br clear="all">

私たちはだれでしょう。私たちの名前は「チョンコ」と「チャンコ」です。普通のぬいぐるみとちがって，中にはビーズが入っています。

解説
　画像を左に並べ，その右にテキストを配置した例です。右側の画像だけにhspaceを指定しました。
　両方の画像にalign="left"の指定が必要です。

クリッカブルマップを使う
`<img src="☆" usemap="#★">`	このページのトップへ

　ひとつの画像の中に複数のリンクアンカーを設けるためのタグです。
　終了タグはありません。
　同じページの中に<map name="★">タグと<area>タグを使う必要があります。
　★にはマップの名前を入れます。

　クリッカブルマップを定義する

<map name="★">⇔</map>

　クリッカブルマップに半角英数字で名前を付けて★に入れます。この名前は<img src="☆" usemap="#★">でも使います。
　⇔のところに，リンクアンカを指定するための複数の<area>タグを置きます。

　画像の中にリンクアンカーを設定する

<area>

　shape="☆"でリンクアンカーエリアの形を指定します。
　coords="★"でリンクアンカーエリアの座標を指定します。
　　　（座標は画像の左上を原点としたピクセル数）
　href="◇"でリンク先のURLを指定します。
　title="△"でツールチップに△を表示させることができます。

☆	形	座標の指定法	★
rect	四角形	四辺形左上の座標を（x₀，y₀），右下の座標を（x₁，y₁）とする	x₀, y₀, x₁, y₁
circle	円	円の中心座標を（x，y），半径をrとする	x, y, r
poly	多角形	角の座標を（x₀，y₀），（x₁，y₁），…，（x_n，y_n）とする	x₀,y₀, x₁,y₁, … , x_n,y₁, x₀,y₀

・多角形の場合は最初と最後に同じ座標を指定して，座標を閉じます。

　クリッカブルマップの使用例

　最初はクリッカブルマップの基本的な使用例，2番目は画像の右にリンクポインタなどの説明を表示する例です。
　各例とも上段がソース，下段がブラウザ上の表示です。

<img src="usemap01.jpg" usemap="#map01" alt="マツバボタン王国">
<map name="map01">
  <area shape="rect" coords="99,157, 137,221" href="usemap02.jpg"
  alt="王子さま" title="王子さま">
  <area shape="poly" coords="212,175, 226,178, 223,209, 235,246,
  177,243, 190,198, 212,175" href="usemap03.jpg"
   alt="お姫さま" title="お姫さま">
</map>

<img src="usemap01.jpg" usemap="#map02" alt="マツバボタン王国"
  align="left" hspace="20"
  onMouseOut="document.mapin.mapdata.value='また来てね'">

<map name="map02">
  <area shape="rect" coords="99,157, 137,221" href="usemap02.jpg"
  alt="王子さま"
  onMouseOver="document.mapin.mapdata.value='王子さま'"
  onMouseOut="document.mapin.mapdata.value='マツバボタン王国'">

  <area shape="poly" coords="212,175, 226,178, 223,209, 235,246,
  177,243, 190,198, 212,175" href="usemap03.jpg" alt="お姫さま"
  onMouseOver="document.mapin.mapdata.value='お姫さま'"
  onMouseOut="document.mapin.mapdata.value='マツバボタン王国'">
</map>

<form name="mapin">
<input type="text" name="mapdata" size="16">
</form>

解説
・2つの人形にリンクアンカーをセットしました。
・左の王子さまは四角形（rect）で，お姫さまは多角形（poly）で指定しました。
・画像全体にリンクカラーの枠が表示されます。
・altは必ず使用してください。IE などでは，マウスカーソルをリンクアンカーの上に乗せたときに，altで記述したテキストがツールチップに表示されます。

・2番目の例ではJavaScriptを使用してマウスの動きを取得し，それに応じたテキストを画面の右に表示させています。
・onMouseOver="☆"は「マウスが目的のエリアに入った」というイベントの発生を取得し，☆で記述した処理を行うハンドラです。
・onMouseOut="☆"は「マウスが目的のエリアから出た」というイベントの発生を取得し，☆で記述した処理を行うハンドラです。
・document.◇.△.value='★'で★を表示させます。documentというオブジェクトとvalueというプロパティは決まっていますので，この通りに記述してください。◇と△には適当な名前を付けてください。
・formタグはキーボードからの文字を入力するときに使うためのものですが，ここでは特殊な使い方をしています。
・<form name="◇">
の◇は，documentに続く◇と同じ名前にする必要があります。
・<input type="text" name="△" size="□">の△はdocumentのところにあった△と同じ名前にする必要があります。□には表示する窓の長さを半角の文字数（全角の文字数の倍）で記述してください。

・画面上の座標を得る方法：
　PaintShop等の画像処理ソフトで画像をロードし，マウスカーソルを目的の位置に置きます。そうするとステータスバーに座標が表示されますので，その値を入力します。

　IE6.0やOperaはonMouseOverの仕様なのかバグなのか，期待した通りには動きませんでした。最初は，マウスが画像の中に入ったら「マツバボタン王国」，リンクポインタに入ったら「王子さま」や「おひめさま」，画像から出たら「また来てね」と表示させるようにしたのですが，そうするとIE6.0では「王子さま」や「おひめさま」という表示さえ出なくなってしまったので，マウスが画像の中に入ったら「マツバボタン王国」を表示させるところを取りやめにしました。

このページのトップへ