HTML <map> 设置图热点

简介: 需要在一张图片中,设置一个区域为热点就用到了 定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。 所有主流浏览器都支持 标签。

需要在一张图片中,设置一个区域为热点就用到了<map>

定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。

复制代码
<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" border="0" />

<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" style="cursor: pointer" alt="Venus" />


  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" /> 


  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" /> 


</map>
复制代码

所有主流浏览器都支持 <map> 标签。

提示和注释:

注释:area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

注释:<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性(取决于浏览器),所以我们应同时向 <map> 添加 id 和 name 属性。

语法

<a coords="value">

属性值

描述
x1,y1,x2,y2 如果 shape 属性设置为 "rect",则该值规定矩形左上角和右下角的坐标。
x,y,radius 如果 shape 属性设置为 "circ",则该值规定圆心的坐标和半径。
x1,y1,x2,y2,..,xn,yn 如果 shape 属性设置为 "poly",则该值规定多边形各边的坐标。如果第一个坐标和最后一个坐标不一致,那么为了关闭多边形,浏览器必须添加最后一对坐标。
 
 
相关文章
|
3月前
|
前端开发
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
|
6月前
|
JavaScript
DOM 属性列表(命名节点图 Named Node Map)
`DOM`中的`Named Node Map`是元素节点属性的列表,自动更新增删操作。代码示例载入&quot;books.xml&quot;,获取第一个`&lt;book&gt;`元素的属性列表,`x.length`显示属性数量,`x.getNamedItem(&quot;category&quot;).nodeValue`输出&quot;category&quot;属性值,如&quot;cooking&quot;,并显示属性总数1。
|
4月前
|
前端开发
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
|
4月前
|
Web App开发 编解码 移动开发
HTML页面关于高分屏的设置
HTML页面关于高分屏的设置
65 0
|
4月前
|
Web App开发 编解码 移动开发
html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式
html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式
|
5月前
|
JSON JavaScript 数据格式
文本-----wangEditor的使用,设置和获取内容,展示HTML无样式怎么办????console同步展示怎样写,Vue的配置在Vue3配置文件中的配置,是editor中的v-model绑定的值
文本-----wangEditor的使用,设置和获取内容,展示HTML无样式怎么办????console同步展示怎样写,Vue的配置在Vue3配置文件中的配置,是editor中的v-model绑定的值
|
6月前
|
前端开发 Java UED
设置HTML元素的背景颜色
设置HTML元素的背景颜色
|
6月前
|
JavaScript
DOM 属性列表(命名节点图 Named Node Map)
`DOM`的`Named Node Map`是属性节点列表,由元素的`attributes`属性返回。它自动更新增删属性。示例代码加载&quot;books.xml&quot;,获取第一个`&lt;book&gt;`元素的属性列表,`x.getNamedItem(&quot;category&quot;).nodeValue`显示&quot;cooking&quot;,`x.length`显示属性数量1。
|
7月前
|
JavaScript
DOM 属性列表(命名节点图 Named Node Map)
`DOM`的`Named Node Map`代表元素的属性列表,它是一个自动更新的节点集合。当属性增删时,列表随之变化。以下代码示例加载&quot;books.xml&quot;,获取第一个`&lt;book&gt;`元素的属性节点列表,`x.length`表示属性数量,`x.getNamedItem(&quot;category&quot;).nodeValue`显示&quot;category&quot;属性值,如&quot;cooking&quot;,并输出属性总数1。
|
6月前
|
JavaScript
DOM 属性列表(命名节点图 Named Node Map)
**DOM的NamedNodeMap概括:**它表示元素的属性节点列表,如`&lt;book&gt;`的`attributes`。这个映射自动更新,添加或删除属性时响应变化。代码示例加载&quot;books.xml&quot;,获取首个`&lt;book&gt;`的属性,`x.getNamedItem(&quot;category&quot;).nodeValue`显示类别,`x.length`显示属性数。输出示例:类别为&quot;cooking&quot;,属性计数为1。