`
忧里修斯
  • 浏览: 436225 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

html <map>标签

阅读更多
页面图像动态加热区,(使用map标签) 
在Html中,给图像使用map标签,可以给图像的某个部分建立超连接,用法如下:

<img src=img.gif usemap="MAP-Name">
<map name="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>
分享到:
评论

相关推荐

    html map 标签使用

    通常情况下,`&lt;map&gt;`标签会配合`&lt;img&gt;`标签一起使用,其中`&lt;img&gt;`标签的`usemap`属性值应与`&lt;map&gt;`标签的`name`或`id`属性值相匹配。 ##### 2.2 标签结构 `&lt;map&gt;`标签的基本结构如下: ```html &lt;img src="image....

    Html image 标签 配合 map使用

    注意,虽然`&lt;map&gt;`和`&lt;area&gt;`标签在HTML4和HTML5中都有支持,但在HTML5中,`&lt;map&gt;`标签已被推荐用于语义化更好的`&lt;figure&gt;`和`&lt;figcaption&gt;`元素结合使用。例如: ```html &lt;figure&gt; &lt;img src="image.jpg" usemap=...

    HTML map标签

    博文链接提供的资源可能是一个关于如何使用`&lt;map&gt;`标签的实际示例,其中`city_map.gif`可能是包含不同城市区域的静态图像,而`a.html`可能是包含`&lt;map&gt;`标签代码的HTML页面。下面将详细解释`&lt;map&gt;`标签及其相关知识...

    html中map热点area的使用全部代码和效果,兼容所有浏览器

    通过以上方法,你可以创建出兼容所有浏览器的HTML图像映射,利用`&lt;map&gt;`和`&lt;area&gt;`标签为用户提供交互式的图像体验。在实际应用中,可以根据需要调整`coords`和`shape`,以适应任何复杂的图像布局。

    html图像地图map标签的使用

    在网页设计与开发中,HTML的`&lt;map&gt;`标签扮演着一个非常重要的角色,它允许我们为图像创建可交互的热点区域,即所谓的图像映射(image-map)。通过这种方式,用户可以点击图像上的特定部分来触发不同的动作或跳转到不同...

    HTML标签解释大全

    它常与 `&lt;map&gt;` 和 `&lt;img&gt;` 标签一起使用。例如: ```html &lt;img src="image.jpg" usemap="#examplemap"&gt; &lt;map name="examplemap"&gt; &lt;area shape="rect" coords="0,0,82,126" href="http://www.example.com/"&gt; &lt;/...

    jquery开发的地图热点特效-map标签

    【jQuery开发的地图热点特效——Map标签详解】 在Web开发中,地图热点特效是一种常见的交互功能,它可以增强用户体验,使用户能够点击地图上的特定区域获取更多信息或执行特定操作。本篇文章将深入探讨如何利用...

    Struts2 JSP中将list,set ,Map传递到Action然后<s:iterator>遍历(三十五)

    本文将深入探讨如何在JSP中将`List`, `Set`, `Map`等集合类型的数据传递到Action,然后再通过`&lt;s:iterator&gt;`标签进行遍历显示。这种方式对于数据的展示和交互具有重要的实践意义。 首先,我们需要了解Struts2的工作...

    struts<optionsCollection>应用文档+实例

    `&lt;optionsCollection&gt;`是Struts2框架中`&lt;s:select&gt;`或`&lt;s:checkboxlist&gt;`标签的一部分,用于生成HTML的`&lt;option&gt;`元素。其主要属性包括: 1. `list`:这是必须的属性,用于指定包含选项的数据源。可以是一个Action...

    图像的影像地图超链接(热点区域),map标签浅谈

    ### 图像的影像地图超链接(热点区域),map标签浅谈 #### 一、概述 在Web开发领域,HTML提供了一种独特的功能——通过使用`&lt;map&gt;`标签及其相关属性来实现图像上的热点区域(Hotspots)链接。这种方式不仅能够增强...

    HTML标签总结,包含HTML4和HTML5

    HTML5中新增了一些标签,如`&lt;article&gt;`、`&lt;aside&gt;`、`&lt;audio&gt;`、`&lt;canvas&gt;`、`&lt;video&gt;`等,同时也废弃了一些标签,如`&lt;applet&gt;`、`&lt;basefont&gt;`等。 HTML标签是网页开发的基础,熟悉这些标签的用途和功能是开发网页...

    html标签 HTML学习

    - 描述:HTML文档的根元素,所有的HTML代码都必须放在`&lt;HTML&gt;`标签内。 - 示例: ```html &lt;HTML&gt; &lt;!-- 其他HTML代码 --&gt; &lt;/HTML&gt; ``` **2. `&lt;HEAD&gt;`** - 描述:定义了文档头部信息,包括标题、样式表链接、...

    html5标签大全

    * `&lt;map&gt;`:定义图像映射 * `&lt;object&gt;`:定义内嵌对象 * `&lt;param&gt;`:定义对象的参数 * `&lt;audio&gt;`:定义声音内容 * `&lt;video&gt;`:定义视频内容 * `&lt;source&gt;`:定义媒介源 * `&lt;track&gt;`:定义视频或音频轨道 表单标签 *...

    HTML标签英文单词

    它可以与 `&lt;map&gt;` 和 `&lt;img&gt;` 标签结合使用,为图像的不同部分设置链接。 ### &lt;b&gt;: Bold `&lt;b&gt;` 标签用于定义粗体文本。虽然它通常用于强调文本,但在语义上并不强调文本的重要性,仅改变其样式。 ### &lt;base&gt;: ...

    html标签大全

    28. `&lt;menu&gt;` 和 `&lt;dir&gt;`:这两个列表标签在HTML5中不再推荐使用,一般用`&lt;ul&gt;`代替。 29. `&lt;dl&gt;`:定义列表,包含`&lt;dt&gt;`(定义条目)和`&lt;dd&gt;`(定义内容)。 30. `&lt;table&gt;`:表格标签,用于创建数据表格。 31. `...

    HTML标签大全(包括标签内属性)

    HTML,全称HyperText Markup ...这些只是HTML标签的一部分,HTML5引入了许多新标签,如`&lt;NAV&gt;`, `&lt;ARTICLE&gt;`, `&lt;SECTION&gt;`, `&lt;ASIDE&gt;`等,增强了语义化和无障碍性。了解并熟练使用这些标签是构建有效网页的基础。

    HTML 5 标签参考

    &lt;map name="worldmap"&gt; &lt;area shape="rect" coords="0,0,82,126" href="http://example.com" alt="China"&gt; &lt;/map&gt; ``` ##### 9. `&lt;article&gt;` - **用途**:定义文章。 - **属性**: - `cite`:引用源。 - `...

Global site tag (gtag.js) - Google Analytics