`

HTML <img> 标签的 ismap 和 usemap 属性

阅读更多
引用
http://www.w3school.com.cn/tags/tag_img_prop_ismap_usemap.asp




标签的 ismap 和 usemap 属性告诉浏览器这个图像是一个特殊的可视映射,可以通过鼠标来对一个或多个超链接进行选择,也就是通常所说的图像映射(image map)。



ismap 属性
图像映射的 ismap
样式被称为 &ldquo;服务器端&rdquo;图像映射,它只可以用在  标签标识的超链接里面。

请看下面的例子:

<a href="/example/map">
  <img src="/i/map.gif" ismap="ismap" />
</a>


当用户在 ismap 图像上单击了某处时,浏览器会自动把鼠标的 x、y 位置(相对于图像的左上角)发送到服务器端。特殊的服务器端软件(在本例中是 /example/map 程序)可以根据这些坐标来做出响应。



usemap 属性
usemap
属性提供了一种&ldquo;客户端&rdquo;的图像映射机制,有效地消除了服务器端对鼠标坐标的处理,以及由此带来的网络延迟问题。通过特殊的
和  标签,HTML 创作者可以提供一个描述 usemap
图像中超链接敏感区域坐标的映射,这个映射同时包含相应的超链接 URL。usemap 属性的值是一个 URL,它指向特殊的
区域。用户计算机上的浏览器将把鼠标在图像上单击时的坐标转换成特定的行为,包括加载和显示另外一个文档。

我们举例说明一下,下面这段源代码将一个 100x100 像素的图像 map.gif 映射为 4
个区域,当用户单击其中某一个区域时,将被链接到不同的文档中。请注意,在这个  标签中,我们已经有效地包含了对 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 中使用。

分享到:
评论

相关推荐

    HTML标签大全(包括标签内属性)

    - `&lt;IMG&gt;` 的属性,如 `ALIGN`, `WIDTH`, `HEIGHT`, `ALT`, `ISMAP`, `USEMAP`, `BORDER`, `HSpace`, `VSpace` 等用于控制图像的位置、尺寸、替换文本等。 - `&lt;MAP&gt;` 和 `&lt;AREA&gt;`:用于创建图像映射,点击图像的...

    html标签说明-适用于初学者.txt

    33. **`&lt;IMG&gt;`** 的 `ismap` 属性:将图像作为服务器端映射的一部分。 - **示例**: ```html &lt;IMG src="image.jpg" usemap="#map"&gt; ``` 34. **`&lt;IMG&gt;`** 的 `width` 和 `height` 属性:设置图像的宽度和高度。 ...

    介绍HTML各种标签

    - `&lt;IMG&gt;` 的 `ISMAP` 和 `USEMAP` 用于交互式图像地图。 这些标签构成了HTML的基础,允许开发者构建丰富且具有交互性的网页内容。随着HTML的发展,新的标签不断被引入,以更好地满足Web开发的需求和标准,例如...

    精品专题(2021-2022年收藏)html术语.doc

    随着HTML的发展,一些旧的标签(如`&lt;BLINK&gt;`)已被弃用,而新的标签和属性(如`&lt;EMBED&gt;`和`&lt;AREA&gt;`)则提供了更丰富的交互性和功能。在实际应用中,应遵循W3C的HTML5标准,以确保最佳的兼容性和可访问性。

    HTML代码大全常用的肯定有.pdf

    `&lt;img&gt;`标签插入图像,`&lt;img src="url" alt="***"&gt;`定义替换文本,`&lt;img ismap&gt;`或`&lt;img usemap="url"&gt;`用于创建可点击的图像地图。 9. **图像属性**:`width`和`height`设置图像尺寸,`border`添加边框,`hspace`...

    HTML语法大全,挺全面的

    - `&lt;IMG ISMAP&gt;` 和 `&lt;IMG USEMAP&gt;`:创建可点击的图像地图。 - `&lt;MAP&gt;` 和 `&lt;AREA&gt;`:定义图像地图的区域和链接。 - `&lt;IMG WIDTH&gt;` 和 `&lt;IMG HEIGHT&gt;`:设置图像尺寸。 - `&lt;IMG BORDER&gt;`:设置图像边框的宽度。...

    html常用标记手册.pdf

    这个《HTML常用标记手册》涵盖了HTML的一些基本元素和属性,这些元素构成了网页的基本结构和样式。以下是一些主要的HTML标记及其用途: 1. **文件类型和主体**: - `&lt;HTML&gt;` 和 `&lt;/HTML&gt;`:这是HTML文档的根元素,...

    HTML标记参考 HTML标记的较详细手册

    - `&lt;IMG ISMAP&gt;` 或 `&lt;IMG USEMAP&gt;`:创建可点击的图像地图。 这些HTML标记构成了网页的基本骨架,通过它们可以构建出丰富多样的网页内容和布局。在实际开发中,开发者还会结合CSS(Cascading Style Sheets)来...

    html学习代码大全

    - `图像`:`&lt;IMG&gt;`标签插入图像,`SRC`属性指定图像源,`ALT`属性提供替代文本。`ALIGN`属性控制图像的对齐方式,`WIDTH`和`HEIGHT`设定图像尺寸,`BORDER`设置边框宽度,`HSpace`和`VSpace`定义边距。`ISMAP`和`...

    html参考大全

    - `&lt;IMG&gt;` 用于插入图像,`SRC` 属性指定图像源,`ALT` 提供替代文本,`WIDTH` 和 `HEIGHT` 设置尺寸,`ISMAP` 和 `USEMAP` 创建可点击的图像地图。 5. **链接与图形**: - `&lt;A&gt;` 标签创建超链接,`HREF` 指定...

    HTML标记参考手册.pdf

    21. **图形**:`&lt;IMG&gt;` - 显示图像,`SRC`属性指图像源,`ALT`属性提供替代文本,`ISMAP`和`USEMAP`用于创建图像映射。 22. **图形属性**:包括`ALIGN`、`WIDTH`、`HEIGHT`、`BORDER`、`HSpace`、`VSpace`等,用于...

    总结php标记码

    - `&lt;IMG&gt;`:插入图像,`SRC`定义图像源,`ALT`提供替代文本,`WIDTH`和`HEIGHT`定义尺寸,`BORDER`、`HSPACE`和`VSPACE`控制边距,`ISMAP`和`USEMAP`创建可点击的图像地图。 - `&lt;MAP&gt;` 和 `&lt;AREA&gt;`:创建图像地图...

    HTML标记大全

    - `&lt;IMG&gt;`:插入图像,`SRC`属性指定图像源。 - `ALIGN`:图像的对齐方式,如`ALIGN="LEFT"`。 - `ALT`:为无法显示图像时提供替代文本。 - `ISMAP` 和 `USEMAP`:创建可点击的图像地图。 - `&lt;MAP&gt;`:定义图像...

    (完整word版)HTML全部代码.doc

    - 不同的HTML版本引入了新的标签和属性,如`&lt;embed&gt;`、`http-equiv`等,部分标签在某些浏览器中可能不被支持或实现方式不同。 这些知识点构成了HTML的基础,学习并理解它们是创建网页和进行前端开发的必备技能。...

    html基本代码

    * 点选图:`&lt;IMG src='/URL' ISMAP&gt;`,需要 CGI 程式 * N2.0 点选图:`&lt;IMG src='/URL' USEMAP='URL'&gt;` * N2.0 地图:`&lt;MAP NAME='*'&gt;&lt;/MAP&gt;`,描述地图 * N2.0 段落:`&lt;AREA SHAPE='RECT' COORDS=',,,' href='/URL'...

    html标签全集

    属性 `ismap` 可以将 `&lt;img&gt;` 标签转换为图像地图。 #### 复杂组件标签 - **`&lt;frameset&gt;`**: 定义一个包含多个窗口(框架)的页面布局。属性如 `&lt;frame&gt;`、`&lt;frameset cols&gt;` 和 `&lt;frameset rows&gt;` 用于控制每个...

    HTML的基础知识.doc

    4. 图像:`&lt;IMG SRC="URL"&gt;` 插入图像,`ALIGN` 属性控制对齐方式,`ALT` 提供替代文本,`ISMAP` 和 `USEMAP` 用于交互式图像,`&lt;MAP&gt;` 和 `&lt;AREA&gt;` 定义图像地图。 5. 图像大小:`WIDTH` 和 `HEIGHT` 设置像素尺寸...

    html代码大全

    根据给定文件的信息,我们可以总结出以下HTML代码大全的相关知识点: ### 1. HTML 基础标签 ...这些基础标签和属性对于构建网页至关重要,掌握它们能够帮助开发者更好地进行网页设计与开发工作。

    前端练习01-前端-HTML(image)

    通过这个"前端练习01-前端-HTML(image)",你将会学习到如何使用`&lt;img&gt;`标签,并理解这些属性如何影响图像的展示和用户体验。实践中,你可以尝试创建不同场景,比如响应式图像、图片懒加载等,以深化对HTML图像处理...

Global site tag (gtag.js) - Google Analytics