Scribd
Upload
2 views

Creating Image Map

An image map is an image with clickable areas defined by the <map> element and <area> elements, allowing different actions based on where the image is clicked. The <map> tag requires a unique name attribute, and the <img> tag must include a usemap attribute to link to the image map. The <area> element specifies clickable areas with attributes for shape and coordinates, enabling various geometric shapes like rectangles and circles.

Uploaded by

Abdurehman Dawud
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

Creating Image Map

An image map is an image with clickable areas defined by the <map> element and <area> elements, allowing different actions based on where the image is clicked. The <map> tag requires a unique name attribute, and the <img> tag must include a usemap attribute to link to the image map. The <area> element specifies clickable areas with attributes for shape and coordinates, enabling various geometric shapes like rectangles and circles.

Uploaded by

Abdurehman Dawud
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 8

Creating Image Map

 An image map is an image with clickable areas

Chapter 2 1
Cont’d
 Image map is defined by the <map> element with <area> elements
 The idea is to be able to perform different actions depending on where in the
image you click.
 It is an inline element and belongs to the phrasing content ----> Flow content
model.
 The <map> tag has one required attribute called name that gives the map a
name so that it can be referenced.
 The name attribute must:
 Has a non-empty value with no space characters
 Has a unique value – two map element in the same document not allowed to
have the same name.
2
Cont’d
How Does it image map Works?
 The image is inserted using the <img> tag.
Here the <img> element is different from other images because it require a
usemap attribute
 Usemap attribute
Its value starts with a # followed by the name of the image map.
Used to create a relationship between the image and the image map.
 Then, the <map> element is used to create an image map, and is linked to the
image by using the required name attribute.
 Then, the clickable areas are defined and added using an <area> element.
3
Cont’d
Example 1:

4
Cont’d
The <area> element
 It defines an area inside an image map that has predefined clickable areas.
 Allows geometric areas on an image to be associated with hypertext link.
 Used only within a <map> element.
 It is defined with (required) attributes shape and coords.
 Shape attribute - specifies the shape of the clickable area such as rectangle,
circle, square, and polygon.
 Coords attribute - defines the coordinates of areas inside the image.

5
Cont’d

How coordinate works?


Shape attribute possible values
circle, rect, poly, default

Cords attribute possible values


 x, y, r (circle) where x, y specify the center and r is the radius of circle
 Pair of x,y (rect) that specify the left, top, right, bottom coordinates of rectangle
 x1,y1,x2,y2,x3,y3,..(polygon) that the polygon vertices.
Note: The easiest technique is using map coordinate generator
6
Cont’d Other <area> attributes
Attribute Value(s) Description
alt Text Alternative text to display if image can not be displayed
_self, _blank, Specifies where to display the linked resource (current
target window, new window, the parent frame, full width in the
_parent, _top original (same) window)
Determine the hyperlink destination for the active
href URL (clickable) area.
 The language of the linked resource.
hreflag language_code  Must specified this attribute if you provide a value for
the href attribute
Indicates that the hyperlink will be used to download a
download File name resource
alternate, author, help,
next, bookmark, license,  Determine the relationship between the current
rel nofollow, noreferrer,
document and the hyperlink
 Used if a value for the href attribute is provided.
prefetch, prev, search, tag

7
Cont’d
Example 2:

You might also like