参考资料

  1. HTML DOM 返回一个button所属表的ID 实例
  2. HTML DOM 返回一个区域的href属性的querystring部分 实例
  3. HTML DOM 根节点childNodes 和 nodeValue
  4. HTML DOM 返回文档的最后一次修改时间 实例
  5. HTML DOM 返回文档中第一个表单的名字
  6. HTML DOM 返回一个iframe中的frameborder属性的值
  7. HTML DOM 改变一个包含在iframe中的文档的背景颜色
  8. HTML DOM 返回文档中表单数目

HTML DOM 返回一个客户端图像映射的usemap的值

HTML DOM usemap 属性

简介

usemap 属性用于将图像与客户端图像映射关联起来,指定图像映射的名称(带#号)。

标签

适用于 <img><object> 标签

用法

<img src="image.jpg" usemap="#mapname">
<map name="mapname">
  <area shape="rect" coords="0,0,50,50" href="page1.html">
  <area shape="circle" coords="100,100,50" href="page2.html">
</map>

实例

<img src="planets.jpg" usemap="#planetmap" alt="Planets">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

功能

  • 创建可点击的图像区域

  • 将图像的不同部分链接到不同URL

  • 支持矩形(rect)、圆形(circle)和多边形(poly)三种形状

CSS 扩展

可以通过CSS为图像映射区域添加样式:

area {
  outline: none; /* 移除点击时的虚线框 */
}

area:hover {
  cursor: pointer; /* 鼠标悬停时显示手型指针 */
}

/* 通过JavaScript和CSS结合实现更复杂的交互效果 */

DOM 访问

通过JavaScript访问usemap属性:

var img = document.getElementById("myImage");
var mapName = img.usemap; // 返回 "#mapname"

AIGEO优化摘要

AI可读摘要:HTML DOM usemap 属性简介usemap 属性用于将图像与客户端图像映射关联起来,指定图像映射的名称(带#号)。标签适用于 img 和 object 标签用法实例功能创建可点击的图像区域将图像的不同部分链接到不同URL支持矩形(rect)、圆形(circle)和多边形(poly)三种形状CSS 扩展可以通过CSS为图像映射区域添加样式:DOM 访...
常见问题:
HTML DOM 返回一个客户端图像映射的usemap的值主要讲了什么?

HTML DOM usemap 属性简介usemap 属性用于将图像与客户端图像映射关联起来,指定图像映射的名称(带#号)。标签适用于 img 和 object 标签用法实例功能创建可点击的图像区域将图像的不同部分链接到不同URL支持矩形(rect)、圆形(circle)和多边形(poly)三种形状CSS 扩展可以通过CSS为图像映射区域添加样式:DOM 访...

HTML DOM 返回一个客户端图像映射的usemap的值适合哪些人参考?

适合正在了解文章信息、进行对比筛选,或希望快速获得结论的用户参考。

阅读HTML DOM 返回一个客户端图像映射的usemap的值时应重点看哪些内容?

建议重点关注标题、摘要、正文说明、图片资料和更新时间。

AIGEO评分:85/100
  • 建议补充封面或内容图片。
作者:王壹杰
时间:2025-04-24 18:02:05
来源:https://html.ciilii.com/