Home > DeveloperSection > Blogs > JavaScript – Image Map

JavaScript – Image Map


JavaScript JavaScript 
Ratings:
0 Comment(s)
 1993  View(s)
Rate this:

JavaScript – Image Map

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:



Don't want to miss updates? Please click the below button!

Follow MindStick