<img> 标签的 ismap 和 usemap 属性告诉浏览器这个图像是一个特殊的可视映射,可以通过鼠标来对一个或多个超链接进行选择,也就是通常所说的图像映射(image map)。
ismap 属性
图像映射的 ismap 样式被称为 “服务器端”图像映射,它只可以用在 <a> 标签标识的超链接里面。
请看下面的例子:
<a href="/example/map">
<img src="/i/map.gif" ismap="ismap" />
</a>
当用户在 ismap 图像上单击了某处时,浏览器会自动把鼠标的 x、y 位置(相对于图像的左上角)发送到服务器端。特殊的服务器端软件(在本例中是 /example/map 程序)可以根据这些坐标来做出响应。
usemap 属性
usemap 属性提供了一种“客户端”的图像映射机制,有效地消除了服务器端对鼠标坐标的处理,以及由此带来的网络延迟问题。通过特殊的 <map> 和 <area> 标签,HTML 创作者可以提供一个描述 usemap 图像中超链接敏感区域坐标的映射,这个映射同时包含相应的超链接 URL。usemap 属性的值是一个 URL,它指向特殊的 <map> 区域。用户计算机上的浏览器将把鼠标在图像上单击时的坐标转换成特定的行为,包括加载和显示另外一个文档。
我们举例说明一下,下面这段源代码将一个 100x100 像素的图像 map.gif 映射为 4 个区域,当用户单击其中某一个区域时,将被链接到不同的文档中。请注意,在这个 <img> 标签中,我们已经有效地包含了对 ismap 图像映射的处理功能,这样,那些使用不具有 usemap 处理功能的浏览器用户,就可以通过另外一中途径,即服务器端机制来处理图像映射:
<a href="/example/map">
<img src="/i/map.gif" ismap="ismap" usemap="#map" />
</a>
<map name="map">
<area coords="0,0,49,49" href="link1.html">
<area coords="50,0,99,49" href="link2.html">
<area coords="0,50,49,99" href="link3.html">
<area coords="50,50,99,99" href="link4.html">
</map>
ismap 属性和 usemap 属性的应用差异
地图就是很好地应用 ismap 和 usemap 属性的一个示例,例如,在浏览一家全国范围的大公司网页时,用户可能会在地图上单击他们所居住的城市,以获得附近地区零售店的地址和电话号码等。
usemap 客户端处理图像映射的好处是,它不要求有服务器或特殊的服务器软件,与 ismap 机制不同,它可以用在非 web (无网络)环境中,例如在本地的文件或者 CD-ROM 中使用。
转载自:http://www.w3school.com.cn/tags/tag_img_prop_ismap_usemap.asp
分享到:
相关推荐
地图 节点模块,可轻松检查对象是否为 安装 $ npm install --save is-...const isMap = require ( 'is-map' ) ; isMap ( new Map ( ) ) ; //=> true isMap ( { } ) ; //=> false 有关的 执照 麻省理工学院:copyright:
各种接口规范:包括ISMAP sps OCR CRM SP等的借口协议
Mscgen( )是一个小程序,可以解析消息序列图描述并生成PNG,SVG,EPS或服务器端图像映射(ismap)作为输出。 该程序及其解析的语言类似于Graphviz Dot工具。 使用AsciiDoc mscgen过滤器,可以将消息序列图描述...
zip打包工具,打包zip,并响应到浏览器 * @param isMap 封装 文件名称与文件输入流 * @param response * @param zipName zip命名 * @throws IOException */
第1章 ZXME MMSC的接口和协议 1-1 1.1 概述 1-1 1.2 MMSC与外部网元接口 1-1 1.3 通信接口简介 1-2 1.4 协议简介 1-4 1.5 技术术语 1-5 第2章 接口描述 2-1 2.1 概述 2-1 2.2 MM1接口 2-2 2.2.1 接口描述 2-2 2.2.2 ...
@ annexe / ismap @ annexe / isnil @ annexe / isnonemptystring @ annexe /负 @ annexe / isnumber @ annexe / isplainobject @ annexe / isset @ annexe / isstring @ annexe / istypedarray @ annexe /...
例如{ "m": "yolo", 22}可以使用随附的template funcs来断言类型并更改如何处理值/键-示例请参见: : 模板功能要在处理混合json时声明类型,您可以使用以下功能: isInt isString isSlice isArray isMap 你可以像...
import styled , { ThemeProvider } from 'styled-components'import { by , is , map , isMap , byTheme , withProp } from 'styled-funcs'const theme = { colors : { primary : 'tomato' , black : '#333' , ...
不可变的测试用例实例 sh start.sh 结果是: Run test ...Immutable.Map.isMap(test1) true Immutable.Map.isMap(test2) true Iterable.isIterable(test1) true Iterable.isIterable(test2) true
图.gd .gd2 .gif .imap .imap_np .ismap .jpe .jpeg .jpg .mp .pdf 。清楚的.plain-ext .png .ps .ps2 .svg .svgz .vml .vmlz .vrml .wbmp .xdot 。生的从多个起始地址开始或用于多种功能的CFG也可以立即自动导出到...