HTML Tutorials

#	Content	Views
1.	Tutorial Tags	15,828
2.	Tutorial + Programming	678,586
3.	Videos	218,835
4.	Results (`Annual + Re-appear`)	12,699
5.	Quiz Chapters	14,622
6.	Quiz Questions	172,775
7.	Quiz Results	18,822
8.	Testimonials	3,462
9.	Projects	28,286
10.	e-Words	12,023
11.	e-Certificates	4,968
12.	Downloads (Softwares)	4,238
13.	Downloads (Syllabus)	948

Create Map on 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:

<!DOCTYPE html>
<html>
<head>
<title>Image Maps</title>
</head>
<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="/images/laptop.jpg" alt="Laptop" usemap="#laptopmap" width="400" height="379">

<map name="laptopmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer Lab" href="/html/computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="/html/phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="/html/coffee.htm">
</map>

</body>
</html>

Live Demo & Try it yourself!