- ES6 教程
- ES6 - 主页
- ES6 - 概述
- ES6 - 环境
- ES6 - 语法
- ES6 - 变量
- ES6 - 运算符
- ES6 - 决策
- ES6 - 循环
- ES6 - 函数
- ES6 - 事件
- ES6 - Cookie
- ES6 - 页面重定向
- ES6 - 对话框
- ES6 - 无效关键字
- ES6 - 页面打印
- ES6 - 对象
- ES6 - 数字
- ES6 - 布尔值
- ES6 - 字符串
- ES6 - 符号
- ES6 - 新的字符串方法
- ES6 - 数组
- ES6 - 日期
- ES6 - 数学
- ES6 - 正则表达式
- ES6 - HTML DOM
- ES6 - 迭代器
- ES6 - 集合
- ES6 - 类
- ES6 - 地图和集合
- ES6 - 承诺
- ES6 - 模块
- ES6 - 错误处理
- ES6 - 对象扩展
- ES6 - 反射 API
- ES6 - 代理 API
- ES6 - 验证
- ES6 - 动画
- ES6 - 多媒体
- ES6 - 调试
- ES6 - 图像映射
- ES6 - 浏览器
- ES7 - 新特性
- ES8 - 新特性
- ES9 - 新特性
- ES6 有用资源
- ES6 - 快速指南
- ES6 - 有用的资源
- ES6 - 讨论
ES6 - 图像映射
您可以使用 JavaScript 创建客户端图像映射。客户端图像地图由<img />标记的 usemap 属性启用,并由特殊的 <map> 和<area>扩展标记定义。
像平常一样,使用 <img /> 元素将要形成地图的图像插入到页面中,只不过它带有一个名为 usemap 的额外属性。usemap属性的值是您即将遇到的 <map> 元素上 name 属性的值,前面带有井号或井号。
<map> 元素实际上创建图像的地图,通常紧跟在 <img /> 元素之后。它充当实际定义可点击热点的 <area /> 元素的容器。<map> 元素只携带一个属性,即 name 属性,它是标识地图的名称。这就是 <img /> 元素如何知道要使用哪个 <map> 元素的方式。
<area> 元素指定定义每个可点击热点边界的形状和坐标。
以下代码结合了图像映射和 JavaScript,当鼠标移到图像的不同部分时,在文本框中生成一条消息。
<html> <head> <title>Using JavaScript Image Map</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> <!-- Create Mappings --> <img src = "//images/usemap.gif" 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 = "/perl/index.htm" alt = "Perl Tutorial" target = "_self" onMouseOver = "showTutorial('perl')" onMouseOut = "showTutorial('')"/> <area shape = "rect" coords = "22,83,126,125" href = "/html/index.htm" alt = "HTML Tutorial" target = "_self" onMouseOver = "showTutorial('html')" onMouseOut = "showTutorial('')"/> <area shape = "circle" coords = "73,168,32" href = "/php/index.htm" alt = "PHP Tutorial" target = "_self" onMouseOver = "showTutorial('php')" onMouseOut = "showTutorial('')"/> </map> </body> </html>
成功执行上述代码后将显示以下输出。您可以通过将鼠标光标放在图像对象上来感受地图概念。