EX.
NO:01 Create a web page with embed an image map, fix the hot spots and
show all the related information when the hot spots are clicked using
DATE: HTML.
AIM:
To create a web page with the following using HTML.
To embed an image map in a web page.
To fix the hot spots.
Show all the related information when the hot spots are clicked.
Map.html:
<!DOCTYPE html>
<html>
<body>
<h1>Image Maps</h1>
<p>Click on any state to go to a new page and read more about the topic:</p>
<!-- The image is inserted using the <img> tag -->
<img src="India.jpg" alt="Workplace" usemap="#workmap" width="1000" height="1194">
<!-- 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. -->
<map name="workmap">
<!-- The <map> element is used to create an image map, and is linked to the image by using
the name attribute -->
<!-- The name attribute must have the same value as the <img>'s usemap attribute-->
<area shape="rect" coords="312,950,372,1050" alt="Tamilnadu" href="Tamilnadu.html">
<!-- one for the x-axis and one for the y-axis -->
<area shape="circle" coords="185,410,100" alt="Rajastan" href="Rajasthan.html">
<!--coordinates of the center of the circle & radius of the circle -->
<area shape="poly" coords="252,622,349,622,338,665,264,692,218,729,197,675"
alt="Maharashtra" href="Maharashtra.html">
<!-- find the x and y coordinates for all edges of the croissant, coordinates come in pairs, one
for the x-axis and one for the y-axis -->
</map>
</body>
</html>
OUTPUT:
Tamilnadu.html:
<html>
<head>
<title> About Tamil Nadu</title>
</head>
<body>
<center><h1> Tamil Nadu </h1></center>
<hr>
<img src="tn.jpg" alt="Map" style="width:500px;height:500px" align="left">
<p>
*Tamil Nadu (/ˌtæmɪl ˈnɑːduː/; Tamil: [ˈtamiɻ ˈnaːɽɯ] ⓘ, abbr. TN) is the southernmost state
of India.
<br></br>
<br>
*The tenth largest Indian state by area and the sixth largest by population, Tamil Nadu is the
home of the Tamil people, who speak the Tamil language, one of the longest surviving
classical languages and serves as its official language.
The capital and largest city is Chennai.</br>
<br></br>
*Located on the south-eastern coast of the Indian peninsula, Tamil Nadu is straddled by the
Western Ghats and Deccan Plateau in the west, the Eastern Ghats in the north, the Eastern
Coastal Plains lining the Bay of Bengal in the east, the Gulf of Mannar and the Palk Strait to
the south-east, the Laccadive Sea at the southern cape of the peninsula, with the river Kaveri
bisecting the state. Politically, Tamil Nadu is bound by the Indian states of Kerala, Karnataka,
and Andhra Pradesh, and the union territory of Puducherry and shares an international
maritime border with the Northern Province of Sri Lanka at Pamban Island.
</p></body>
</html>
OUTPUT:
Maharashtra.html
<html>
<head>
<title> About Maharashtra</title>
</head>
<body>
<center><h1> Maharashtra </h1></center>
<hr>
<img src="mah.jpg" alt="Map" style="width:500px;height:500px;">
<p>*Maharashtra is a state in the western peninsular region of India occupying a substantial
portion of the Deccan Plateau.</p>
</body>
</html>
OUTPUT:
Rajasthan.html
<html>
<head>
<title> About Rajasthan</title>
</head>
<body>
<center><h1> Rajasthan </h1></center>
<hr>
<img src="raj.jpg" alt="Map" style="width:500px;height:500px;"><p>
*Rajasthan is the largest state of the Republic of India in terms ofarea . For the first time in
1800 AD, George Thomas named this province Rajputana. Famous historian James Tad
named this state as Raithan or Rajasthan in "Annals and Antiquities of Rajasthan"</p>
</body>
</html>
OUTPUT:
RESULT:
Thus, the creation of web page with image map, fix the hotspots, showing all the
related information when the hotspots are clicked using HTML is executed successfully and
the output was verified.
