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>
  • 相关阅读:
    LeetCode Binary Tree Inorder Traversal
    LeetCode Populating Next Right Pointers in Each Node
    LeetCode Construct Binary Tree from Inorder and Postorder Traversal
    LeetCode Reverse Linked List II
    LeetCode Populating Next Right Pointers in Each Node II
    LeetCode Pascal's Triangle
    Palindrome Construct Binary Tree from Preorder and Inorder Traversal
    Pascal's Triangle II
    LeetCode Word Ladder
    LeetCode Binary Tree Zigzag Level Order Traversal
  • 原文地址:https://www.cnblogs.com/liuswi/p/2754640.html
Copyright © 2011-2022 走看看