<IMG>

Description

<Related pages>

	How to change an image when the mouse moves over it.
	How do I use an image to submit a form?

Place an image in the document.

DTD

<!ELEMENT IMG - O EMPTY                -- Embedded image -->
<!ATTLIST IMG
  %attrs;                              -- %coreattrs, %i18n, %events --
  src         %URI;          #REQUIRED -- URI of image to embed --
  alt         %Text;         #REQUIRED -- short description --
  longdesc    %URI;          #IMPLIED  -- link to long description
                                          (complements alt) --
  height      %Length;       #IMPLIED  -- override height --
  width       %Length;       #IMPLIED  -- override width --
  usemap      %URI;          #IMPLIED  -- use client-side image map --
  ismap       (ismap)        #IMPLIED  -- use server-side image map --
  >

Attributes

Core attributes: class id style title
Internationalization attributes: dir lang
Events: onclick ondblclick onmousedown onmouseup onmouseover onmousemove onmouseout onkeypress onkeydown onkeyup

ALIGN
This attribute defines how the image is positioned on the page.

Value Description

ABSBOTTOM ¹ Aligns the bottom of the image with the bottom of the current line.
This values is not present in the HTML 4.0 Specification.

ABSMIDDLE ² Aligns the middle of the image with the middle of the current line.
This values is not present in the HTML 4.0 Specification.

BASELINE ³ Aligns the bottom of the image with the baseline of the text in the line. This value does the same as align="bottom".
This values is not present in the HTML 4.0 Specification.

BOTTOM ⁴ Aligns the bottom of the image with the baseline of the text in the line. This value does the same as align="baseline".

LEFT Places the image at the current left margin, temporarily changing this margin, so that subsequent text is flowed along the image's righthand side.

MIDDLE ⁵ Aligns the middle of the image with the baseline of the text.

RIGHT Places the image at the current right margin, temporarily changing this margin, so that subsequent text is flowed along the image's lefthand side.

TEXTTOP ⁶ Aligns the top of the image with the top of the text in the line.
This values is not present in the HTML 4.0 Specification.

TOP ⁷ Aligns the top of the image with the top of the largest item in the line.

Value	Description
ABSBOTTOM ¹	Aligns the bottom of the image with the bottom of the current line. This values is not present in the HTML 4.0 Specification.
ABSMIDDLE ²	Aligns the middle of the image with the middle of the current line. This values is not present in the HTML 4.0 Specification.
BASELINE ³	Aligns the bottom of the image with the baseline of the text in the line. This value does the same as align="bottom". This values is not present in the HTML 4.0 Specification.
BOTTOM ⁴	Aligns the bottom of the image with the baseline of the text in the line. This value does the same as align="baseline".
LEFT	Places the image at the current left margin, temporarily changing this margin, so that subsequent text is flowed along the image's righthand side.
MIDDLE ⁵	Aligns the middle of the image with the baseline of the text.
RIGHT	Places the image at the current right margin, temporarily changing this margin, so that subsequent text is flowed along the image's lefthand side.
TEXTTOP ⁶	Aligns the top of the image with the top of the text in the line. This values is not present in the HTML 4.0 Specification.
TOP ⁷	Aligns the top of the image with the top of the largest item in the line.

The numbers correspond to the example below, where you can see how the different values look:

Example 1: 2: 3: 4: 5: 6: 7:

The value LEFT and RIGHT are not included here because they effect the horizontal position on the page and not the vertical position.

The WebTV documentation only mentions the values BOTTOM, CENTER, LEFT, MIDDLE, RIGHT and TOP.

ALT
Give an alternate description of the image, which is used by browsers who cannot display images, or when the displaying images has been disabled.

Internet Explorer will show the alternate text in a box when the user holds the mousecursor some time over the image, showing the text as a hint.

BORDER
Define the size of the border which is draw around the image. Set the border to 0 if you don't want a border.
If the image is inside a <A> element the border will be draw in an alternate color to indicate a link. If you set the value to 0 be sure the image indicates that it is a link.

CONTROLS
If a video clip is specified using the DYNSRC attribute, and CONTROLS is also available a set of controls is displayed under the clip.

DYNSRC
Specifies the address of a video clip or VRML world to be displayed in the window.

HEIGHT
Specify the height of the image to the browser. Supplying this value helps the browser to define the space needed for the image without retrieving the image itself, thus speeding up the drawing of the document.
You can specify the height in pixels or as a percentage of the current height.

It is allowed to supply a height that differs from the real height of the image. The result is that the image is scaled to the given height.

HSPACE
Set the amount of space, in pixels, that the browser should keep free on the left and right sides of the image.

ISMAP
Identifies the picture as a server-side image map. Clicking the picture transmits the coordinates of the click back to the server, triggering a jump to another page. For this attribute to work the image must be inside an A element.

The location clicked is passed to the server as follows. The browser derives a new URL from the URL specified by the HREF attribute by appending '?' the x coordinate ',' and the y coordinate of the location in pixels. The link is then followed using the new URL. For instance, if the user clicked at the location x="10", y="27" then the derived URL will be:

"/cgi-bin/navbar.map?10,27"

I would recommend using the USEMAP to create a client-side image map instead of ISMAP. With server-side image maps, the x,y coordinates of the click are sent to the server, and the server decides which URL you see. With client-side image maps, the MAP that relates parts of the image to different URLs is stored in the current file. This saves a round trip to the server, and should present documents to you faster. Since the MAP information is stored in the document you are viewing, the destination URLs can be displayed in the status area as you pass the mouse over the image map.

LONGDESC
With this attribute you can supply the URI of a document that contains a long description of the image. This attribute supplements the TITLE attribute, which holds the title of the image.

This attribute can be useful for non-visual browsers.

LOOP
Specifies how many times a video clip will loop when activated. If the number is -1, or if loop="infinite" is specified, it will loop indefinitely.

The WebTV interface implements the loop attribute for use with the ani attribute. Use the loop attribute for an image to signal that an animated image should loop through its animation file forever.

LOOPDELAY
Specify the delay in milliseconds after a video clip has ended and the clip starts playing again.

LOWSRC
This attribute specifies an URL to an alternate image, with a smaller size than the final image. The browser can use this image to show the image in two steps, beginning with this image, which will load quickly because the size is smaller, and then the real image.

To reduce the size of the image to following actions can be taken :

Reduce the number of colors.
Use a higher compressed file-type, for example a JPEG-file.
Use a thumbnail of the image with a smaller width and height.

ONABORT
Specifies JavaScript code to execute when the user terminates the loading of an image.

ONERROR
Specifies the JavaScript script to execute when an error occurs with the loading of the image.

ONLOAD
Specifies the JavaScript event handler to execute when the image is loaded. The script is executed after the image has loaded.

RELOAD
Use the reload attribute to specify how frequently the image should be reloaded. By default, there is no image reloading.

SELECTED
Use the selected attribute together with the usemap attribute or the ismap attribute. With the usemap attribute, the value you set for selected is the index of an area in the initial selection in the associated client-side map. When the WebTV interface displays the page, the cursor will be positioned over this area. With the ismap attribute, the value you set for selected is the x,y pair for the initial cursor position in the image map.

Note that in either case, the coordinates for the selected attribute should be calculated relative to the image, rather than the web page. That is, the origin of the image is its top-left corner, with positive values of x going to the right and positive values of y going down.

SRC
The URL that points to the image for instance a GIF or JPEG image file. Internet Explorer also supports BMP files.

START
For video clips: specifies when the file should start playing.

Value Description

FILEOPEN The video starts playing as soon as the file is done opening. This is the default.

MOUSEOVER The video starts playing when the user moves the mouse cursor over the animation.

FILEOPEN, MOUSEOVER If both values are supplied the video will play once as soon as the file is opened and thereafter will play whenever the user moves the mouse over it.

Value	Description
FILEOPEN	The video starts playing as soon as the file is done opening. This is the default.
MOUSEOVER	The video starts playing when the user moves the mouse cursor over the animation.
FILEOPEN, MOUSEOVER	If both values are supplied the video will play once as soon as the file is opened and thereafter will play whenever the user moves the mouse over it.

TRANSPARENCY
Use the transparency attribute to allow the background to show through the image. The transparency of the image can range from 0 (fully opaque) to 100 (fully transparent). The default value for transparency is 0. Note that the WebTV interface has implemented optimizations for a transparency value of 50 that make images draw faster.

USEMAP
The USEMAP attribute indicates that it is a client-side image map. If the argument to USEMAP starts with a "#", it is assumed to be in the same document as the IMG element. See the MAP element for a description of how to specify the map itself.

VSPACE
Set the amount of space, in pixels, that the browser should keep free above and below the image.

WIDTH
Specify the width of the image to the browser. Supplying this value helps the browser to define the space needed for the image without retrieving the image itself, thus speeding up the drawing of the document.
You can specify the width in pixels or as a percentage of the current width.

It is allowed to supply a width that differs from the real width of the image. The result is that the image is scaled to the given width.

Examples

<IMG src="IMG1.jpg" alt="A bird" width="56" height="100" border="3">

<IMG src="IMG1.jpg" alt="A big bird" width="200" height="75" align="right">

Here's a client-side image map :

<MAP name="area">

 <AREA shape="circle" coords="30,24,21"                href="IMG1.html" alt="Circle">

 <AREA shape="poly"   coords="77,44,119,44,98,3,77,44" href="IMG2.html" alt="Polygon">

 <AREA shape="rect"   coords="145,4,187,44"            href="IMG3.html" alt="Rectangle">

</MAP>

<IMG src="AREA1.gif" usemap="#area" border="0" width="200" height="50" alt="Imagemap">

Here's a client-side image map : Imagemap

<IMG dynsrc="DYNSRC.avi" controls start="mouseover"

 src="IMG1.gif" alt="HTML Tag List" width="180" height="40">

Move your mousecursor over the image to start the animation.

Move your mousecursor over the image to start the animation.