Tips (Total 6)
# Tips-1) What is HTML Image Maps
With HTML image maps, you can create clickable areas on an image.
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:
Full Example of HTML Image Maps
Here is the HTML source code for the image map above:
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<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="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
</body>
</html>
Output should be:
# Tips-2) How Does it HTML Image Maps?
The idea behind an image map is that you should be able to perform different actions depending on where in the image you click.
To create an image map you need an image, and some HTML code that describes the clickable areas.
The image is inserted using the <img> tag. The only difference from other images is that you must add a usemap attribute:
Example of HTML Image Map
<img src="https://itupto.com/avatar.png" alt="Workplace" usemap="#workmap">
# Tips-3) How to create HTML Image Map
The idea behind an image map is that you should be able to perform different actions depending on where in the image you click.
To create an image map you need an image, and some HTML code that describes the clickable areas.
The Image
The image is inserted using the <img> tag. The only difference from other images is that you must add a usemap attribute: 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. Tip: You can use any image as an image map!
index.html
Example:
HTML
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
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: The name attribute must have the same value as the <img>'s usemap attribute .
<map name="workmap">
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 You must also define some coordinates to be able to place the clickable area onto the image.
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:
Output should be:
The coordinates 270,350 is located 270 pixels from the left margin and 350 pixels from the top:
Output should be:
Now we have enough data to create a clickable rectangular area:
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<p>Click on the computer to go to a new page and read more about the topic:</p>
<img src="https://www.w3schools.com/html/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
</map>
</body>
</html>
Output should be:
This is the area that becomes clickable and will send the user to the page "computer.htm":
Output should be:
# Tips-4) How to create HTML Image Imap Shape="circle"
To add a circle area, first locate the coordinates of the center of the circle:
337,300
Then specify the radius of the circle: 44 pixels
Output should be:
Now you have enough data to create a clickable circular area:
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<p>Click on the cup of coffee to go to a new page and read more about the topic:</p>
<img src="https://itupto.com/uploads/demo/2023-09-09-07-14-37-workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
</body>
</html>
Output should be:
This is the area that becomes clickable and will send the user to the page "coffee.htm":
Output should be:
# Tips-5) How to create HTML Image Map 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?
Output should be:
We have to find the x and y coordinates for all edges of the croissant:
Output should be:
The coordinates come in pairs, one for the x-axis and one for the y-axis:
<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<p>Click on the croissant to go to a new page and read more about the topic:</p>
<img src="https://www.w3schools.com/html/frenchfood.jpg" alt="French Food" usemap="#foodmap" width="450" height="675">
<map name="foodmap">
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" alt="Croissant" href="croissant.htm">
</map>
</body>
</html>
Output should be:
This is the area that becomes clickable and will send the user to the page "croissant.htm":
Output should be:
# Tips-6) How to create HTML Image Map and JavaScript
A clickable area can also trigger a JavaScript function.
Full Example of HTML Image Map and JavaScript
Add a click event to the <area> element to execute a JavaScript function: Here, we use the onclick attribute to execute a JavaScript function when the area is clicked:
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<p>Click on the cup of coffee to execute a JavaScript function:</p>
<img src="https://itupto.com/uploads/demo/2023-09-09-07-19-13-workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="circle" coords="337,300,44" href="coffee.htm" onclick="myFunction()">
</map>
<script>
function myFunction() {
alert("You clicked the coffee cup!");
}
</script>
</body>
</html>
Output should be:
