How to use Imagemap in JavaScript

In this article we will discuss about how to create and use the imagemap in JavaScript.
  • 2926

It is possible to make a Imagemap in Javascript. For it the we use the <img> Tag as usual but and additional attribute need to be use with the image tag i.e. "usemap" attribute. Following it we need to use the map tag which takes only one attribute .i.e. name attribute and the value of this attribute is the value of the usemap attribute used within the image tag. Further it the map tag works as a container tag for the area tag which in terms defines the shape and the coordinates to specify the point or the area at which when we will click we will navigate to another page or image.

JavaScript Code:

<html>

<head>

    <title>JavaScript Image Map</title>

    <script type="text/javascript">

<!--

        function showTutorial(name) {

            document.myfrm.mytext.value = name

        }

//-->

    </script>

</head>

<body>

    <form name="myfrm">

    <input type="text" name="mytext" size="20" />

    </form>

    <!-- Create  Mappings -->

    <img src="file://///MCNSERVER2/UserProfiles/mgoel/My%20Documents/My%20Received%20Files/Varesh/cute_girl-normal.jpg"

        height="30%" width="30%" alt="HTML Map" border="0" usemap="#tutorials" />

    <map name="tutorials">

        <area shape="poly" coords="74,0,113,29,98,72,52,72,38,27" href="http://www.google.co.in/"

            alt="Google" target="_self" onmouseover="showTutorial('google')" onmouseout="showTutorial('')" />

        <area shape="rect" coords="22,83,126,125" href="https://accounts.google.com/" alt="Gmail"

            target="_self" onmouseover="showTutorial('Gmail')" onmouseout="showTutorial('')" />

        <area shape="circle" coords="73,168,32" href="http://in.yahoo.com/?p=us" alt="Yahoo"

            target="_self" onmouseover="showTutorial('Yahoo')" onmouseout="showTutorial('')" />

    </map>

</body>

</html>

Output:

Image30.jpg

Ask Your Question 

Got a programming related question? You may want to post your question here
 
© 2020 DotNetHeaven. All rights reserved.