Image in HTML

Images

Adding Images Using the < img > Element
Images are added to a site using the < img > element, which has to carry at least two attributes: the
src attribute, indicating the source of the image, and an alt attribute, which provides a

description of the image.

<img src=”logo.gif” alt=”sitelogo” / >

the < img > element can carry the following attributes:

src alt align border height width hspace vspace ismap usemap longdesc name

The src Attribute

The src attribute tells the browser where to find the image.

< img src=”logo.gif” / >

The alt Attribute

The alt attribute must appear on every < img > element and its value should be a text description of the image.

< img src=”logo.gif” alt=”site logo” / >

Often referred to as alt text , it is important that the value of this attribute really describe the

image because:

If the browser cannot display the image, this text alternative will be shown instead.

The height and width Attributes

The height and width attributes specify the height and width of the image, and the values for these attributes are almost always shown in pixels .

.

< img src=”logo.gif” alt=”site Logo” height=”120” width=”180” / >

The align Attribute (Deprecated)

The align attribute was created to align an image within the page (or if the image is inside an element that is smaller than the full page, it aligns the image within that element).

<img src=”images/sublogo.gif” alt=”sub logo” align=”left” />

The border Attribute (Deprecated)

A border is a line that can appear around an image or other element. By default, images do not have borders, so you would only have used this attribute if you wanted to create a border around an image.

The border attribute was created to specify the width of the border in pixels:

< img src=”images/logo.gif” alt=”Logo” border=”2” / >

The hspace and vspace Attributes (Deprecated)

The hspace and vspace attributes can be used to control the amount of white space around an image.

< img src=”images/logo.gif” alt=” Logo” hspace=”10” vspace=”14” / >

The name Attribute (Deprecated)

The name attribute allows you to specify a name for the image so that it can then be referenced from script code. It is the predecessor to, and has been replaced by, the id attribute.

name=”image_name”

Using Images as Links

It ’ s easy to turn an image into a link; rather than putting text between the opening < a > tag and the closing < /a > tag (as you saw in the last chapter), you simply place an image inside these tags. Images are often used to create graphical buttons or links to other pages, as follows ( ch03_eg06.html ):

< a href=”../index.html” title=”Click here to return to the home page” >

< img src=”images/logo.gif” width=”338” height=”79” alt=”Wrox Logo” / >

< /a >

Image Maps

Image maps allow you to add multiple links to the same image, with each link pointing to a different page. They are particularly helpful when the image needs to be divided up in irregular shapes (such as maps). Each of these clickable areas is known as a hotspot .

Browsers tend to support three common bitmap graphics formats, and most graphics programs will save images in these formats:

GIF: Graphics Interchange Format (pronounced either “ gif ” or “ jif ” )

JPEG: Joint Photographic Experts Group Format (pronounced “ jay peg ” )

PNG: Portable Network Graphics (pronounced “ pee en gee ” or “ ping ” )