zoukankan      html  css  js  c++  java
  • map area

    area不能独立出现, 必须嵌套在map中, map只作为area的容器:
    shape属性指明了区域的形状, coords指明了形状边界的几个点(左、上、右、下), href为导航到哪里的url
    
    <map name="Map">
    <area shape="rect" coords="890,50,947,74" href="javascript:window.external.AddFavorite
    
    ('http://www.qdtwjy.com/','我的个人网站')" target="_top">
    <area shape="rect" coords="815,52,875,74" href="#" onClick="this.style.behavior='url
    
    (#default#homepage)';this.setHomePage('www.qdtwjy.com');">
    </map>
    
    怎样在一个图片中做多个链接?
    热点链接可以帮我们解决这个问题,这种效果的实质是把一幅图片划分为不同的热点区域,再让不同的区域进行超链接。
    
    要完成地图区域超链接要用到三种标签:<img><map><area><img src="图形文件名" usemap="#图的名称">
         <map name="图的名称">
         <area shape=形状 coords=区域座标列表 href="URL资源地址">
         <!--可根据需要定义多少个热点区域-->
         <area shape=形状 coords=区域座标列表 href="URL资源地址">
         </map>
    【1】shape -- 定义热点形状
              shape=rect:  矩形
              shape=circle:圆形
              shape=poly:  多边形
    
    【2】coords -- 定义区域点的坐标
    
         a.矩形:必须使用四个数字,前两个数字为左上角座标,后两个数字为右下角座标
             例:<area shape=rect coords=100,50,200,75 href="URL">
    
         b.圆形:必须使用三个数字,前两个数字为圆心的座标,最后一个数字为半径长度
             例:<area shape=circle coords=85,155,30 href="URL">
    
         c.任意图形(多边形):将图形之每一转折点座标依序填入
    例:<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">
    demo :
    <img src="../menu.gif" width="204" height="510" border="0" usemap="#Map" />
    <map name="Map" id="Map">
        <area shape="rect" coords="12,37,181,88" href="http://www.baidu.com" onFocus="this.blur()"/>
        <area shape="rect" coords="12,97,182,143" href="http://www.sina.com" />
        <area shape="rect" coords="18,155,179,200" href="http://www.google.com" />
        <area shape="rect" coords="18,211,182,260" href="http://www.baidu.com" />
        <!--<area shape="rect" coords="12,444,182,490" href="sm-textfile.html" target="pcs"/> -->
        <!-- onFocus="this.blur()"   去掉虚线框 -->
    </map>
  • 相关阅读:
    VMware + CentOS 7搭建环境(二)
    VMware + CentOS 7搭建环境(一)
    电脑清理的问题整理
    windows下搭建vue+webpack的开发环境
    git使用指南
    如何使用前端技术设置地理围栏?
    js点击按钮button效果(波效果)
    计算两个日期时间之间的时间差:28小时38分钟
    jQuery实现的全选、反选和获取当前所有选中的值功能
    vue恼人的node_modules目录删除方法
  • 原文地址:https://www.cnblogs.com/liuswi/p/2754640.html
Copyright © 2011-2022 走看看