ImagesAndImageMaps

8/7/2019 ImagesAndImageMaps

1/6

Nimbus InfocomAura Of Excellence In Computer Education

7, Daan Bari

Jawahar Nagar

Kota (Rajasthan)Mobile No. : 09928088743

C, C++, DSA, VB, VB.Net, C#, ASP.Net, Java(Core & Adv), PHP+MySql, UNIX, LINUX, Oracle, PL/SQL, BCA, MCA, BTECH

Images and Image Maps

This section discusses the tags for inserting an image into a document and for creating image maps. An image map is an

image that contains one or more areas that the user can click to open another URL.

IMG

AREA

MAP

IMG

(image)

The IMG tag specifies an image to be displayed in an HTML document.

An image can be a plain image that simply appears on the page. An image can be embedded in an tag so that

the user can click it to open a URL. An image can also be an image map, which has multiple clickable areas that each

link to different URLS.

The SRC attribute of the IMG tag indicates the image to display. You can also specify a lower resolution image as the

value of the LOWSRC attribute. When the page opens, it displays the lower resolution image first, so that the user has

something to look at while the real image is loading. If you supply an image for the LOWSRC attribute, make sure it has

a smaller file size than the image used for the SRC attribute, since the whole point of the LOWSRC attribute is to provide

an image that loads more quickly than the source image.

The HEIGHT and WIDTH attributes indicate the dimensions of the image. If you specify these attributes, Navigator uses

them to reserve a place for the image on the page and continues loading any text and other page elements instead of

waiting for the image to load.

Navigator can display images that use the following types of formats:

GIF (Graphics Interchange Format)

JPEG (Joint Photographic Experts Group)

XPM (X PixMap)

XBM (X BitMap)

Syntax

The SRC attribute is required.

Topic : Images And Maps Page 1Notes ByNAGESH KUMAR Contact No: 09928088743
http://c/Documents%20and%20Settings/Nagesh%20Kumar/Desktop/WebDesign/html%20tag%20reference/tags8.htm#1310399http://c/Documents%20and%20Settings/Nagesh%20Kumar/Desktop/WebDesign/html%20tag%20reference/tags8.htm#1310399http://c/Documents%20and%20Settings/Nagesh%20Kumar/Desktop/WebDesign/html%20tag%20reference/tags8.htm#1240386http://c/Documents%20and%20Settings/Nagesh%20Kumar/Desktop/WebDesign/html%20tag%20reference/tags8.htm#1240386http://c/Documents%20and%20Settings/Nagesh%20Kumar/Desktop/WebDesign/html%20tag%20reference/tags8.htm#1432328http://c/Documents%20and%20Settings/Nagesh%20Kumar/Desktop/WebDesign/html%20tag%20reference/tags8.htm#1432328http://c/Documents%20and%20Settings/Nagesh%20Kumar/Desktop/WebDesign/html%20tag%20reference/tags8.htm#1310399http://c/Documents%20and%20Settings/Nagesh%20Kumar/Desktop/WebDesign/html%20tag%20reference/tags8.htm#1240386http://c/Documents%20and%20Settings/Nagesh%20Kumar/Desktop/WebDesign/html%20tag%20reference/tags8.htm#1432328


2/6


7, Daan Bari

Jawahar Nagar



SRC="location"

specifies the URL of the image to be displayed in the document.

LOWSRC="location"

specifies the URL of a low-resolution version of the image. This image is displayed while the image specified by the

SRC attribute is loading. The idea of the LOWSRC image is that it takes up less file space than the SRC image and thus

loads more quickly, giving the user something to look at while the real image is loading.

ALT="alternativeText"

specifies text to be displayed if the browser does not support the IMG tag or if the user has suspended image loading in

the browser.

ALIGN

specifies the alignment of the image in relation to the surrounding text. If you do not specify a value for ALIGN,

Navigator uses BOTTOM as the default. Navigator 1.1

LEFT aligns an image with the left margin.

RIGHT aligns an image with the right margin.

TOP aligns the top of an image with the top of the tallest item in the current line.

ABSMIDDLE aligns the middle of an image with the middle of the text in the current line. Navigator 3.0

ABSBOTTOM aligns the bottom of an image with the bottom of the lowest item in the current line. Navigator

3.0

TEXTTOP aligns the top of an image with the top of the tallest text in the current line. Navigator 3.0

MIDDLE aligns the middle of the image with the baseline of the text in the current line. Navigator 3.0

BASELINE aligns the bottom of an image with the baseline of the text in the current line. Navigator 3.0

BOTTOM is the same as BASELINE.

BORDER="borderWidth"

specifies the width, in pixels, of a border around the image. The value must be an integer. Navigator 1.1

HEIGHT="height"

specifies the height of the image, either in pixels or as a percentage of the height of the window, frame, or positioned

block of HTML that contains the image. To indicate a number of pixels, specify the value as an integer, for example,

"100". To indicate a percentage, specify the value as an integer followed by the percentage sign, for example "20%".Navigator 1.1.

WIDTH="width"

specifies the width of the image either in pixels or as a percentage of the window, frame, or positioned block of HTML

containing the image. To indicate a number of pixels, specify the value as an integer, for example, "100". To indicate a

percentage, specify the value as an integer followed by the percentage sign, for example, "20%". Navigator 1.1.

HSPACE="horizMargin"

specifies a margin in pixels between the left and right edges of the image and surrounding text and images. Give the

value as an integer. Navigator 1.1.

VSPACE="verticalMargin"

specifies a margin in pixels between the top and bottom edges of the image and surrounding text and images. Give the

value as an integer. Navigator 1.1.

ISMAP



3/6


7, Daan Bari

Jawahar Nagar



indicatets that the image is a server-side image map. If it is, the image should be embedded inside an link

that points to the mapping file.

USEMAP="#mapName"

specifies that the image is a client-side image map and indicates which MAP tag defines the mapping for this image.

NAME="imgName"

specifies a name by which JavaScript can refer to the image.

ONABORT="imgAbortJScode"

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

ONERROR="errorJScode"

specifies JavaScript code to execute when an error occurs during image loading such as if the URL within the tag

is bad or the image data is corrupted.

ONLOAD="imgLoadJScode"

specifies the JavaScript event handler to execute when the image is loaded.

SUPPRESS="suppressOrNot"

specifies whether or not the place-holder icon that appears during image loading will be displayed and if the tool tip will

be active. If the tool tip is active, any text specified in the ALT attribute is displayed if the mouse rests over the image.

The default value is FALSE. Navigator 4.0

The value of SUPPRESS can be TRUE or FALSE.

TRUE: the place-holder icon is not displayed and the tool tip is disabled for that image while the image is

loading.

FALSE: the place-holder icon is displayed and the tool tip is active while the image is loading.

Note, however, that if the user has set up the browser so that it does not automatically load images, the placeholder icon

appears, regardless of the setting of the SUPPRESS attribute.

Example 1. An Image With a Low Resolution Placeholder

This example uses the following attributes to improve performance:

The LOWSRC attribute specifies a low-resolution version of the final image. This small file loads quickly when

a user accesses the page.

The HEIGHT and WIDTH attributes specify the dimensions of the image. Navigator uses these dimensions to

reserve a place for the image on the page, and continues loading any text and other page elements instead of

waiting for the image to load.

Example 2. An Image with Text Wrapping Around It

In this example, an image is aligned on the right side of the Navigator window, and text flows around it to the left:

Chrysanthemums are easy to grow, so long as you can keep the slugs and snails off

them. They do very well in the fall, and there is nothing more beautiful than a

large bed of chrysanthemums of all colors.



4/6


7, Daan Bari

Jawahar Nagar



In this example, the HSPACE attribute creates a 40-pixel margin on either side of the the image, and the image is aligned

on the right. Text wraps around the image to the left.

AREA

(area of image map)

The AREA tag describes an individual area in an image map. An image map can contain multiple clickable areas, and

each area can have a separate destination URL associated with it.

The AREA tag must be used inside a MAP tag.

Syntax

The COORDS attribute is required. Either the HREF or the NOHREF attribute must be supplied.

COORDS="coords"

specifies the coordinates of the area. Coordinates are measured from the upper left corner of the image. The format of theCOORDS value depends on the value of the SHAPE attribute. If the SHAPE attribute is not specified, the shape is

assumed to be a rectangle, and the COORDS value must be of the form "x1,y1,x2,y2". In this case, x1 and y1 are the x

and y values of the upper left corner of the rectangle, and x2 and y2 are the coordinates of the lower left corner. See the

discussion of the SHAPE attribute for details of the format of the COORDS value for each kind of shape.

SHAPE="shape"

specifies the shape of the map. Each shape has its own form of the COORDS attribute:

CIRCLE specifies a circle. If the shape is a circle, the value of the COORDS attribute must have the form

"x,y,r" where x and y are the coordinates of the center of the circle, and r is the length of the radius.

RECT specifies a rectangle. This is the default, so if you do not specify a shape, it is assumed to be a rectangle.

If the shape is a rectangle, the value of the COORDS attribute must have the form "x1,y1,x2,y2" where x1 andy1 are the coordinates of the upper left corner, and x2 and y2 are the coordinates of the lower right corner.

POLY or POLYGON specifies a polygon of up to 100 sides. If the shape is a polygon, the value of COORDS

must have the form "x1,y1,x2,y2,...xn,yn". Each x,y pair is a point where two sides of the polygon meet. The

last x,y pair is connected to the first to enclose the polygon.

If you do not specify a value for SHAPE, the shape is assumed to be a rectangle.

HREF="location"

specifies the URL to invoke when a user clicks the area.

NOHREF

specifies that no URL is invoked when a user clicks the area.

TARGET="windowName"



5/6


7, Daan Bari

Jawahar Nagar



specifies the frame or window into which the destination document is loaded, if the value of HREF is a URL that points

to a document. Navigator 2.0.

ONMOUSEOUT="outJScode"

specifies a JavaScript event handler to execute when a user moves the mouse cursor out of the image or link text.

ONMOUSEOVER="overJScode"

specifies a JavaScript event handler to execute when a user moves the mouse cursor over the image or link text.

NAME="areaName"

specifies the name of the AREA. This name can be used to access the AREA object from JavaScript.

Used Within

MAP

Example

For an example of the AREA tag inside a MAP tag.

MAP

(mapping information for image map)

The MAP tag contains information about the active areas in an image map.

An image map is a graphic that can be divided into multiple areas, and each area of the map can point to a different URL.

When a user clicks a specific area in the image map, Navigator loads the URL associated with the clicked area.

There are two different kinds of image maps: server-side image maps and client-side image maps. For server-side image

maps, the mapping information is written in a separate file that resides on the web server.

For client-side image maps, the mapping information is contained in a MAP tag in the HTML file that contains the IMG

tag. The MAP tag contains one or more AREA tags. Each AREA tag describes a different area in the image and specifies

the URL to which it connects.

To define a client-side image map, use the IMG tag to specify the image and supply a value for its USEMAP attribute.

The value of the USEMAP attribute must be the pound (#) sign, followed by the name of the MAP tag that contains the

mapping information, for example,"#firstmap".

If the user clicks a point located in multiple overlapping areas, the area that is defined first in the MAP tag responds to

the click.

Syntax

...

The NAME attribute is required. Between the and tags you must put the AREA tags that define the

areas in the image map.

NAME="mapName"



6/6


7, Daan Bari

Jawahar Nagar



specifies the name of the map. Use this name preceded by # as the value of the USEMAP attribute of the IMG tag for the

image map.

Example