JavaScript – Image Map


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="">


    <script type="text/javascript">

        function show(name) {

            document.form1.txtflowername.value = name





    <form name="form1">

    <input name="txtflowername" type="text" />


    <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 name="Tulips">

        <area shape="rect" coords="0,0,155,126" alt="Flower3" target="_self" onmouseover="show('Tulips')" onmouseout="show('')" />





Leave Comment