zoukankan      html  css  js  c++  java
  • 定义热点区域

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

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

      定义热点区域,需要使用<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>
  • 相关阅读:
    分享网页相关好用小工具
    【转】Expire Google Drive Files 让Google Docs云盘共享连接在指定时间后自动失效
    习题 5: 更多的变量和打印 | 笨办法学 Python
    笨办法学 Python (Learn Python The Hard Way)
    【转】pycharm快捷键、常用设置、包管理
    ArcGIS学习推荐
    WPF 单实例应用程序
    推荐一个 HTML5在线的流程图工具——ProcessOn
    WPF Expander控件(扩展面板)
    WPF 的拖拽操作(DragDrop)
  • 原文地址:https://www.cnblogs.com/xiaowie/p/10510532.html
Copyright © 2011-2022 走看看