Digital Assignment – 2
Web Development
Name: Noel George
Reg No:19BCS0050
1. Use a HTML5, CSS and JavaScript to design a web page to show the
specialities of Tamilnadu. You must use Image map concept. You can
select any three different districts with different shapes like circle,
rectangle and polygon. While clicking the particular area, then name of
the district and speciality should be displayed. Eg. If Thanjavur is famous
for the 'Thalaiyattu Bommai' dolls, Thirunelveli is known for its Halwa.
Kodaikanal – Apples, Karaikudi – Chettinad Cuisine, Madurai – Jasmine,
Kanchipuram – Silk and etc.
Output:
1. When Madurai is clicked
2. When Coimbatore is clicked
3. When Thenni is clicked
4. When Vellore is clicked
5. When Tiruchirappalli is clicked
Program code:
<html>
<head>
<style type="text/css">
h1
{
font-family:"Times New Roman";
font-style: italic;
font-size: 20;
}
</style>
</head>
<body>
<img src="C:\Users\ASUS\Downloads\TnMap.jpg" alt="TNMap"
usemap="#TNMap">
<map name="TNMap">
<area shape="rect" coords="200,302,139,332" alt="Madurai"
href="https://en.wikipedia.org/wiki/Madurai">
<area shape="rect" coords="101,210,30,239" alt="Coimbatore"
href="https://coimbatore.nic.in/about-district/">
<area shape="circle" coords="113,319,25" alt="Thenni"
href="https://theni.nic.in/">
<area shape="rect" coords="324,40,239,78" alt="Vellore"
href="https://en.wikipedia.org/wiki/Vellore">
<area shape="poly" coords="202,226,245,265,290,224,244,200,222,195"
alt="Tiruchirappalli"href="https://www.tripadvisor.in/Attractions-g317098Activities-Tiruchirappalli_Tiruchirappalli_District_Tamil_Nadu.html">
</area>
</map>
<h1>Tamil Nadu Map using the Map Element<h1>
</body>
</html>