如何在javascript中使用imagemap

可以用Javascript制作Imagemap。为此,我们像往常一样使用<img>标记,但是需要将附加属性与图像标记一起使用,即“usemap”属性。接下来我们需要使用map标签,它只需要一个属性。name属性,此属性的值是图像标记中使用的usemap属性的值。此外,地图标签作为区域标签的容器标签工作,该标签定义了形状和坐标,以指定点或者区域,当我们单击该点或者区域时,我们将导航到另一个页面或者图像。

JavaScript代码:

<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:///map.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.com/"

            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>
日期:2020-04-11 23:04:37 来源:oir作者:oir