定义热点区域

  热点区域就是为图像的局部区域定义超链接,当点击该热点区域时,会触发超链接,并跳转到其他网页或者页面的位置。

  热点区域是一种特殊的超链接形式,常用来在图像中设置导航,用户可以在一幅图定义多个热点区域,以实现单击不同的热区连接到不同的页面。

  定义热点区域,需要使用<map>和<area>标签来配合使用

    <map>:定义热点区域,包含必须的ID属性,定义热点区域的ID,或者定义可选的name的值属性,也可以作为一个句柄,与热点图像进行绑定

    <area>:定义图像映射中的区域,area匀速必须嵌套在<map>标签中,该标签包含一个必须设置的属性alt,定义热点区域的替换文本。该标签还包含多个可选的属性,说明如表

    <img>中的usemap属性可引用<map>中的id或 name属性(根据浏览器),所以应同时向<map>添加id和name属性,且设置相同的值。

属性

取值

说明

coords

坐标值

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

href

URL

定义此区域的目标URL

nohref

nohref  

从图像映射除某个区域

shape  

default、rectangle(矩形) circle(圆形) polygon(多边形)

定义区域的形状

trarget

_blank  _parent  _self  _top

规定在何处打开href属性指定的位置

圆形:shape=“circle” ,coords=“x,y,z”

  这里的x和y定义了圆心的位置("0,0" 是图像左上角的坐标),r是以像素为单位的

矩形:shape=“rectangle” ,coords="x1,y1,x2,y2"

  第一个坐标是矩形的一个叫的顶点坐标,另一对坐标是对角的顶点坐标,(“0,0”是定义图像左上角的顶点)

多边形:shape=“polygon” ,coords="x1,y1,x2,y2......."

  每一个“x,y”坐标都定义多边形的一个顶点,(“0,0”是图像的左上角的坐标。)

<div class="map">
        <img src="1.jpg" alt="df" usemap="Map" >
        <map name="Map" id="Map">
            <area shape="circle" coords="200,300,100" href="https://www.baidu.com/s?wd=西藏自治区" alt="西藏自治区">
        </map>
    </div>
原文地址:https://www.cnblogs.com/xiaowie/p/10510532.html