Introduction:
In this article I am going to explain about image map in JavaScript and how we can use it in Java Script.
An image-map is an image with a clickable area. It is used to define a client side image map. The image which is going to form the map is inserted on a page using <img> element, but it carries an extra attribute <usemap>. The value of the usemap attribute is the value of the name attribute on the <map> element, the <map> elements contains a number of <area> elements, that defines the clickable areas on the image map. <area> elements also specifies the shapes and boundaries of each clickable hotspots.
Example of image Map:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function show(name) {
document.form1.txtflowername.value = name
}
</script>
</head>
<body>
<form name="form1">
<input name="txtflowername" type="text" />
</form>
<img src="Chrysanthemum.jpg" width="145" height="126" alt="Chrysantheum" usemap="#Chrysanthemum">
<img src="Tulips.jpg" width="145" height="126" alt="Tulips" usemap="#Tulips">
<map name="Chrysanthemum">
<area shape="rect" coords="0,0,145,126" alt="Flower" target="_self" onmouseover="show('Chrysanthemum')" onmouseout="show('')" />
</map>
<map name="Tulips">
<area shape="rect" coords="0,0,155,126" alt="Flower3" target="_self" onmouseover="show('Tulips')" onmouseout="show('')" />
</map>
</body>
</html>
Output:
Leave Comment