0
点赞
收藏
分享

微信扫一扫

html中在图片中绘制指定区域实现相应的事件流程-area标签

律楷粑粑 2022-03-12 阅读 51


​​HTML 标签​​

示例

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

<map name="planetmap">
<area shape="rect" coords="0,0,110,260" href="sun.htm" alt="Sun" />
<area shape="circle" coords="129,161,10" href="mercur.htm" alt="Mercury" />
<area shape="circle" coords="180,139,14" href="venus.htm" alt="Venus" />
</map>

定义和用法

<area> 标签定义图像映射中的区域(注:图像映射指得是带有可点击区域的图像)。

area 元素总是嵌套在 <map> 标签中。

注释:​​<img>​​​ 标签中的 usemap 属性与 ​​map​​ 元素 name 属性相关联,创建图像与映射之间的联系。

提示和注释:

注释:<img> 中的 ​usemap​ 属性可引用 <map> 中的 ​id​ 或 ​name​ 属性(由浏览器决定),所以我们需要同时向 <map> 添加 id 和 name 两个属性。

必需的属性

属性

描述

​​alt​​

text

定义此区域的替换文本。

可选的属性

属性

描述

​​coords​​

坐标值

定义可点击区域(对鼠标敏感的区域)的坐标。

​​href​​

URL

定义此区域的目标 URL。

​​nohref​​

nohref

从图像映射排除某个区域。

​​shape​​




  • default
  • rect 
  • circ
  • poly


定义区域的形状。

​​target​​




  • _blank
  • _parent
  • _self
  • _top


规定在何处打开 href 属性指定的目标 URL。

演示代码 -- 在​​线演示代码​​

<a href="#">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603699159293&di=080243e3678327898c9f437b3f3e8d34&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F70%2F91%2F01300000261284122542917592865.jpg" alt="Planets" width="145" height="126" ismap="ismap" usemap="#planetmap">
</a>
<!-- usemap="#planetmap" 去掉可以看到定位点 -->
<map name="planetmap">
<area shape="rect" coords="0,0,20,20" href="javascript:;" alt="hah" onclick="areaClick()"> <!-- 矩形 -->

<area shape="poly" coords="243,90,471,257,642,146,669,9,699,231,616,237,568,389,507,430,358,401,113,464,20,301,128,148" href="javascript:;" alt="hah" onclick="areaClick()"><!-- 多变型形 -->

<area shape="circle" coords="10,40,10" href ="javascript:;" alt="Mercury" onclick="areaClick()" /> <!-- 圆形 -->
</map>
<script>
function areaClick(){
alert('哇哦!!!')
}
</script>

html中在图片中绘制指定区域实现相应的事件流程-area标签_html

html中在图片中绘制指定区域实现相应的事件流程-area标签_area_02

 地图绘制区域


如何不想显示区域的线条,可以设置css样式

area{outline: none}

对于低bai本的duIE浏览器,还需要配合 hidefocus 来实现
<area hidefocus="true" ..... />


html中在图片中绘制指定区域实现相应的事件流程-area标签_javascript_03

vue代码

<template>
<div class="chinaMap">
<a href="#">
<img
class="mapImg"
src="../../assets/img/qg/china_map.png"
alt="map"
ismap="ismap" usemap="#planetmap"
/>
</a>
<!-- usemap="#planetmap" -->
<map name="planetmap">
<!-- 西安部分 -->
<area
shape="poly"
coords="243,90,471,257,642,146,669,9,699,231,616,237,568,389,507,430,358,401,113,464,20,301,128,148"
href="javascript:;"
alt="hah"
@click="ckMap()"
/><!-- 多变型形 -->
</map>
</div>
</template>

<script>
export default {
data() {
return {};
},
mounted() {},
methods: {
ckMap(){
alert('dyh')
}
},
};
</script>

<style lang="less" scoped>
area{outline: none}
.chinaMap {
.mapImg {
width: 14rem;
// height: 8rem;
}
}
</style>

隐藏热点区域线条 

html中在图片中绘制指定区域实现相应的事件流程-area标签_ide_04





举报

相关推荐

0 条评论