Hi Developer,
This article will learn about image maps tag use in HTML.
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.
<!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>
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.
Then, add the clickable areas.
A clickable area is defined using an <area>
element.
You must define the shape of the clickable area, and you can choose one of these values:
rect
- defines a rectangular regioncircle
- defines a circular regionpoly
- defines a polygonal regiondefault
- defines the entire regionYou must also define some coordinates to be able to place the clickable area onto the image.
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:
The coordinates 270,350
is located 270 pixels from the left margin and 350 pixels from the top:
<!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="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>
Hope it can help you…
Categories : HTML
Tags : HTML