javascript系列之image map

鱼馅饼

已于 2023-08-26 13:45:11 修改

阅读量236

点赞数

文章标签： javascript 开发语言

于 2023-08-18 12:59:09 首次发布

原文链接：https://www.tutorialspoint.com/javascript/javascript_image_map.htm

版权

一.欢迎来到我的酒馆

你可以使用JavaScript创建客户端的image map。客户端的image map通过<img/>标签的usemap属性启用，并由特殊的<map>和<area>扩展标记定义。
通过使用<img>元素将image插入到网页中，这里可以使用额外的属性usemap。usemap的属性值是<map>元素上name属性的值，要满足该属性，前面带有井号或哈希符号。
<map>元素实际上为图像创建map，通常紧跟在<img/>元素之后。它充当实际定义可点击热点的<area>元素的容器。<map>元素仅包含一个属性，即name属性，该属性是标识map的名称。这就是<img/>元素直到要使用哪个<map>
元素的方式。
<area>元素指定定义每个可单机边界的形状和坐标。
以下代码将image map和JavaScript组合在一起，以便在鼠标移动到图像的不同部分时在文本框中生成消息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function showTutorial(name){
            document.myform.stage.value = name;
        }
    </script>
</head>
<body>
    <form name="myform">
        <input type="text" name="stage" size="20"/>
    </form>
    <img src="/images/usemap.gif" alt="HTML map" border="0" usemap="#tutorial"/>
    <map name="tutorial">
        <area shape="poly"
              coords="74,0,113,29,98,72,52,72,38,27"
              href ="/perl/index.html" alt="Perl Tutorial"
              target="_self"
              onmouseover="showTutorial('perl')"
              onmouseout="showTutorial('')"/>
        <area shape="rect"
              coords="22,83,126,125"
              href="/html/index.html" alt="HTML tutorial"
              target="_self"
              onmouseover="showTutorial('html')"
              onmouseout="showTutorial('')" />
        <area shape="circle"
              coords="73,168,32"
              href="/php/index.html" alt="PHP tutorial"
              target="_self"
              onmouseover="showTutorial('php')"
              onmouseout="showTutorial('')"/>
    </map>
</body>
</html>

输出：
在这里插入图片描述

鱼馅饼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript系列之image map

map>元素实际上为图像创建map，通常紧跟在元素之后。元素仅包含一个属性，即name属性，该属性是标识map的名称。这就是元素直到要使用哪个客户端的image map通过标签的usemap属性启用，并由特殊的和扩展标记定义。通过使用元素将image插入到网页中，这里可以使用额外的属性usemap。usemap的属性值是元素上name属性的值，要满足该属性，前面带有井号或哈希符号。
复制链接

扫一扫