Scribd
Upload
4 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
4 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
We take content rights seriously. If you suspect this is your content, claim it here.
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