<img src="data:images/02.gif" title="flower" usemap="#mm" />
<map name="mm" id="mm">
<area shape="circle" coords="50,50,20" href="http://www.baidu.com/" />
<area shape="rect" coords="50,50,100,120" href="http://www.baidu.com/" />
<area shape="poligon" coords="50,80,70,20,30,50" href="http://www.baidu.com/" />
</map>

shape和coords:是两个主要的参数,用于设定热点的形状和大小。其基本用法如下:

<area shape="rect" coords="x1, y1,x2,y2" href=url>表示设定热点的形状为矩形,左上角顶点坐标为(X1,y1),右下角顶点坐标为(X2,y2)。

<area shape="circle" coords="x1, y1,r" href=url>表示设定热点的形状为圆形,圆心坐标为(X1,y1),半径为r。

<area shape="poligon" coords="x1, y1,x2,y2 ......" href=url>表示设定热点的形状为多边形,各顶点坐标依次为(X1,y1)、(X2,y2)、(x3,y3)........

area标签circle/rect/poligon坐标的更多相关文章

  1. <area> 标签

    定义和用法 <area> 标签定义图像映射中的区域(注:图像映射指得是带有可点击区域的图像). area 元素总是嵌套在 <map> 标签中. 注释:<img> 标 ...

  2. map,area标签

    map,area标签 <img src ="planets.gif" alt="Planets" usemap ="#planetmap&quo ...

  3. html area标签详解

    <area> 标签定义图像映射中的区域(注:图像映射指得是带有可点击区域的图像). area 元素总是嵌套在 <map> 标签中. 注:<img> 标签中的 use ...

  4. HTML <area> 标签区域map标签

    1.距形:(左上角顶点坐标为(x1,y1),右下角顶点坐标为(x2,y2)) <area shape="rect" coords="x1,y1,x2,y2" ...

  5. HTML图片热区 map area 标签

    实例 <img src ="planets.gif" alt="Planets" usemap ="#planetmap" /> ...

  6. html中map标签和area标签的应用

    map标签的用途:是与img标签绑定使用的,常被用来赋予给客户端图像某处区域特殊的含义,点击该区域可跳转到新的文档. 因为map标签是与img标签绑定使用的,所以我们需要给map标签添加ID和name ...

  7. html中map标签和area标签的应用(总结)

    html中map标签和area标签的应用(总结) 一.总结 一句话总结: html中map标签和area标签和组成图片地图,在前端优化中可以减少http请求 1.map标签的用途是什么? 图片地图:是 ...

  8. map+area标签

    map标签是用于定义一个客户端的图像映射即带有可点击区域的一幅图像,配合area标签 area 元素永远嵌套在 map 元素内部.area 元素可定义图像映射中的区域 例:要实现一幅地图上鼠标点击或者 ...

  9. HTML <area> 标签 带有可点击区域的图像映射(图像映射指的是带有可点击区域的图像)

    例子: <img src="planets.gif" width="145" height="126" alt="Plane ...

随机推荐

  1. bower常用命令

    bower install loadash --save bower uninstall loadash --save bower init bower install loadash#2.2.1 b ...

  2. HDU 3863 (博弈) No Gambling

    这是我见过的最简单的一道博弈了,其实不要被复杂的棋盘吓到了. 首先肯定会有而且仅有一个人胜,而且因为棋盘是对称的,所以先手相对于后手肯定更有优势,那么肯定是先手赢. 这是不是严格的推理,但是确实比较容 ...

  3. Android telnet RPi 2B

    /************************************************************************* * Android telnet RPi 2B * ...

  4. java多线程模拟停车系统

    import java.util.Random; import java.util.concurrent.ArrayBlockingQueue; import java.util.concurrent ...

  5. phonegap 退出确认

    实现 再按一次退出  ,这里只针对 主active继承 DroidGap 或者CordovaActive 以下有2种 方案1: 重写CordovaWebView类 新建类NobackWebView p ...

  6. 【转】【iOS系列】-iOS查看沙盒文件图文教程(真机+模拟器)

    原文网址:http://www.cnblogs.com/fengtengfei/p/5090276.html 1:模拟器 1.1 方法1: 程序中打印一下的地址,能直接前往沙盒路径. NSString ...

  7. mysql 在大型应用中的架构演变

    文正整理自:http://www.csdn.net/article/2014-06-10/2820160 可扩展性 架构的可扩展性往往和并发是息息相关,没有并发的增长,也就没有必要做高可扩展性的架构, ...

  8. concat、reverse面试题

    1.concat数组连接 ,,]; ,,]; ,,]; alert(arr3.concat(arr1,arr2)); 结果:9,9,9,2,3,4,5,6,7 2.reverse将数组内容颠个个 ,, ...

  9. CSS打造三级下拉菜单

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  10. eclipse 工程加入ant以支持自动打war包

    先在工程的根目录下建一个一builder.xml内容如下 <project basedir="." default="war" name="hb ...