To develop a website to display details about the places around my house.
Create a Django admin interface.
Download your city map from Google.
Using <map>
tag name the map.
Create clickable regions in the image using <area>
tag.
Write HTML programs for all the regions identified.
Execute the programs and publish them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin:0;}
</style>
<script>
function coordinate(event){
let x= event.clientX;
let y=event.clientY;
document.getElementById('text1').value=x;
document.getElementById('text2').value=y;
}
</script>
</head>
<body>
<h1 align="center" style="color: red;">EXP4</h1> <br>
<h2 align="center" style="color: green;">Kurapati Vishnu Vardhan Reddy(212223040103)</h2>
<br>
<img src="map.png" width="1485" height="650" alt=""
usemap="#MapNew" onmousemove="coordinate(event)">
<map name="MapNew">
<area shape="rect" coords="480,347,622,390" href="https://saveetha.ac.in" alt="" title="Saveetha">
<area shape="rect" coords="848,402,964,434" href="https://dmice.ac.in/" alt="" title="Dmi">
<area shape="rect" coords="400,163,520,190" href="https://apollocollegeofeducation.ac.in/" alt="" title="Apollo College Of Education">
<area shape="rect" coords="1365,110,1484,137" href="https://www.sreesasthaarts.in/" alt="" title="sree sastha arts">
</map>
<br>
<center> x-coordinate
<input type="text" name="" id="text1"></center>
<br>
<br>
<center> y-coordinate
<input type="text" name="" id="text2"></center>
</body>
</html>
The program for implementing image maps using HTML is executed successfully.