Images

HTML allows for the placement of images within a document. This is done by using the <img> tag and a few attributes of the tag.

<img  src="imagefile.jpg" width="imagewidth"  height="imageheight" alt="alternate text"  border="0" />

The src attribute of the img tag describes the path to the image, as well as the image file name and extension. The width and height attributes specify the size of the image in pixels. Pixels are a unit of measurement used on the web to specify dimensions of HTML elements. The alt tag is used to describe the image. In the case where a web browser can’t display an image, then alt text will be shown. The alt text also comes in useful for people with disabilities viewing the page. In some cases, the image may render with a border by default, but this can be avoided by using the border attribute and setting the value to 0. If an image border is desired, the value of the border attribute specifies the border thickness in pixels.

The width and height attributes help to speed up the loading of the web page by predefining the space required by the image. These attributes can be used to size an image smaller than it’s actual size, but this is not recommended because the page will still load the entire image. The image may also look distorted, especially if the smaller dimensions don’t have a 1:1 correlation with the actual size. To create smaller images, it is best to create a separate image scaled smaller with a graphics program.

Image Maps

Image maps are most often used as navigation by defining various areas of an image, using a variety of shapes and coordinates. These defined areas on the image are assigned a link through the use of the map tag.

<img  src="animage.gif" border="0" width="600"  height="400" usemap="#map" alt="An Image" />
  <map  name="map">
  <area  href="link1" shape="rect" coords="0,0,20,40"  alt="Link 1" />
  <area  href="link2" shape="circ" coords="80,100,20"  alt="Link 2" />
</map>

The usemap attribute of the img tag defines the name of the map to be used. The shape attribute of the area tag defines the linkable part of an image map. The possible values for the shape attribute are rect, circ, and poly. The rect is a rectangle with coords being left, top, right, bottom. The circ is a circle shape with coords being x center, y center, radius. The poly stands for polygon and can have an infinite number of points defined by the pattern x1, y1, … , xn, yn. All coordinate points are defined in pixels.

Popularity: unranked [?]