Prerequisites :

To create a webpage containing image map with hotspot in html you must know the basics of HTML and CSS. To learn basics of HTML and CSS , you can refer the links provided below. 

HTML – BASICS WITH EXAMPLES

CSS – BASICS WITH EXAMPLES

Question 1: Create a web page with the following using HTML
a. To embed a map in a web page
b. To fix the hot spots in that map
c. Show all the related information when the hot spots are clicked.

CODE:

<!DOCTYPE html>
<html>
<head>
<title>INDIA MAP</title>
</head>

<body>

<img src=”india-map.png” alt=”Planets” usemap=”#planetmap” style=”width:488px;height:532px;” align=”centre” >

<map name=”planetmap”>
<area shape=”octa” coords=”148,522,139,471,183,448,174,490″ alt=”Sun” href=”tamil1.html”>
<area shape=”octa” coords=”106,452,135,481,137,522,120,487″ alt=”Mercury” href=”kerala.html”>
<area shape=”octa” coords=”181,433,155,373,181,330,226,381″ alt=”Mercury” href=”andhra1.html”>
<area shape=”octa” coords=”147,351,134,412,114,452,100,418″ alt=”Mercury” href=”karnataka.html”>
</map>
<h1 style=”text-align:center”>INDIA MAP</h1>

</body>
</html>

EXPLANATION:

<img> tag is used to add the image to our webpage.

OUTPUT:

Image Map hotspot in HTML

Follow me

Gowdham S

Technical Manager at SeekaHost Ltd
Love to learn new things & Love to create new things with Innovative Ideas. Having 5+ years of experience in Digital Marketing Strategies and expertise in Server Handling & Web Hosting Technologies.
Follow me
More in sem5
internet programming lab syllabus

Internet programming lab syllabus LIST OF EXPERIMENTS Create a web page with the following using HTML i) To embed an...

Close