HTML <img /> tagS2C Home   « HTML <img /> tag

Definition

The <img /> tag is a self closing tag used to create an area on the page to hold the referenced image.

Example


<img src="http://server2client.com/images/chickenpiesmall.jpg"
     alt="Chicken Pie" />

Required Attributes

src attribute specifies the URL of the image (the actual location where the image is stored).


<img src="http://server2client.com/images/chickenpiesmall.jpg"
     alt="Chicken Pie" />

alt attribute specifies an alternate text for the image (provides information if the image cannot be loaded).


<img src="http://server2client.com/images/chickenpiesmall.jpg"
     alt="Chicken Pie" />

Optional Attributes

align - this attribute is deprecated, use CSS instead.

border - this attribute is deprecated, use CSS instead.

hspace - this attribute is deprecated, use CSS instead.

vspace - this attribute is deprecated, use CSS instead.

ismap - use the usemap attribute instead.

height specifies the height of the image (you can make the image taller or shorter).


<img src="http://server2client.com/images/chickenpiesmall.jpg"
     alt="Chicken Pie" 
     height="200" />

longdesc specifies the URL location of a document holding a long description of the image.


<img src="http://server2client.com/images/chickenpiesmall.jpg"
     alt="Chicken Pie" 
     longdesc="URL location" />

width specifies the width of the image (you can make the image narrower or wider).


<img src="http://server2client.com/images/chickenpiesmall.jpg"
     alt="Chicken Pie" 
     width="300" />

usemap specifies the image as a client side map image.


<img src="http://server2client.com/images/chickenpiesmall.jpg"
     alt="Chicken Pie" 
     usemap="#mapname" />

Common Attributes

class - specifies a classname for the element allowing you to apply the style of the predefined class to the content.


<img src="http://server2client.com/images/chickenpiesmall.jpg"
     alt="Chicken Pie" 
     class="classname" />

id - specifies a unique id for the element allowing you to apply the style of the predefined id to the content.


<img src="http://server2client.com/images/chickenpiesmall.jpg"
     alt="Chicken Pie" 
     id="idname" />

style - specifies an inline style for the element allowing you to apply the style to the content.


<img src="http://server2client.com/images/chickenpiesmall.jpg"
     alt="Chicken Pie" 
     style="color:red;text-align:left" />

title - specifies extra information about the content.


<img src="http://server2client.com/images/chickenpiesmall.jpg"
     alt="Chicken Pie" 
     title="information about the content" />

Language Attributes

dir - specifies the directional flow of the content.


<!-- The text will flow from left to right -->
<img src="http://server2client.com/images/chickenpiesmall.jpg"
     alt="Chicken Pie" 
     dir="ltr" />

<!-- The text will flow from right to left -->
<img src="http://server2client.com/images/chickenpiesmall.jpg"
     alt="Chicken Pie" 
     dir="rtl" />

lang - specifies a language code for the content of the element.


<img src="http://server2client.com/images/chickenpiesmall.jpg"
     alt="Chicken Pie" 
     lang="en" />

xml:lang - specifies a language code for the content of the element in XHTML documents.


<img src="http://server2client.com/images/chickenpiesmall.jpg"
     alt="Chicken Pie" 
     xml:lang="fr" />

Document Event Attributes

NONE

Form Event Attributes

NONE

Image Event Attributes

onabort - The JavaScript code to be run when the loading of an image is interrupted.


<!-- Executes the go() function -->
<img src="http://server2client.com/images/chickenpiesmall.jpg"
     alt="Chicken Pie" 
     onabort="go()" />

Keyboard Event Attributes

onkeydown - The JavaScript code to be run when an element is in focus and keyboard key is pressed down and released.


<!-- Executes the go() function -->
<img src="http://server2client.com/images/chickenpiesmall.jpg"
     alt="Chicken Pie" 
     onkeydown="go()" />

onkeypress - The JavaScript code to be run when an element is in focus and keyboard key is pressed down and released.


<!-- Executes the go() function -->
<img src="http://server2client.com/images/chickenpiesmall.jpg"
     alt="Chicken Pie" 
     onkeypress="go()" />

onkeyup - The JavaScript code to be run when an element is in focus and keyboard key is released.


<!-- Executes the go() function -->
<img src="http://server2client.com/images/chickenpiesmall.jpg"
     alt="Chicken Pie" 
     onkeyup="go()" />

Mouse Event Attributes

onclick - The JavaScript code to be run when a mouse is clicked on the element.


<!-- Executes the go() function -->
<img src="http://server2client.com/images/chickenpiesmall.jpg"
     alt="Chicken Pie" 
     onclick="go()" />

ondblclick - The JavaScript code to be run when a mouse is double clicked on the element.


<!-- Executes the go() function -->
<img src="http://server2client.com/images/chickenpiesmall.jpg"
     alt="Chicken Pie" 
     ondblclick="go()" />

onmousedown - The JavaScript code to be run when the mouse button is pressed down while the cursor is over the element.


<!-- Executes the go() function -->
<img src="http://server2client.com/images/chickenpiesmall.jpg"
     alt="Chicken Pie" 
     onmousedown="go()" />

onmousemove - The JavaScript code to be run when the mouse button is moved.


<!-- Executes the go() function -->
<img src="http://server2client.com/images/chickenpiesmall.jpg"
     alt="Chicken Pie" 
     onmousemove="go()" />

onmouseout - The JavaScript code to be run when the mouse cursor moves off an element.


<!-- Executes the go() function -->
<img src="http://server2client.com/images/chickenpiesmall.jpg"
     alt="Chicken Pie" 
     onmouseout="go()" />

onmouseover - The JavaScript code to be run when the mouse cursor moves over an element.


<!-- Executes the go() function -->
<img src="http://server2client.com/images/chickenpiesmall.jpg"
     alt="Chicken Pie" 
     onmouseover="go()" />

onmouseup - The JavaScript code to be run when the mouse button is released while the cursor is over the element.


<!-- Executes the go() function -->
<img src="http://server2client.com/images/chickenpiesmall.jpg"
     alt="Chicken Pie" 
     onmouseup="go()" />

go to home page Homepage go to top of page Top