画像を表示する
目次
T.画像を表示する
U.画像の枠線を設定する
V.画像とテキストの位置関係の指定
W.イメージマップを作成

T.画像を表示する

<IMG src="URL" width="幅" height="高さ" alt="代替文字">

URL画像ファイルのURL
画像の幅(ピクセルまたは%)
高さ
画像の高さ(ピクセルまたは%)
代替文字
画像の代りとなるテキスト

Sorce
G3.gif <IMG src="G3.gif" width="96" height="93" alt="G3.gif">


WIDTH及びHEIGHTを実際のより大きくしたり、小さくしたりすると下記の様に表現できます。
しかし極端にSIZEを変えると画像が汚くなります。

例−1例−2例−3
G3.gif G3.gif G3.gif

URLはファイルの位置指定を参照して下さい

U.画像の枠線を設定する

<IMG src="URL" width="幅" height="高さ" alt="代替文字" border="枠の太さ">

枠の太さピクセル

Sorce
G3.gif <IMG src="G3.gif" width="96" height="93" alt="G3.gif" border="5">


V.画像とテキストの位置関係の指定

<IMG src="URL" width="幅" height="高さ" alt="代替文字" align="位置">

[位置]
top画像の上とテキストの上を揃える
middle画像の中心とテキストのベースラインを揃える
bottom画像の下とテキストのベースラインを揃える(デフォルト)

Sorce
G3.giftop <IMG src="G3.gif" width="96" height="93" alt="G3.gif" align="top">
G3.gifmiddle <IMG src="G3.gif" width="96" height="93" alt="G3.gif" align="middle">
G3.gifbottom <IMG src="G3.gif" width="96" height="93" alt="G3.gif" align="bottom">


W.イメージマップを作成

<IMG src="URL" alt="代替文字" usemap="#マップ名">
<MAP name="マップ名">〜<MAP>
<AREA shape="形状" coords="座標" href="URL" alt="代替文字">

マップ名形状
rect四角
circle
poly多角形

[座標]
rect左上のX座標・左上のY座標・右下のX座標・右下のY座標
circle中心のX座標・中心のY座標・半径
poly全ての角の座標をX座標・Y座標の順で指定

メイン 文字を書く 表ーT 左の画像にメインページ
・文字を書く・表ーTへ
ジャンプする様にしています。
試してみて下さい。
Sorce <IMG src="img/018.jpg" usemap="#map1">
<MAP name="map1">
<AREA shape="rect" coords="10,10,110,110" href="html_m.html" alt="メイン">
<AREA shape="rect" coords="120,10,230,110" href="html_2.html" alt="文字を書く">
<AREA shape="rect" coords="240,10,350,110" href="html_6.html" alt="表ーT">
</MAP>

イメージマップとは、画像の特定の領域をマウス・クリックに反応する様にして、
他のページへリンクする様にしたものです。

[メインに戻る]