221071010
Alinaa Bharde WT LAB:2
Aim : Write a code in HTML to create a web page using the following
i) To embed an image map in a web page
ii)
To fix the hot spots iii) To show all the related information
when the hot spots are clicked. iv) To get the Coordinates from an
Image using Java Script.
Theory:
i) What is Hot Spot in HTML?
The <map> tag is used to define an image map. An image map is an image with clickable
areas.
The required name attribute of the <map> element is associated with the <img>'s usemap
attribute and creates a relationship between the image and the map.
The <map> element contains a number of <area> elements, that defines the clickable areas in
the image map.
Global Attributes
The <map> tag also supports the Global Attributes in HTML.
Event Attributes
The <map> tag also supports the Event Attributes in HTML.
ii) What various tags can be used here?
Various Tags Used over here are div, img, a, form, label,map,area,html.body.script,style etc…
iii) What is Java Script?
JavaScript is a scripting language that enables you to create dynamically updating content,
control multimedia, animate images, and pretty much everything else. (Okay, not everything, but
it is amazing what you can achieve with a few lines of JavaScript code.)
O/P:
Code:
<!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>
html,body{
background-image:url('pexels-photo-70497.jpeg');
background-size: cover;
background-repeat: no-repeat;
}
form {
border: 3px solid #f1f1f1;
width: 400px;
background-color: whitesmoke;
justify-content: center;
align-items: center;
display: flex; margintop: 100px; borderradius: 10px;
}
input[type=text], input[type=password] {
width: 100%;
padding : 12px 20px;
margin: 8px 0;
display : inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: red;
color: white;
padding : 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
utton:hover {
opacity : 0.8;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar { width:
40%; border-radius:
50%;
}
.container {
padding : 16px;
display : flex;
width: 400px;
flex-direction: column ;
}
span.psw {
float: right;
padding-top: 16px;
}
.bg{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
</style>
</head>
<body onmousemove="coordinate(event)">
<div class="bg" >
<div>
<img src="logo.jpeg" alt="logo" usemap="#worldmap">
<map name="worldmap">
<area shape="rect" coords ="184, 36, 900, 900" alt="north america"
href="https://www.zomato.com/" >
</a>
</div>
<form action="action_page.php" method="post">
<div class="container">
<label for="uname" style="text-decoration:
none;"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname"
required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw"
required>
<a href="www.zomato.com" >
<button type="submit">Login</button>
</a>
<label>
<input type="checkbox" checked="checked" name="remember">
Remember me
</label>
<input type="text" id="X">
<input type="text" id="Y">
</div>
</div>
</div>
</body>
<script>
function coordinate(event) {
let x = event.clientX ;
let y = event.clientY ;
document.getElementById("X").value = x;
document.getElementById("Y").value = y;
}
</script>
</html>
conclusion:We got to learn about javascript,map,area in html also….
