<IMG> | NN すべて IE すべて HTML すべて | |||||||||||||||||||
<IMG> | HTML 終了タグ : 使用不可 | |||||||||||||||||||
img 要素はブラウザによって処理可能な MIME タイプでグラフィックイメージを表示します。一般的なイメージの MIME タイプは GIF および JPEG ですが、最近のブラウザには PNG および BMP フォーマットのビットマップイメージをデコードできるものもあります。ただし、補助アプリケーションの設定によってこれらのファイルタイプが外部アプリケーションに再ルーティングされている場合を除きます。img 要素はインライン要素であり、テキストの行の中央など、ドキュメント内の指定された任意の場所に表示されます。HTML 4 では、要素の表示に影響する属性の大半の代わりにスタイルシート規則が使用されます。ただし、既に Web に多量に存在するイメージが多数含まれたドキュメントとの互換性を保つため、今後のブラウザでもこの属性を使用することはできます。また、Navigator 4 では img 要素のボーダーおよびマージンにスタイルシートを使用する場合に、img 要素を div または span 要素内に入れ、周りの要素にスタイルシートを指定する必要があります。この回避策は他のすべての CSS 対応ブラウザでも使用できるため、複数のブラウザでの実装でもスタイルシートを使用できます。 イメージ全体をクリック可能なリンクにする場合には、img 要素を a 要素内に入れます。イメージの周りに標準的なリンクボーダーを表示しないようにするには、border 属性に 0 を設定します。さらに、イメージマップ (イメージのそれぞれのセグメントによってリンク先が異なる) については、HTML 勧告ではサーバー側のイメージマップ (ismap 属性) ではなく、クライアント側のイメージマップ (usemap 属性) の使用を推奨しています。リンク以外のアクションに大しては、IE 4 以降および Netscape 6 ではイメージに onclick イベントハンドラーを割り当てることができます。ただし欠点として、:hover 擬似クラスが確実に機能するのは a 要素に対してのみであるため、他のイベントでカーソルスタイルを制御する必要があります。 スクリプト実行可能な以前のバージョンのブラウザとの互換性を保つためには、すべての img 要素に height 属性および width 属性を使用することをお勧めします。これらの属性に値が指定されていると、ブラウザはイメージが読み込まれるのを待ってからそのサイズに合わせてページ上の他のコンテンツを整理する必要がないため、ページをより速く表示できます。 |
||||||||||||||||||||
例 | ||||||||||||||||||||
<IMG src="mtRushmore.jpg" height="90" width="120" alt="Mount Rushmore"> |
||||||||||||||||||||
オブジェクト参照 | ||||||||||||||||||||
[window.]document.imageName [window.]document.images[i] [window.]document.getElementById(elementID) |
||||||||||||||||||||
要素固有の属性 | ||||||||||||||||||||
|
||||||||||||||||||||
要素固有のイベントハンドラー属性 | ||||||||||||||||||||
|
align | NN すべて IE すべて HTML すべて | |||||||||||||||||||||||||||||||||||||||
align="where" | オプション | |||||||||||||||||||||||||||||||||||||||
すぐ外のコンテナや周りのコンテンツに対する img 要素の表示方法を指定します。設定によっては、イメージを右または左マージンに "フロート" させ、その他のコンテンツをイメージの周りで折り返すことができます。ただし、中央揃えのイメージでは他のコンテンツの折り返しができません。 本章の最初にある位置揃えの定数値のほとんどは img 要素に適用されます。一般的に HTML 4 では、align 属性の代わりにスタイルシート属性が使用されます。ただし、ドキュメントが以前のバージョンに対応できるようにする必要がある場合には、align 属性を使用してください。 |
||||||||||||||||||||||||||||||||||||||||
例 | ||||||||||||||||||||||||||||||||||||||||
<IMG src="surferDude.gif" align="right" alt="Surfer" height="100" width="200"> |
||||||||||||||||||||||||||||||||||||||||
値 | ||||||||||||||||||||||||||||||||||||||||
ブラウザによってこの属性の値のセットは異なります。align 属性には長い歴史がありますが、すべての値がそうだというわけではありません。Navigator 3 および Internet Explorer 4 では、absmiddle や baseline のような珍しい値が追加されましたが、W3C 勧告には追加されませんでした。ページ上の近接する複数のイメージに異なる値を指定すると、イメージや周囲のコンテンツの表示や配置に予期しない影響が出る可能性があります。使用するシステムに合わせて、次の表から値を選択してください。
|
||||||||||||||||||||||||||||||||||||||||
既定値 | ||||||||||||||||||||||||||||||||||||||||
bottom |
||||||||||||||||||||||||||||||||||||||||
オブジェクト参照 | ||||||||||||||||||||||||||||||||||||||||
[window.]document.imageName.align [window.]document.images[i].align [window.]document.getElementById(elementID).align |
alt | NN すべて IE すべて HTML すべて |
alt="textMessage" | 必要 |
現在はグラフィックブラウザが氾濫しているため、イメージをダウンロードできないブラウザが存在することや、イメージのダウンロードを選択できないユーザーがいることが忘れられがちです。VT100 端末で Lynx などのブラウザを使用しているユーザーもいますし、ポケットコンピュータなどではイメージをダウンロードや表示しないとパフォーマンスが高くなることもよくあります。視覚障害のあるユーザーはイメージを見ることができない場合がありますが、どのようなイメージであるかがわかれば便利です。テキスト専用のブラウザでは、ページの img 要素が表示される位置に img 要素の alt 属性に指定されたテキストが表示されます。ページのテキストを読み上げるブラウザでは、alt のテキストが読み上げられます。alt 属性には、イメージについての簡単な説明 (スペースを埋めるためのイメージの場合は空の文字列) を記述します。HTML 勧告では、alt を重要な属性と位置付けており、この属性を img 要素の必須属性として使用することを推奨しています。 |
|
例 | |
<IMG src="navbar.gif" usemap="#nav" alt="Navigation Bar" width="400" height="50"> |
|
値 | |
引用符で囲んだ文字列 |
|
既定値 | |
なし |
|
オブジェクト参照 | |
[window.]document.imageName.alt [window.]document.images[i].alt [window.]document.getElementById(elementID).alt |
border | NN すべて IE すべて HTML 3.2 |
border="pixels" | オプション |
img 要素の周囲のボーダーの太さを制御します。デフォルトではボーダーは黒ですが、img 要素が a 要素内にある場合には、ボーダーの色はドキュメントのリンクの色になります。この色はリンクの状態によって異なります。標準的なボーダーに別の色を指定する場合には、スタイルシートを使用して Navigator 4 用の適切な div または span で囲みます。イメージの周りがリンクになっている場合には、border 属性の値を 0 に設定すると色付きのボーダーを削除することができます。 |
|
例 | |
<IMG src="surferDude.gif" alt="Surfer" border="3" height="100" width="200"> |
|
値 | |
整数ピクセル値 |
|
既定値 | |
0 |
|
オブジェクト参照 | |
[window.]document.imageName.border [window.]document.images[i].border [window.]document.getElementById(elementID).border |
datafld | NN n/a IE 4 HTML n/a |
datafld="columnName" | オプション |
IE のデータバインディングと共に使用して、リモートデータソース列名と img 要素の src 属性の URL とを関連付けます。img 要素に対しは datasrc 属性も設定する必要があります。Macintosh 版 IE 5 ではテキストファイルのデータソースに対してのみ機能します。 |
|
例 | |
<IMG datasrc="DBSRC3" alt="Current Radar" datafld="img3URL" height="100" width="150"> |
|
値 | |
大文字と小文字を区別する識別子 |
|
既定値 | |
なし |
|
オブジェクト参照 | |
[window.]document.imageName.dataFld [window.]document.images[i].dataFld [window.]document.getElementById(elementID).dataFld |
datasrc | NN なし IE 4 HTML なし |
datasrc="dataSourceName" | オプション |
IE のデータバインディングと共に使用して、リモートデータアクセス用にデータソースオブジェクトを読み込むページの object 要素の ID を示します。データソースからのコンテンツは datafld 属性によって設定されます。Macintosh 版 IE 5 ではテキストファイルのデータソースに対してのみ機能します。 |
|
例 | |
<IMG datasrc="DBSRC3" alt="Current Radar" datafld="img3URL" height="100" width="150"> |
|
値 | |
大文字と小文字を区別する識別子 |
|
既定値 | |
なし |
|
オブジェクト参照 | |
[window.]document.imageName.dataSrc [window.]document.images[i].dataSrc [window.]document.getElementById(elementID).dataSrc |
dynsrc | NN なし IE 4 HTML なし |
dynsrc="URL" | オプション |
Internet Explorer 4 以降では、ビデオクリップ (および VRML) を (embed または object 要素の代わりに) img 要素を介して表示できます。ブラウザが動的イメージソースと静的イメージソースとを区別できるようにするために、src 属性の代わりに dynsrc 属性を使用してビデオクリップを読み込みます。img 要素のその他の視覚的な特徴は、ビデオクリップを再生するための領域に直接適用されます。また、クリップの再生回数を制御する loop 属性や、start 属性も参照してください。 |
|
例 | |
<IMG dynsrc="snowman.avi" loop="3" height="100" width="150"> |
|
値 | |
絶対 URL または相対 URL を含む有効な URL。 |
|
既定値 | |
なし |
|
オブジェクト参照 | |
[window.]document.images[i].dynsrc [window.]document.imageName.dynsrc [window.]document.getElementById(elementID).dynsrc |
galleryimg | NN なし IE 6 HTML なし |
dynsrc="featureSwitch" | オプション |
高さと幅が 130 ピクセル以上のイメージで、マウスのロールオーバー時に Windows OS の [マイピクチャ] ツールバーを表示するかどうかを設定します。このツールバーには、クリックするだけでイメージの保存、印刷、電子メール送信を行うことができるショートカットが表示されます。このツールバーに表示されるボタンを変更することはできません。 |
|
例 | |
<IMG src="rushmore.jpg" alt="Mount Rushmore" height="240" width="550" galleryimg="no"> |
|
値 | |
定数値 : yes | true | no | false |
|
既定値 | |
yes |
|
オブジェクト参照 | |
[window.]document.images[i].galleryImg [window.]document.imageName.galleryImg [window.]document.getElementById(elementID).galleryImg |
height、width | NN すべて IE すべて HTML 3.2 |
height="length" width="length" | オプション |
イメージの実際のサイズに関係なく、ページ上でイメージ用に予約される領域のサイズを定義します。最高のパフォーマンスを得るため、また以前のスクリプトとの互換性を保つため、これらの属性を実際のソースイメージのピクセル単位の高さと幅に設定します。実際のサイズと異なるサイズを指定すると、そのサイズに合わせてイメージが拡大または縮小されます。 |
|
例 | |
<IMG src="surferDude.gif" alt="Surfer" height="100" width="200"> |
|
値 | |
正の整数値 (引用符で囲むことも可能) または引用符で囲んだパーセント値 |
|
既定値 | |
ソースイメージの実際のサイズ |
|
オブジェクト参照 | |
[window.]document.imageName.height [window.]document.images[i].height [window.]document.getElementById(elementID).height [window.]document.imageName.width [window.]document.images[i].width [window.]document.getElementById(elementID).width |
hspace、vspace | NN すべて IE すべて HTML 3.2 |
hspace="pixelCount" vspace="pixelCount" | オプション |
img 要素の表示コンテンツの周りで空白スペースとして機能するマージンを定義します。hspace はイメージ領域の左右マージンを設定し、vspace はイメージ領域の上下マージンを設定します。 HTML 4 では、これらの要素の代わりにマージンおよび余白関連の CSS 属性が使用されます。 |
|
例 | |
<IMG src="desk3.gif" alt="My Desktop" vspace="10" hspace="10"> |
|
値 | |
img 要素の領域の該当する側にあるマージン幅をピクセル数で示す整数 |
|
既定値 | |
0 |
|
オブジェクト参照 | |
[window.]document.imageName.hspace [window.]document.images[i].hspace [window.]document.getElementById(elementID).hspace [window.]document.imageName.vspace [window.]document.images[i].vspace [window.]document.getElementById(elementID).vspace |
id | NN 4 IE 4 HTML 4 |
id="elementIdentifier" | オプション |
この要素をドキュメント中のその他すべての要素から区別するための固有の識別子。この属性を使用すれば、この属性の値を ID セレクタの名前とするスタイル規則に特定の要素を関連付けることができます。要素には、識別用の固有の ID とグループへの所属を示すクラスを指定できます。第 3 章を参照してください。 IE 4 以降および Netscape 6 では、表示可能ではない要素について id 属性を使用できますが、コードの妥当性検証の必要がある場合、W3C HTML 4 および XHTML DTD では妥当性は検証されません。すべての W3C DOM 要素には id プロパティがあるので、スクリプトでこれらの要素を参照する必要がある場合は、表示可能ではない要素にも id 属性を指定するのが自然です。または、スクリプトで別の方法 (document.getElementsByTagName( ) によって返される配列など) を使って、このような要素を参照することもできます。 id 属性に識別子を割り当てるのは、以前は name 属性を使用する要素の name 属性にのみ割り当てられていた値をコピーするためです。現在のブラウザのフォームコントロールでは、フォームと共に送信される「名前/値」のペアで name 属性を必要としており、アンカーとして機能する要素でも name 属性が必要です。スクリプトで参照する予定があるすべての要素の id 属性に識別子を割り当てます。 |
|
例 | |
<H2 id="sect3Head">Section Three</H2> |
|
値 | |
大文字と小文字を区別する識別子 |
|
既定値 | |
なし |
|
オブジェクト参照 | |
[window.]document.getElementById(elementID).id
|
ismap | NN すべて IE すべて HTML すべて |
ismap | オプション |
ブールの ismap 属性は、img 要素がサーバー側のイメージマップとして機能することをブラウザに指示します。イメージをサーバー側のイメージマップにするには、img 要素を a 要素で囲み、この要素の href 属性にクリック座標情報を理解できる CGI プログラムの URL を指定します。ブラウザはクリックに関する座標情報を URL に追加します。これは GET フォームメソッドがフォーム要素データを action 属性の URL に追加することに似ています。次の例で、ユーザーが 50, 25 の座標点をクリックすると、ブラウザは "http://www.giantco.com/cgi-bin/nav.pl?50,25" をサーバーに送信します。nav.pl という名前のサーバー CGI プログラムは座標点が表示されている領域を確認し、該当する HTML をクライアントに送信します。 最近のブラウザではクライアント側のイメージマップ (usemap 属性を参照) を使用できます。クライアント側のイメージマップを使用すると、クリック座標点を確認するためのサーバーとの通信がないため、ユーザーにとって操作が速くなります。 |
|
例 | |
<A href="http://www.giantco.com/cgi-bin/nav" target="main"> <IMG src="navbar.gif" alt="Navigation Bar" ismap height="90" width="120"> </A> |
|
値 | |
この属性があると、該当する機能が有効になります。 |
|
既定値 | |
Off |
|
オブジェクト参照 | |
[window.]document.imageName.isMap [window.]document.images[i].isMap [window.]document.getElementById(elementID).isMap |
lang | NN 3 IE 4 HTML 4 |
lang="languageCode" | オプション |
要素の属性値およびコンテンツに使用される言語。ブラウザはこの情報を使用して、合字 (特定のフォントでサポートされたり、書き言葉で必要になった場合)、疑問符、およびハイフネーションの処理などの詳細に関して、コンテンツの適切な表示を行います。その他のアプリケーションや検索エンジンでは、スペルチェック辞書の選択やインデックスの作成にこの情報を利用する場合があります。 |
|
例 | |
<SPAN lang="de">Deutsche Bundesbahn</SPAN> |
|
値 | |
大文字と小文字を区別しない言語コード |
|
既定値 | |
ブラウザの既定値 |
|
オブジェクト参照 | |
[window.]document.getElementById(elementID).lang
|
longdesc | NN 6 IE 6 HTML 4 |
longdesc="URL" | オプション |
alt または title 属性のコンテンツよりも長い要素説明があるドキュメントの URL を示します。今後のブラウザにおけるこの属性の用途の 1 つは、ブラウザ画面を読むことができないユーザーのために、要素の説明を抽出することです。Netscape 6 でこの要素のコンテキストメニューに表示される [プロパティ] をクリックすると、この属性に指定された URL へのアクティブなリンクが小さなウィンドウに表示されます。バージョン 6 のブラウザでは、この属性にその他の機能はありません。 |
|
例 | |
<IMG longdesc="navDesc.html" alt="Navigation Bar" src="navbar.jpg"> |
|
値 | |
絶対 URL または相対 URL を含む有効な URL。 |
|
既定値 | |
なし |
|
オブジェクト参照 | |
[window.]document.imageName.longDesc [window.]document.images[i].longDesc [window.]document.getElementById(elementID).longDesc |
loop | NN なし IE 3 HTML なし |
loop="loopCount" | オプション |
dynsrc 属性にビデオクリップを指定すると、loop 属性によって読み込み後のビデオクリップの再生回数 (ループ) が制御されます。値を 0 に設定すると、クリップは読み込まれますが再生されません。ユーザーがイメージをダブルクリップするとビデオクリップが再生されますが、他にコントロールがないため、ページ上でその後の指示を表示する必要があります。この属性はアニメーション .gif の再生は制御しません。 |
|
例 | |
<IMG dynsrc="snowman.avi" alt="Snowman Movie"loop="3" height="100" width="150"> |
|
値 | |
正の整数または 0 |
|
既定値 | |
1 |
|
オブジェクト参照 | |
[window.]document.imageName.loop [window.]document.images[i].loop [window.]document.getElementById(elementID).loop |
lowsrc | NN 3 IE 4 HTML なし |
lowsrc="URL" | オプション |
Navigator でも Internet Explorer でも、すべてのユーザーが高速でインターネットに接続しているわけではないこと、そして高解像度のイメージはダウンロードに時間がかかることは認識されています。これに対応するために lowsrc 属性を使用すると、低解像度の (または代用の) イメージのある URL を指定してドキュメント領域にダウンロードできます。lowsrc 属性に指定するイメージは、src 属性に指定されている元のイメージと同じピクセルサイズである必要があります。 |
|
例 | |
<IMG src="navbar.jpg" alt="Navigation Bar" lowsrc="navbarBW.jpg" height="60" width="300"> |
|
値 | |
絶対 URL または相対 URL を含む有効な URL。 |
|
既定値 | |
なし |
|
オブジェクト参照 | |
[window.]document.imageName.lowsrc [window.]document.images[i].lowsrc [window.]document.getElementById(elementID).lowsrc |
name | NN 3 IE 4 HTML 4 |
name="elementIdentifier" | オプション |
イメージをスクリプト処理する場合、特に事前にキャッシュされたイメージをスワップする場合は、下位互換性を保つためのスクリプトでは name 属性を利用して img オブジェクトを参照します。これは id 属性がまだなかったためです。名前による参照は、document.images 配列の数値インデックスよりも確実です。イメージをいつでも再配置または削除でき、残りの名前によるイメージへの参照も保持されるからです。最近のブラウザ専用に使用する場合は、name 属性の代わりに id 属性を使用できます。 |
|
例 | |
<IMG name="mugshot" id="mugshot" alt="My face" src="janem.jpg" height="90" width="80"> |
|
値 | |
大文字と小文字を区別する識別子 |
|
既定値 | |
なし |
|
オブジェクト参照 | |
[window.]document.images[i].name [window.]document.imageName.name [window.]document.getElementById(elementID).name |
src | NN すべて IE すべて HTML すべて |
src="URL" | 必要 |
img 要素を介して表示されるイメージデータを保存したファイルへの URL。Internet Explorer でビデオクリップ用に dynsrc 属性を指定する場合または IE のデータバインディング用に datasrc を指定する場合を除き、img 要素の領域にイメージを表示するには src 属性を必ず指定する必要があります。ブラウザには MIME タイプのイメージの処理機能が必要です。Web で最も一般的なイメージフォーマットは GIF と JPEG です。HTML や XHTML の妥当性の検証には src 属性が必要であり、IE の代替属性は使用できません。 |
|
例 | |
<IMG src="surferDude.gif" alt="Surfer" height="100" width="200"> |
|
値 | |
絶対 URL または相対 URL |
|
既定値 | |
なし |
|
オブジェクト参照 | |
[window.]document.images[i].src [window.]document.imageName.src [window.]document.getElementById(elementID).src |
start | NN なし IE 4 HTML なし |
start="videoStartType" | オプション |
img の dynsrc 属性を設定して Internet Explorer でビデオクリップを表示する場合、ビデオファイルのダウンロード直後に再生するように設定するか、またはユーザーがイメージ上にカーソルを移動したら再生するように設定できます。start 属性を使用すると、ページに最も適したユーザーインターフェイスを選択できます。 |
|
例 | |
<IMG dynsrc="snowman.avi" loop="1" start="mouseover" height="100" width="150"> |
|
値 | |
大文字と小文字が区別されない値 : fileopen | mouseover |
|
既定値 | |
fileopen |
|
オブジェクト参照 | |
[window.]document.images[i].start [window.]document.imageName.start [window.]document.getElementById(elementID).start |
style | NN 4 IE 4 HTML 4 |
style="styleSheetProperties" | オプション |
この属性を使用すると、現在の要素のスタイルシート規則プロパティ割り当てを設定できます。スタイル属性の割り当てには、CSS または JavaScript (Navigator 4 のみ) 構文を使用できます。style 属性は表示可能な要素についてのみ使用します。 |
|
例 | |
<SPAN style="color:green; font-size:18px">Big, green, and bold</SPAN> |
|
値 | |
CSS 構文のスタイルシート規則全体は引用符によって囲まれます。複数のスタイル属性設定はセミコロンで区切られます。スタイルシート属性の詳細については、第 11 章を参照してください。 |
|
既定値 | |
なし |
|
オブジェクト参照 | |
[window.]document.getElementById(elementID).style
|
suppress | NN |4| IE なし HTML なし |
suppress="featureSwitch" | オプション |
この属性を設定すると、Navigator 4 でイメージのダウンロード中に汎用イメージアイコン、alt テキスト、およびフローティングイメージ領域が表示されなくなります。イメージを読み込めない場合は、この属性を無効にしている場合と同様の表示が行われます。 |
|
例 | |
<IMG src="surferDude.gif" alt="Surfer" height="150" width="250" suppress="true"> |
|
値 | |
ブールの文字列値 : true | false |
|
既定値 | |
false |
usemap | NN すべて IE すべて HTML 3.2 |
usemap="mapURL" | オプション |
map および area 要素を利用すると、クライアント側のイメージマップを定義できます。map 要素は 1 つ以上の area 要素用の名前の付いたコンテナです。各 area 要素はイメージ上にホットスポットを設定し、ユーザーがその領域をクリックした場合のリンク先 (およびその他の設定) を指定します。usemap 属性の目的は、同じドキュメント内の img 要素と名前の付いた map 要素との関係を設定することです。map 要素はアンカーのように map 要素の名前の前に # を付けて指定します。 |
|
例 | |
<IMG src="navbar.gif" alt="Navigation Bar" usemap="#navigation" height="90" width="120"> |
|
値 | |
同じドキュメント内の map 要素への URL (シャープ記号と map 名) |
|
既定値 | |
なし |
|
オブジェクト参照 | |
[window.]document.imageName.useMap [window.]document.images[i].useMap [window.]document.getElementById(elementID).useMap |
vspace | |
hspace を参照してください。 |
width | |
height を参照してください。 |