10. 画像

指定した位置に画像を表示するのは、img 要素(IMaGe)を用い、 src 属性(SouRCe)で画像ファイルのファイル名を指定し、 画像が表示できないブラウザで閲覧する人や、目の不自由な人のために alt 属性(ALTernative)で説明をつける。 標準的なブラウザでは、マウスカーソルを画像の上に置くと、altで 示した文字列が表示される。

画像の大きさを指定したいときは， width属性で横幅をピクセル(pixel=画像上の点)単位で指定し， height 属性で高さをピクセル単位で指定する。 (ディスプレ全体で幅1024、高さ768などが多い)

例 表示したい画像 imgTop01A.jpg を index.html と同じフォルダにおいてあるとき、

  <img src="./imgTop01A.jpg" alt="東京女子大学トップページ画像" />

とすると

となりる。img タグは単独タグであるため閉じる時には > ではなく /> としなければならない。
画像の大きさを

  <img src="./imgTop01A.jpg" alt="東京女子大学トップページ画像" width="270" height="60" />

と指定したとき、

となる。

<img src"" の引数には URL も書くことができる。たとえば，

 <img src="http://www.cis.twcu.ac.jp/~asakawa/images2004/myface2004.jpg" alt="My Portrait" />

とすれば，

となる。

リンクと画像を組み合わせれば

<a href="http://www.twcu.ac.jp"><img src="./imgTop01A.jpg" alt="東京女子大学のトップページへ" width="270" height="60" /></a>

とすることにより，
東女のトップページは次の画像をクリックしてください。
という画像によるリンクを作ることができる。

戻る