第7章 画像表示のためのHTML
せっかく良い画像を作成しても、ホームページに上手に取り入れなかったら価値は発揮できませんね。そこで、知って得する画像表示のためのHTMLを解説します。
(HTMLの基本について知りたい方は
「ホームページの基礎の基礎」をご覧下さい。)
7.1 基本の形
<IMG>タグを使って、文字の一要素として表示する方法です。
例えば、HTMLを、
これは<IMG SRC="../image/gazou.gif" WIDTH=40 HEIGHT=40>カメラです。
と記述すれば、
これは
カメラです。
と表示されます。以下にHTMLの解説を追記します。
7.2 画像の周りに文字を配置する
画像の横に文字を表示するには、<IMG>タグの
ALIGN属性で画像の位置を指定します。
例えば、HTMLを
<IMG SRC="../image/gazou.jpg" WIDTH=200 HEIGHT=133 ALIGN=left>ここに記述した文字は、画像の右側に表示されます。<BR CLEAR=all>ここからは、画像の下に表示されます。
と記述すれば、
ここに記述した文字は、画像の右側に表示されます。
ここからは、画像の下に表示されます。
と表示されます。
7.3 ページの背景として画像を使う
ページの背景として画像を使う場合は<BODY>タグの属性として次のように記述します。
<BODY BACKGROUND="パス/画像ファイル名" BGCOLOR="色">
この場合、画像は縦・横方向に繰り返し使われてページ全面に貼りつけられます。このホームページの
トップページのようになります。
- BGCOLOR="色" は画像が読み込まれなくても文字が読み易いように、画像と同系等の色を指定します。色についてはここを参照して下さい。
7.4 部分的な背景として画像を使う
<DIV>タグにスタイルシートを使うとページの一部に背景画像を設定できます。この部分がそうです。HTMLは次のとおりです。
<DIV STYLE="background:URL(パス/画像ファイル名) #ffffcc repeat-y">
‥‥‥文章‥‥‥
</DIV>
- repeat-yは画像を縦方向だけに繰り返し表示することを指定します。横方向に繰り返し表示する場合はrepeat-xとします。何も記述しなければ両方向に繰り返し表示されます。no-repeatとすれば一枚だけ表示されます。
- #ffffccは画像を表示しない所の色を指定します。
- <BODY>タグにSTYLE以下を適用すればページ全体に適用できます。
- スタイルシートはブラウザの種類やバージョンによっては意図したとうりには表示されない場合があります。必ずインターネットエクスプローラとネットスケープナビゲータで確認するようにしましょう。
7.5 画像の位置を指定する
スタイルシートを使うと画像を表示する位置を指定できます。
HTMLは次の通りです。
<DIV STYLE="POSITION:absolute;LEFT:150px;TOP:20px">
<IMG SRC="パス/画像ファイル名">
</DIV>
- LEFT:150px(左から150ピクセル)TOP:20px(上から20ピクセル)の数値で表示位置を指定します。ぺージの左上からの絶対位置で指定します。(「:」と「;」を正確に使い分けて下さい。)
- 位置の異なるものを複数記述すれば、画像を重ねて表示することができます。
- <IMG>タグの代わりに文章を記述すれば、文章が表示できるので、画像の上に文章を表示することもできます。
画像と文字の重ね表示の例は、ここをクリックして下さい。
7.6 マウスで画像を替える
下の絵の上にマウスカーソルを持ってきて見ましょう。絵が替わったでしょう。マウスを戻すと絵も戻ります。
これを実現するには、ヘッダ部(<HEAD>〜</HEAD>の間)に次のように記述します。
<SCRIPT TYPE="text/javascript">
<!--
kisetu = new Image();
kisetu.src = "natu.jpg";
function natu(){document.kisetu.src="natu.jpg";}
function fuyu(){document.kisetu.src="fuyu.jpg";}
//-->
</SCRIPT>
そして、画像を表示するところに、次のように記述します。
<IMG SRC="fuyu.jpg" NAME="kisetu" onmouseover="natu()" onmouseout="fuyu()">
fuyu.jpg:通常時表示する画像
natu.jpg:マウスを載せた時表示させる画像
左の目次の各欄をクリックすれば別のページが表示されます。
フレーム表示されていない場合はここをクリックして下さい。