<img src="wd.jpg" width="" height="" align="" alter=""/>align属性设置图片与同行的文字的位置(在文本中)align相对于整个段落,(在段落中)
<img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />(重点)
在img中可以定义中含有useMap属性可以跳转到Map标签
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
<area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
<area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>
注释:area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。在 HTML 中,<area> 没有结束标签。
注释:<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性(取决于浏览器),所以我们应同时向 <map> 添加 id 和 name 属性。
<area>的属性有shape="circle|default |rect |poly ”coords定义的是坐标点,href是链接地址。
定义和用法
coords 属性规定区域的 x 和 y 坐标。
coords 属性与 shape 属性配合使用,来规定区域的尺寸、形状和位置
图像左上角的坐标是 "0,0"。
详细解释:
<area> 标签的 coords 属性定义了客户端图像映射中对鼠标敏感的区域的坐标。坐标的数字及其含义取决于 shape 属性中决定的区域形状。可以将客户端图像映射中的超链接区域定义
为矩形、圆形或多边形等。
下面列出了每种形状的适当值:
圆形:shape="circle",coords="x,y,r"
这里的 x 和 y 定义了圆心的位置("0,0" 是图像左上角的坐标),r 是以像素为单位的圆形半径。
多边形:shape="polygon",coords="x1,y1,x2,y2,x3,y3,..."
每一对 "x,y" 坐标都定义了多边形的一个顶点("0,0" 是图像左上角的坐标)。定义三角形至少需要三组坐标;高纬多边形则需要更多数量的顶点。
多边形会自动封闭,因此在列表的结尾不需要重复第一个坐标来闭合整个区域。
矩形:shape="rectangle",coords="x1,y1,x2,y2"
第一个坐标是矩形的一个角的顶点坐标,另一对坐标是对角的顶点坐标,"0,0" 是图像左上角的坐标。请注意,定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。
例如,下面的 XHTML 片段在一个 100x100 像素图像的右下方四分之一处,定义了一个对鼠标敏感的区域,并在图像的正中间定义了一个圆形区域。
分享到:
相关推荐
* `<area>`: 定义图像映射内部的区域 链接标签 * `<a>`: 定义链接 * `href`: 规定链接指向的页面的 URL * `target`: 规定在何处打开链接文档 表格标签 * `<table>`: 定义表格 * `<tr>`: 定义表格行 * `<td>`: ...
" ></iframe> <br> <br> <br> </div><br> <img name="map" src="/image/maptop.gif" width="950" height="976" border="0" id="map" usemap="#m_map" alt="" /><br> <map name="m_map" id="m_map"><br> <area ...
6、<area> 定义图像映射中的区域。 7、<article> 定义外部的内容。 8、<aside> 定义article 以外的内容。 9、<audio> 定义声音内容。 10、<b> 定义粗体文本。 11、<base> 定义页面中链接的基准 URL。 12、<bdo> 定义...
<img src="images/spacer.gif" alt="setalpm" width="120" height="120" border="0" usemap="#Map" class="rss" /> <map name="Map"> <area shape="circle" coords="60,60,63" href="sc.chinaz.com"> </map> </...
<td width="530" height="175" valign="top"><img src="images/main.gif" width="530" height="175" border="0" usemap="#Map"></td> </tr> <tr> <td height="36" valign="top"><table width="530" border="0" ...
<img src="img/机器猫.png" usemap="map" width="%" height="%"> <map id="map" name="map"> <area shape="circle" coords="200,50,30" href="Introduce.html" title="这是机器猫的左眼睛" target="_blank"> ...
<img >/images/dl.gif" width="81" height="22" border="0" usemap="#Map"> 上面的图片在<body>中 而下面这句放入<body>外 <map name="Map"> <area shape="rect" coords="3,3,36,19" href="#"> <area ...
</TR></TBODY></TABLE><MAP id=Map name=Map> <AREA shape=RECT coords=418,199,529,222 href="http://vip12.us.la/index0.asp.htm"> <AREA shape=RECT coords=410,350,543,402 href=...
这个过程需要使用<map>标签和<area>标签来定义热点区域,使用usemap属性来关联图像与热点区域。 四、图像地图的应用 图像地图广泛应用于网页设计中,例如在网站的首页上使用图像地图来实现导航,或者在电商网站上...
vue实现在图片中画矩形框(JS图片画方块定位坐标),并得到对角坐标,并拿到对应坐标制作图片热区并设置map中area的样式(图片热区map area的用法)
img标签中的usemap属性可引用的map标签中的id或name属性(取决于浏览器),所以我们应同时向map标签添加id和name属性。 示例 例如我们想在下面一张图实现九个热点区域,不切图,就使用map标签。 首先用 ps 得到几...
<map name="Map11"> <area shape="rect" coords="14,35,116,96" href=...
<img class="lazy" data-original="[vod:pic]" src="{maccms:path}images/blank.png" alt="[vod:name]" /> ****************************系统内置JS、CSS函数库说明 结束**************************** *********...
imgmaptool 轻松创建html图像地图的工具
图片地图 React图像映射组件的百分比 安装 $ yarn add @qiuz/react-image-map # or $ npm install @qiuz/react-image-map 获取地图 ... (area: AreaType, index: number) => void noop map Area
8.4.3 创建图像映射(map元素、area元素) 8.4.4 设置热点默认链接 8.4.5 创建服务端图像映射 8.4.6 客户端图像映射和服务端图像映射混合 8.5 飘浮对象和图文混排 8.5.1 飘浮对象的定义 8.5.2 飘浮对象周围的文本的...
var map , mapName , img , nodeName = element . nodeName . toLowerCase ( ) , isTabIndexNotNaN = ! isNaN ( $ . attr ( element , 'tabindex' ) ) ; if ( 'area' === nodeName ) { map = element . ...
return e},isOverAxis:function(a,b,c){return a>b&&a<b+c},isOver:function(b,c,d,e,f,g){return a.ui.isOverAxis(b,d,f)&&a.ui.isOverAxis(c,e,g)}}))})(jQuery);/*! * jQuery UI Widget 1.8.18 * * Copyright ...
[2884071] [AIX host] prefetch: EIP [00010000] > CS.limit [0000ffff] [3053542] 64 bit mode: far-jmp instruction is error [3011112] error compile vs2008/2010 with X2APIC [3002017] compile error with...