Image Tag <img attributes />
HTML enables authors to display images in a document. Images make the web page look good. When a picture compliments the text on the web page, it generates more enthusiasm in the user.
The image tag is written as <img>. This is used to display an image in an HTML document. The image tag is a singular tag, which means it need not be closed as </img>. But, the latest version of HTML does not support this. In the latest version, the image tag is to be closed by putting a (/) backslash, e.g. <img/>.
The Image tag is similar to the anchor tag as discussed earlier, in the sense that the image tag alone does not perform any function. It has to include various attributes so that the image can be displayed on the page.
Attributes of <img> Tag
Src
Src is the source attribute. It indicates the location or the path of the picture to be displayed on the web page.
Example:
<img src="c:\images\myimage.jpg" />
Alt
Alt is an attribute, which displays an alternative text if the picture is not displayed on the web browser.
Example:
<img src="c:\images\myimage.jpg alt="this is my image” />
Width
The width attribute determines how wide the picture is to appear on the web page.
Example:
<img src="c:\images\myimage.jpg" alt="this is my image” width="105" />
Height
The height attribute determines the height of the picture that has to appear on the web page.
Example:
<img src="c:\images\myimage.jpg" alt="this is my image" height="100" />
Align
The align attribute sets the alignment or the position of the picture in relation to the text around it.
Example:
<img src="c:\images\myimage.jpg" alt="this is my image" align=left />
Border
The border attribute sets a border around the images. A border value greater than 0 puts a border around the image.
Example:
<img src="c:\images\myimage.jpg" alt="this is my image" align="left" border="2"/>
Map Tag <map>
A map tag is used to map an image. In other words; this image, called the mapped image, contains some regions that act as links to other documents. It is written as <map>. The user can set these regions and these regions are quite similar to a hyperlink. This is because when they are clicked on, they refer to some other document.
To create an image map, another tag called area tag is used which will be explained later.
Attribute of Map Tag
Name
The name attribute sets the name of the image map. It determines which map definition the image uses.
Example:
<map name="map1"> </map>
Area Tag
The area tag defines a region in an image map. This tag includes various attributes as it cannot function alone. It requires the href attribute to link to other documents.
Syntax:
<area attributes></area>
Attributes of Area
Href
The href tag indicates the URL that the tags links to. The syntax of this tag is similar to the anchor tag.
Example:
<area href="image1.jpg" ></area>
Alt
The alt attribute in the <area> tags works just like it works in the <img> tags. It indicates the alternative text that is to be displayed if the browser does not display the picture.
Example:
<area href="image1.jpg" alt="my image" > </area>
Cords
The cords attribute is the coordinate attribute. This tag is used with the shape attribute (the shape attribute has been described later).
It specifies the coordinates of the area that has to be clicked and indicates where the shape is located in the image map. The Cords tag is necessary when the shape attribute is set to Rect, Circle or Poly. It is not required if the shape is set to Default.
Example:
<area href="image1.jpg" alt="my image" cords="6,116,97,44" > </area>
Shape
The shape attributes indicate what shape the area is. The shape of the map must be set to the following values:
Rect
Rectangular shape indicates that the area is a rectangle. The cords attribute consists of two pair of x/y coordinates for a rectangle. The first pair sets the coordinates of the upper left corner of rectangle. The second pair sets the coordinates of the lower right corner of the rectangle.
Example:
<area href="image1.jpg" alt="my image" shape="rect" cords="6,116,97,44" > </area>
Circle
Circle shape indicates that the area is a circle. The first two numbers in the cords attribute indicate the coordinates of the centre of the circle. The next number indicates the radius of the circle.
Example:
<area href="image1.jpg" alt="my image" shape="circle" cords="60,40, 44" > </area>
Poly
Poly shape indicates that the area is some type of polygon. For a polygon each pair of coordinate in cords indicates the single corner of the polygon.
Example:
<area href="image1.jpg" alt="my image" shape="poly" cords="150,217, 190,257, 150,297, 110,257" > </area>
Default
Default indicates that the area isn’t really a shape but the href attribute applies to the whole area. In this attribute coordinates are not given.
Example:
<area href="image1.jpg" alt="my image" shape="default" > </area>
Image Formats
There are four basic formats you will find on the World Wide Web. Each is denoted to the browser by a different suffix. Remember that "name.suffix" discussion from Primer #1?
- The format was invented by Compuserve and it's very popular. The reason is that it's a simple format. It's a series of colored picture elements, or dots, known as pixels, that line up to make a picture. Your television's picture is created much the same way. Browsers can handle this format quite easily.
- .png Pronounced as "ping", this stands for Portable Network Graphic. This is ultimately the replacement for .gif, with partial transparency options, but browser support is sometimes disappointing, so try experimenting but don't expect miracles in older browsers! Even some of the newer ones don't like partial transparency.
- .jpeg or .jpg (pronounced "j-peg") There are two names to denote this format because of the PC and MAC formats allowing 3 and 4 letters after the dot. JPEG is an acronym for Joint Photographic Experts Group, the organization that invented the format.
The format is unique in that it uses compression after it's been created. That's fancy computer talk that means that when the computer is not using a .jpeg image it folds it up and puts it away. For example, if the picture is 10K bytes when displayed, it may be only 4K bytes when stored. Nice trick, huh? It saves on hard drive space, but also tends to require a bit of memory on your part to unfold the image.
Someone always writes to me to tell me that .gif images also use compression. Yes, they do, but only when they are first created into that format. After that, no compression. JPEG, on the other hand, uses compression throughout its life to fold up smaller than it really is. - .bmp (pronounced "bimp") This is a "bitmap." You will probably never place a bitmap as an image, although now Internet Explorer browsers allow it. A bitmap is an image that a computer produces and places for you. A counter is an example.