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:


  Modified On Sep-18-2014 01:24:06 PM

Leave Comment