AIM:
To create a webpage with the following using HTML:
- To embed an image map in a webpage.
- To fix the hotspots.
- Show all the related information when the hotspots are clicked.
ALGORITHM:
- Open notepad and type the HTML coding for homepage main.html which has an image map using <map> tag and create some hotspots.
- Hotspots are created by including a link at the required coordinate position using <a> tag which directs to its corresponding web pages.
- Write the coding for all the linked web pages.
- Run the main.html in a suitable web browser.
- Display the output.
PROGRAM:
Main Page (main.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>India Map</title>
</head>
<body>
<center>
<h1>India Map</h1>
<img src="indiamap.jpg" usemap="#indiamap" alt="India Map">
</center>
<map name="indiamap">
<area alt="Tamil Nadu" href="#Tamilnadu" coords="321,797,301,823,263,862" shape="poly">
<area alt="Kerala" href="#Kerala" coords="188,729,203,743,217,753" shape="poly">
<area alt="Maharashtra" href="#Maharashtra" coords="148,632,124,523,165,492" shape="poly">
<area alt="Orissa" href="#Orissa" coords="367,583,383,561,385,543" shape="poly">
</map>
</body>
</html>
Tamil Nadu Page (Tamilnadu.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tamil Nadu</title>
</head>
<body>
<center>
<h2>Tamil Nadu</h2>
<img src="tamilnadu.jpg" width="400" height="500" alt="Tamil Nadu">
</center>
<p>It is a state in India with the maximum Tamil-speaking population...</p>
</body>
</html>
Kerala Page (Kerala.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kerala</title>
</head>
<body>
<center>
<h2>Kerala</h2>
<img src="kerala.jpg" width="300" height="400" alt="Kerala">
</center>
<p>It is a state in India with the maximum Malayalam-speaking population...</p>
</body>
</html>
Sample Output:
RESULT:
Thus, a web page with the given specifications was created, and its output was verified successfully.