画像


画  像

HTML INDEX

●<IMG>

【説 明】

「SRC=」で指定したURLの画像を表示します。表示できる画像フォーマットは、「GIF」「JPEG」「Progressive JPEG」です。GIF形式では256色以下しか表示することができませんが、透明化やインターレース(じわじわと表示される)がサポートされています。 JPEG形式はフルカラーで圧縮率も高いのですが、小さな画像の場合は逆にデータ量が増える場合があります。 Progressive JPEG形式は JPEG形式を進化させたもので、高速で高品質な表示と、スムーズで高速なインターレースがサポートされています。

・SRC="url"
 「url」には、画像ファイルのURLを指定します。

・ALT="画像の代わりに表示する文字"
 「画像の代わりに表示する文字」には、ユーザーが画像の表示できないブラウザを使用した場合や、ロードを途中で止めた場合に、画像の代わりに表示させる文字を記述します。

・WIDTH="幅"
 「幅」は、ピクセル数またはパーセントで指定します。「高さ」とともに指定しておくと、画像の表示位置が先に決定されますので、HTMLソースのそれ以下の部分を画像が完全にロードされる前に表示することができます。

・HEIGHT="高さ"
 「高さ」は、ピクセル数またはパーセントで指定します。「幅」とともに指定しておくと、画像の表示位置が先に決定されますので、HTMLソースのそれ以下の部分を画像が完全にロードされる前に表示することができます。

・BORDER="枠の太さ"
 「枠の太さ」には、画像がリンクしている場合の枠の太さを指定します。0 を指定すると、枠を消すことができます。

・ALIGN="位置"
 「位置」には、 left ・ right ・ top ・ texttop ・ middle ・ absmiddle ・ baseline ・ bottom ・ absbottom が指定できます。

・VSPACE="縦スペース"
 「縦スペース」には、回り込みテキストなどとの縦方向の間隔をピクセル数で指定します。

・HSPACE="横スペース"
 「横スペース」には、回り込みテキストなどとの横方向の間隔をピクセル数で指定します。

・LOWSRC="軽い画像のurl"
 「軽い画像のurl」には、「SRC=」で最終的に表示する画像の前に、(本来は)とりあえず表示させておくデータ量の少ない画像のURLを指定します。つまり、2つの画像が切り替わる効果を出すことができます。ただし、一度キャッシュに読み込まれてしまうと、効果がでなくなります。

・USEMAP="url#マップ名"
 「マップ名」には、クライアント・サイド・イメージマップで使用するマップ名を指定します。マップ名は、 <MAP> タグの「NAME=」で指定される値で、その書式は <A> タグの「HREF=」の指定方法と同様です。

【使用例】

<IMG SRC="image/i-wai.gif" ALT=" image/i-wai" WIDTH=63 HEIGHT=83>

 image/i-wai



<IMG SRC="image/i-wai.gif" ALT=" image/i-wai" WIDTH=63 HEIGHT=83>

 image/i-wai



<A HREF="#PAGETOP">
<IMG SRC="image/i-wai.gif" BORDER="0" WIDTH=63 HEIGHT=83>
<IMG SRC="image/i-wai.gif" WIDTH=63 HEIGHT=83>
<IMG SRC="image/i-wai.gif" BORDER="4" WIDTH=63 HEIGHT=83>
</A>



<IMG SRC="image/i-wai.gif" ALIGN="left" WIDTH=63 HEIGHT=83>
日本には<BR>
秋が存在します。
<BR CLEAR="left">
八代亜紀も存在します。

日本には
秋が存在します。
八代亜紀も存在します。



<IMG SRC="image/i-wai.gif" ALIGN="left" VSPACE=20 HSPACE=40 WIDTH=63 HEIGHT=83>
日本には<BR>
秋が存在します。
<BR CLEAR="left">
向井亜紀も存在します。

日本には
秋が存在します。
向井亜紀も存在します。



<IMG SRC="image/i-wai.gif" ALIGN="right" WIDTH=63 HEIGHT=83>
日本には<BR>
秋が存在します。
<BR CLEAR="right">
松原千秋も存在します。

日本には
秋が存在します。
松原千秋も存在します。



<IMG SRC="image/i-wai.gif" ALIGN="left" WIDTH=63 HEIGHT=83>
<IMG SRC="image/i-wai.gif" ALIGN="right" WIDTH=63 HEIGHT=83>
日本には<BR>
秋が存在します。
<BR CLEAR="all">
堺正章も存在します。

日本には
秋が存在します。
堺正章も存在します。



日本の秋 <IMG SRC="image/i-wai.gif" ALIGN="top" WIDTH=63 HEIGHT=83>

日本の秋

※ALIGN="top"を指定した場合は、一番高さのあるものの上に合わせます。



日本の秋 <IMG SRC="image/i-wai.gif" ALIGN="texttop" WIDTH=63 HEIGHT=83>

日本の秋

※ALIGN="texttop"を指定した場合は、一番高さのある文字の上に合わせます。



日本の秋 <IMG SRC="image/i-wai.gif" ALIGN="middle" WIDTH=63 HEIGHT=83>

日本の秋

※ALIGN="middle"を指定した場合は、画像の中心に文字のベースラインを合わせます。



日本の秋 <IMG SRC="image/i-wai.gif" ALIGN="absmiddle" WIDTH=63 HEIGHT=83>

日本の秋

※ALIGN="absmiddle"を指定した場合は、画像の中心にラインの中心を合わせます。



日本の秋 <IMG SRC="image/i-wai.gif" ALIGN="baseline" WIDTH=63 HEIGHT=83>

日本の秋

※ALIGN="baseline"を指定した場合は、画像の下を文字のベースラインに合わせます。



日本の秋 <IMG SRC="image/i-wai.gif" ALIGN="bottom" WIDTH=63 HEIGHT=83>

日本の秋

※ALIGN="bottom"を指定した場合は、画像の下を文字のベースラインに合わせます。



日本の秋 <IMG SRC="image/i-wai.gif" ALIGN="absbottom" WIDTH=70 HEIGHT=83>

日本の秋

※ALIGN="absbottom"を指定した場合は、画像の下をラインの下に合わせます。


マップの定義

HTML INDEX

●<MAP> 〜 </MAP>

【説 明】

クライアントサイド・イメージ・マップのマップを定義します。この範囲内で <AREA> タグを用いてクリックに反応するエリアとリンク先を定義します。

・NAME="マップ名"
 「マップ名」は、 <IMG> タグの「USEMAP=」で指定するマップ名です。 <A> タグの「NAME=」と同様にマップに名前を付けます。

【使用例】

<MAP NAME="SMAP">

<AREA SHAPE="RECT" COORDS="8,8,47,47" HRF="#A1">

<AREA SHAPE="RECT" COORDS="58,8,97,47" HREF="#A2">

</MAP>

<IMG SRC="image/angel.gif" BORDER=0 WIDTH=120 HEIGHT=88 USEMAP="#SMAP">


エリア・リンク定義

HTML INDEX

●<AREA>

【説 明】

クライアントサイド・イメージ・マップのクリックに反応するエリアとリンク先を定義します。このタグは、<MAP>〜</MAP>の範囲内で使用します。 <AREA> タグでエリア指定した部分が、他のエリアと重なってしまった場合には、先に定義した方が優先されます。

・SHAPE="形状"
 「形状」には、RECT(四角形)・CIRCLE(円)・POLYGON (多角形)が指定できます。 省略された場合は「RECT」が選択されたことになります。

・COORDS="形状の各座標"
 「形状の各座標」は、「SHAPE=」で指定した形状に合わせた形式で座標を指定します。

「RECT」の場合は、「左上のX座標」「左上のY座標」「右下のX座標」「右下のY座標」の4つの座標をカンマ(,)で区切って指定します。

「CIRCLE」の場合は、「中心のX座標」「中心のY座標」「半径」の3つの座標をカンマ(,)で区切って指定します。

「POLYGON」の場合は、すべての角の座標を「X座標」「Y座標」の順で指定します。

・HREF="url"
 「url」には、指定したエリアがクリックされた場合のリンク先を指定します。

・NOHREF
 指定したエリアがクリックされても、何も反応しないようにする指定です。

・TARGET="ウインドウ名"
 <A> タグと同様にリンク先を表示するウインドウ(フレーム)を指定することができます。

【使用例】

<MAP NAME="SMAP">

<AREA SHAPE="RECT" COORDS="8,8,47,47" HREF="#A3">

<AREA SHAPE="RECT" COORDS="58,8,97,47" HREF="#A4">

</MAP>

<IMG SRC="image/angel.gif" BORDER=0 WIDTH=103 HEIGHT=53 USEMAP="#SMAP">