`
Mr_Chunlei
  • 浏览: 28753 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

HTML标签<img><map><area>

 
阅读更多

<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 像素图像的右下方四分之一处,定义了一个对鼠标敏感的区域,并在图像的正中间定义了一个圆形区域。

分享到:
评论

相关推荐

    HTML标签总结,包含HTML4和HTML5

    * `&lt;area&gt;`: 定义图像映射内部的区域 链接标签 * `&lt;a&gt;`: 定义链接 * `href`: 规定链接指向的页面的 URL * `target`: 规定在何处打开链接文档 表格标签 * `&lt;table&gt;`: 定义表格 * `&lt;tr&gt;`: 定义表格行 * `&lt;td&gt;`: ...

    js 框架之一

    " &gt;&lt;/iframe&gt; &lt;br&gt; &lt;br&gt; &lt;br&gt; &lt;/div&gt;&lt;br&gt; &lt;img name="map" src="/image/maptop.gif" width="950" height="976" border="0" id="map" usemap="#m_map" alt="" /&gt;&lt;br&gt; &lt;map name="m_map" id="m_map"&gt;&lt;br&gt; &lt;area ...

    Html5中文手册(程序员必备手册)

    6、&lt;area&gt; 定义图像映射中的区域。 7、&lt;article&gt; 定义外部的内容。 8、&lt;aside&gt; 定义article 以外的内容。 9、&lt;audio&gt; 定义声音内容。 10、&lt;b&gt; 定义粗体文本。 11、&lt;base&gt; 定义页面中链接的基准 URL。 12、&lt;bdo&gt; 定义...

    博客网站首页界面

    &lt;img src="images/spacer.gif" alt="setalpm" width="120" height="120" border="0" usemap="#Map" class="rss" /&gt; &lt;map name="Map"&gt; &lt;area shape="circle" coords="60,60,63" href="sc.chinaz.com"&gt; &lt;/map&gt; &lt;/...

    个人网页模版

    &lt;td width="530" height="175" valign="top"&gt;&lt;img src="images/main.gif" width="530" height="175" border="0" usemap="#Map"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td height="36" valign="top"&gt;&lt;table width="530" border="0" ...

    兰理工网页作业之个人简历制作

    &lt;img src="img/机器猫.png" usemap="map" width="%" height="%"&gt; &lt;map id="map" name="map"&gt; &lt;area shape="circle" coords="200,50,30" href="Introduce.html" title="这是机器猫的左眼睛" target="_blank"&gt; ...

    一张图片分割,用input框形成按钮

    &lt;img &gt;/images/dl.gif" width="81" height="22" border="0" usemap="#Map"&gt; 上面的图片在&lt;body&gt;中 而下面这句放入&lt;body&gt;外 &lt;map name="Map"&gt; &lt;area shape="rect" coords="3,3,36,19" href="#"&gt; &lt;area ...

    腾讯公司活动网-首页简介

    &lt;/TR&gt;&lt;/TBODY&gt;&lt;/TABLE&gt;&lt;MAP id=Map name=Map&gt; &lt;AREA shape=RECT coords=418,199,529,222 href="http://vip12.us.la/index0.asp.htm"&gt; &lt;AREA shape=RECT coords=410,350,543,402 href=...

    Lesson01_08 图像地图

    这个过程需要使用&lt;map&gt;标签和&lt;area&gt;标签来定义热点区域,使用usemap属性来关联图像与热点区域。 四、图像地图的应用 图像地图广泛应用于网页设计中,例如在网站的首页上使用图像地图来实现导航,或者在电商网站上...

    vue实现在图片中画矩形框,并得到对角坐标,设置map中area的样式.zip

    vue实现在图片中画矩形框(JS图片画方块定位坐标),并得到对角坐标,并拿到对应坐标制作图片热区并设置map中area的样式(图片热区map area的用法)

    用CSS中的map标签制作单图多区域点击的示例

     img标签中的usemap属性可引用的map标签中的id或name属性(取决于浏览器),所以我们应同时向map标签添加id和name属性。 示例 例如我们想在下面一张图实现九个热点区域,不切图,就使用map标签。 首先用 ps 得到几...

    旺铺分类代码

    &lt;map name="Map11"&gt; &lt;area shape="rect" coords="14,35,116,96" href=...

    苹果8XPC和手机二合一完整版

    &lt;img class="lazy" data-original="[vod:pic]" src="{maccms:path}images/blank.png" alt="[vod:name]" /&gt; ****************************系统内置JS、CSS函数库说明 结束**************************** *********...

    imgmaptool:轻松创建html图像地图的工具

    imgmaptool 轻松创建html图像地图的工具

    react-image-map:React图像图

    图片地图 React图像映射组件的百分比 安装 $ yarn add @qiuz/react-image-map # or $ npm install @qiuz/react-image-map 获取地图 ... (area: AreaType, index: number) =&gt; void noop map Area

    HTML开发王

    8.4.3 创建图像映射(map元素、area元素) 8.4.4 设置热点默认链接 8.4.5 创建服务端图像映射 8.4.6 客户端图像映射和服务端图像映射混合 8.5 飘浮对象和图文混排 8.5.1 飘浮对象的定义 8.5.2 飘浮对象周围的文本的...

    Focusability:突出显示可聚焦元素

    var map , mapName , img , nodeName = element . nodeName . toLowerCase ( ) , isTabIndexNotNaN = ! isNaN ( $ . attr ( element , 'tabindex' ) ) ; if ( 'area' === nodeName ) { map = element . ...

    jquery需要的所有js文件

    return e},isOverAxis:function(a,b,c){return a&gt;b&&a&lt;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 ...

    Bochs - The cross platform IA-32 (x86) emulator

    [2884071] [AIX host] prefetch: EIP [00010000] &gt; CS.limit [0000ffff] [3053542] 64 bit mode: far-jmp instruction is error [3011112] error compile vs2008/2010 with X2APIC [3002017] compile error with...

Global site tag (gtag.js) - Google Analytics