Framify

Tag: <img>

<img> Syntax

Syntax Diagram for <img>
Open Parameter = Value Close
<img src = "url" >
lowsrc = "url"
alt = "text"
align = top
middle
bottom
texttop
absmiddle
baseline
absbottom
left
right
width = pixels
height
hspace
vspace
border
ismap
usemap = "url"
name = "name"

<img> Description

The <img> tag places the specified image in the document. Most browsers can handle GIF (Graphic Interchange Format) and JPEG (Joint Photographic Experts' Group) images without resorting to a "helper," an external program brought to bear when a file with a particular suffix is accessed through the browser.
src
Specifies the source image, which may or may not be on the same machine as the HTML document.
lowsrc
Specifies a low-quality (and presumably smaller) version of the source image specified in the "src=" parameter. The purpose for this tag is to allow a functional-but-not-glitzy version of an image to be loaded quickly, and then the high-quality-but-slower-loading file afterwards. This is usually used to allow navigation via an image map without waiting for the glitzy version to download. Obviously, this is more of an issue for those with slow connections to the server.

Note that the low-quality image is often a 1-bit GIF to minimize file size, but this image probably should not contain dithering to simulate gray shades, as the dithering patterns do not compress well--try to stick to larger areas of black and white. You could also use a highly compressed and therefore low-quality JPEG file, but the blockiness resulting from high JPEG compression could result in text becoming unreadable: often undesirable for image-map purposes.

alt
Specifies the "alternate text," that text that is displayed if the image itself isn't transmitted successfully (whether because of actual transmission problems or because the user clicked the Stop button), or if the user turns off images to save download time.
align
Specifies the image's alignment, relative to surrounding elements. The alignment values fall into two categories: vertical alignment and horizontal alignment. The values pertaining to vertical alignment are as follows:

The values pertaining to horizontal alignment (which cause "floating images") are as follows:

If two images, one with align=left and the other with align=right, are close to each other, the wraparound text will proceed through the channel that exists between them. If there is not room in the current window/frame width to allow the two images to exists side by side, the second one will move down until sufficient room is available.

width, height
Specify the size of the image on the displayed (which may be different from the size of the image in the file). By using the width and height parameters, you can resize an image to make it larger or smaller than it would be by default.

Note: even if you are displaying an image at its actual size, it is recommended to specify its width and height, as this allows the browser to allocate the required screen real estate and go on with displaying subsequent parts of the document. If you do not specify width and height, the browser must wait until the image (or at least part of it) is loaded to determine its dimensions, before displaying subsequent parts of the document. The result of this is slower document loading without width/height specifiers, versus faster document loading with width/height specifiers.

hspace, vspace
Specify, for images with align=left or align=right, the amount of horizontal and vertical space to allot around the image. The hspace and vspace parameters all you to control how close the wraparound text is able to get to the image--if text gets too close to the image, the whole page's appearance is degraded. Note that hspace and vspace apply only to images aligned left and right; they have no effect on other alignments.
border
Specifies with thickness of the border around the image. The default value differs, depending on whether the image is hyperlinked (default=1) or not (default=0). The color of the border is the same as the text color if the image is not a hyperlink, and the same as the link or the vlink color if it is a hyperlink (see <body> for details on these).
ismap
Specifies whether or not this image is an image map (see also usemap, below).
usemap
Specifies the url of the image-map specifier to use, which will associate certain areas of the image with corresponding URLs, allowing the user to click in multiple areas of the image, and loading a different document each time. See <map> for usage.
name
Specifies the name to be associated with the image. This is typically used in conjunction with JavaScript code, which must have some way of identifying individual images, as in button rollover. See the button-rollover example below for details.

Small images can be used to bolster HTML's less-than-stellar handling of extended character sets. While there is a "standard" HTML character set called the ISO 8859 set, different browsers on different platforms (Mac, UNIX, PC) don't handle all the characters consistently. One way around this is to use small inline images. For each character in the table below, its name, its real typographical appearance, its typical ASCII approximation, and the <img> tag used to access the image file, are shown (of course, the "../symbols/" pathname used below is likely to be different in your pages). The images below used to be XBM (X BitMap) files, but they were changed to GIFs with transparent backgrounds when it was discovered the Internet Explorer couldn't handle XBM images.

Character Real ASCII Tag Used
Angle Brackets  (c) 
 > 
<
>
 <img src="../symbols/LAngle.gif" alt="&lt;"> 
 <img src="../symbols/RAngle.gif" alt="&gt;"> 
Bullet * *  <img src="../symbols/Bullet.gif" alt="*"> 
Copyright (c) (c)  <img src="../symbols/C.gif" alt="(c)"> 
Degrees  degrees deg  <img src="../symbols/Degrees.gif" alt="deg"> 
Em Dash -- --  <img src="../symbols/EmDash.gif" alt="--"> 
Approximately Equals
Less Than or Equal To
Greater Than or Equal To
Not Equal To
 ~= 
 <= 
 >= 
 /= 
~=
<=
>=
/=
 <img src="../symbols/Approx.gif" alt="~="> 
 <img src="../symbols/LessEq.gif" alt="&lt;="> 
 <img src="../symbols/GreatEq.gif" alt="&gt;="> 
 <img src="../symbols/NotEq.gif" alt="/="> 
Pi pi pi  <img src="../symbols/Pi.gif" alt="pi"> 
Prime ' '  <img src="../symbols/Prime.gif" alt="'"> 
Registered (R) (R)  <img src="../symbols/R.gif" alt="(R)"> 
Right Arrow -> ->  <img src="../symbols/RArrow.gif" alt="-&gt;"> 
Multiplication x x  <img src="../symbols/Times.gif" alt="x"> 
Trademark (TM) (TM)  <img src="../symbols/TM.gif" alt="(TM)"> 
Vertical Ellipsis ... ...  <img src="../symbols/VEllipsis.gif" alt="..."> 

The advantages of using the ISO 8859 characters is that they obey the current character attributes (e.g., size, color, etc.), as specified by the user's browser or the page's tags; the disadvantages are that the the characters you need may not eist in the ISO 8859 set, and even some of those that do, differ from platform to platform. The advantages of using inline images like the ones in the table above, is that you can represent any character you need, but the disadvantage is that they do not obey current character attributes.

<img> Examples

The <img> is complex enough to warrant several examples. To more fully appreciate how the various alignment parameters affect behavior, change the window and/or frame width and see what effects result.
This markup: Here is a photo of Earth <img src="Earth.jpg" lowsrc="EarthLow.gif" alt="The Earth" align=top> taken by Apollo 11 astronauts. . . .causes the following to be displayed:
Here is a photo of Earth The Earth taken by Apollo 11 astronauts.

This markup: Here is a photo of Earth <img src="Earth.jpg" alt="The Earth" align=baseline> taken by Apollo 11 astronauts. . . .causes the following to be displayed:
Here is a photo of Earth The Earth taken by Apollo 11 astronauts.

This markup: Here is a photo of Earth <img src="Earth.jpg" alt="The Earth" width=30 height=30 align=absmiddle> taken by Apollo 11 astronauts. . . .causes the following to be displayed:
Here is a photo of Earth The Earth taken by Apollo 11 astronauts.

This markup: <img src="Earth.jpg" width=200 height=100 align=left>Here is a photo of Earth taken by Apollo 11 astronauts. This view of Earth was photographed from during Apollo 11's translunar journey toward the Moon. The spacecraft was already about 10,000 nautical miles from Earth when this picture was taken. Portions of the landmass of North America and Central America can be seen. . . .causes the following to be displayed:
Here is a photo of Earth taken by Apollo 11 astronauts. This view of Earth was photographed from during Apollo 11's translunar journey toward the Moon. The spacecraft was already about 10,000 nautical miles from Earth when this picture was taken. Portions of the landmass of North America and Central America can be seen.

This markup: <img src="Earth.jpg" width=170 height=170 align=left vspace=20> <img src="Moon.jpg" width=190 height=190 align=right hspace=20> Here is a photo of Earth taken by Apollo 11 astronauts. This view of Earth was photographed from during Apollo 11's translunar journey toward the Moon. The spacecraft was already about 10,000 nautical miles from Earth when this picture was taken. Portions of the landmass of North America and Central America can be seen. . . .causes the following to be displayed:
Here is a photo of Earth taken by Apollo 11 astronauts. This view of Earth was photographed from during Apollo 11's translunar journey toward the Moon. The spacecraft was already about 10,000 nautical miles from Earth when this picture was taken. Portions of the landmass of North America and Central America can be seen.

This markup: Here is a photo of Earth <a href="hr.html"><img src="Earth.jpg" border=10 align=left></a> taken by Apollo 11 astronauts. . . .causes the following to be displayed:
Here is a photo of Earth taken by Apollo 11 astronauts. This view of Earth was photographed from during Apollo 11's translunar journey toward the Moon. The spacecraft was already about 10,000 nautical miles from Earth when this picture was taken. Portions of the landmass of North America and Central America can be seen.


This markup, which uses the name attribute of the <img> tag in conjunction with some simple JavaScript code, implements button rollover and a custom message in the status line: <html> <head> <script language="JavaScript"> <!-- var HomeMsg = "The home page: address, phone, etc."; function ChangeBtn(Btn, State) { eval("document." + Btn + ".src=\042" + Btn + State + ".gif\042; " + "status=" + Btn + "Msg"); } // --> </script> </head> <body> <a href="Welcome.html" onMouseOver="ChangeBtn('Home', 1)" onMouseOut="ChangeBtn('Home', 0)"><img src="Home0.gif" alt="Home" name="Home" width=100 height=32 border=0></a> ... . . .causes the following to be displayed (move your mouse over the button to see the rollover in action):
Home

Last Modified: Thursday, 24-Dec-2009 14:41:32 MST