画像を表示しよう

画像表示の基本タグ

<img src="★">
★=表示させる画像ファイル名(URL)
終了タグが無く単独で使用します

画像に対してテキストの回りこみ位置の指定

<img src="★" align="☆">
★=表示させる画像ファイル名(URL)
☆=画像の表示位置(left,right)テキストは画像の反対に回りこみます

画像と回りこみテキストとの余白を指定する

<img src="★" align="☆" vspace="■" hspace="◆">
★=表示させる画像ファイル名(URL)
☆=画像の表示位置(left,right)テキストは画像の反対に回りこみます
■=上下の余白(ピクセル数)
◆=左右の余白(ピクセル数)

回り込みテキストの解除

<br clear="★">
改行タグの<br>にCLEAR属性を加える事により
イメージに対する回りこみを解除する事ができます
★=left(左の画像に対する回り込みをカット),right(右の画像に対する回り込みをカット)
all(全てカット)

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

<img src="★" width="☆" height="■">
★=★=表示させる画像ファイル名(URL)
☆=横幅(ピクセル数、ウィンドウに対する%で指定)
■=高さ(ピクセル数、ウィンドウに対する%で指定)
<img>タグのwidth属性、height属性を使ってイメージの表示サイズの指定が
出来ます
元のサイズよりも大きくする事も出来ますがあまり大きくすると
シャギってしまいます

画像枠の太さを指定する

<img src="★" border="☆">
★=表示させる画像ファイル名(URL)
☆=枠の太さ(ピクセル数)    参考ページスタイルシート

画像を表示できない時テキストを表示させる

<img src="★" alt="☆">
★=表示させる画像ファイル名(URL)
☆=画像の代わりに表示させる文字
ブラウザの設定で画像を非表示にしている場合や、読み込みに失敗した時など
画像の代わりにテキストを表示させます
また、マウスカーソルが乗ってもヘルプとしてテキストが表示されます
←こんな感じになります

画像が表示される前に低解像度の画像を表示する

<img lowsrc="★">
★=低解像度画像URL
重い画像ファイルを表示させる場合にあらかじめ
lowsrcで白黒画像などを指定しておくとsrcで指定した画像よりも早く表示されます

イメージツールバーを非表示にする(IE6)

<img src="★.jpg" galleryimg="no">
★=表示させる画像ファイル名(URL)
<meta>タグに使用する場合
<meta http-equiv="imagetoolbar" content="no">
←イメージツールバー
ブラウザで非表示に設定方法
「ツール」「インターネットオプション」から「詳細設定」タブを選択後
マルチメディア項目のイメージツールバーを有効にする(再起動が必要)
チェックを外します

画像上で右クリックを無効にする

<img src="★.jpg" onContextmenu="return false">
★=表示させる画像ファイル名(URL)
右クリックが無効です
ページ全体で右クリックを無効にする方法はこちら