zoukankan      html  css  js  c++  java
  • 页面图像加热区 image map使用

    在Html中,给图像使用map标签,可以给图像的某个部分建立超连接,用法如下:

     <img src=img.gif usemap="#MAP-Name"> 
      <map name="MAP-Name" id="MAP-Name">  
    <area shape="rect|circle|poly" coords="#" href="url">
    </map>
    注:所有的坐标都是相对于图片左上角的

    其中,坐标coords对各个shape的解释如下:

    shape="rect" coords="x1,y1,x2,y2" // (x1,y1)=Upper Left, (x2,y2)=Lower Right

    即,当shape是矩形时,coords表示矩形左上及右下(x2, y2)的坐标
    shape="circle" coords="x,y,r" // (x,y)=Center, r=Radius

    即,当shape是圆形时,coords表示圆中心点坐标(x, y)及半径

    shape="poly" coords="x1,y1,x2,y2,x3,y3..." // (x1,y1>=First Corner, (x2,y2)=Second Corner, ...

    即,当shape是poly多边形时,coords表示多边形所有顶点的坐标(x1,y1),(x2,y2),(x3,y3)...


    注意:以上所有坐标都是相对于图形img.gif左上脚坐标而言的


    以下是一个例子:

    <img src="mapimg.gif" usemap="#Face">
    <map name="Face">
       <area shape="rect" href="page.html" coords="140,20,280,60">
       <area shape="poly" href="image.html" coords="100,100,180,80,200,140">
       <area shape="circle" href="new.html" coords="80,100,60">
    </map>

    作者:一修先生
             
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    Curling 2.0
    POJ
    免费馅饼
    每日一九度之 题目1090:路径打印
    每日一九度之 题目1089:数字反转
    每日一九度之 题目1084:整数拆分
    每日一九度之 题目1083:特殊乘法
    每日一九度之 题目1081:递推数列
    每日一九度之 题目1079:手机键盘
    每日一九度之 题目1077:最大序列和
  • 原文地址:https://www.cnblogs.com/1971ruru/p/2575091.html
Copyright © 2011-2022 走看看