Scribd
Upload
2 views4 pages

Image Maps: Example

The document explains how to create image maps in HTML using the <map> and <area> tags, allowing for clickable regions on images. It details the different shapes that can be defined for clickable areas, including rectangles, circles, and polygons, along with examples of their usage. Additionally, it demonstrates how to integrate JavaScript functions with image map areas for interactive functionality.

Uploaded by

kalaivani vairavamoorthy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views4 pages

Image Maps: Example

The document explains how to create image maps in HTML using the <map> and <area> tags, allowing for clickable regions on images. It details the different shapes that can be defined for clickable areas, including rectangles, circles, and polygons, along with examples of their usage. Additionally, it demonstrates how to integrate JavaScript functions with image map areas for interactive functionality.

Uploaded by

kalaivani vairavamoorthy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Image Maps

The HTML <map> tag defines an image map. An image map is an image with
clickable areas. The areas are defined with one or more <area> tags.

Try to click on the computer, phone, or the cup of coffee in the image below:

Example
Here is the HTML source code for the image map above:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="
computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="p
hone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="cof
fee.htm">
</map>

The Image
The image is inserted using the <img> tag. The only difference from other
images is that you must add a usemap attribute:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

The usemap value starts with a hash tag # followed by the name of the image
map, and is used to create a relationship between the image and the image
map.

Create Image Map


Then, add a <map> element.

The <map> element is used to create an image map, and is linked to the image
by using the required name attribute:

<map name="workmap">

The name attribute must have the same value as the <img>'s usemap attribute .
The Areas
Then, add the clickable areas.

A clickable area is defined using an <area> element.

Shape
You must define the shape of the clickable area, and you can choose one of
these values:

 rect - defines a rectangular region


 circle - defines a circular region
 poly - defines a polygonal region
 default - defines the entire region

Shape="rect"
The coordinates for shape="rect" come in pairs, one for the x-axis and one for
the y-axis.

So, the coordinates 34,44 is located 34 pixels from the left margin and 44
pixels from the top:

Example
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
Try it Yourself »

Shape="circle"
To add a circle area, first locate the coordinates of the center of the circle:

337,300

Example
<area shape="circle" coords="337, 300, 44" href="coffee.htm">

Shape="poly"
The shape="poly" contains several coordinate points, which creates a shape
formed with straight lines (a polygon).

This can be used to create any shape.

Like maybe a croissant shape!

How can we make the croissant in the image below become a clickable link?
We have to find the x and y coordinates for all edges of the croissant:

We have to find the x and y coordinates for all edges of the croissant:

We have to find the x and y coordinates for all edges of the croissant:

French Food

xample
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,27
0,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croi
ssant.htm">
Try it Yourself »

Image Map and JavaScript


A clickable area can also trigger a JavaScript function.

Add a click event to the <area> element to execute a JavaScript function:

Example
Here, we use the onclick attribute to execute a JavaScript function when the
area is clicked:

<map name="workmap">
<area shape="circle" coords="337,300,44" href="coffee.htm" oncl
ick="myFunction()">
</map>

<script>
function myFunction() {
alert("You clicked the coffee cup!");
}
</script>

HTML Image Tags


Tag Description

<img> Defines an image


<map> Defines an image map

<area> Defines a clickable area inside an image map

<picture> Defines a container for multiple image resources

You might also like