页面图像动态加热区,(使用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>
分享到:
相关推荐
通常情况下,`<map>`标签会配合`<img>`标签一起使用,其中`<img>`标签的`usemap`属性值应与`<map>`标签的`name`或`id`属性值相匹配。 ##### 2.2 标签结构 `<map>`标签的基本结构如下: ```html <img src="image....
注意,虽然`<map>`和`<area>`标签在HTML4和HTML5中都有支持,但在HTML5中,`<map>`标签已被推荐用于语义化更好的`<figure>`和`<figcaption>`元素结合使用。例如: ```html <figure> <img src="image.jpg" usemap=...
博文链接提供的资源可能是一个关于如何使用`<map>`标签的实际示例,其中`city_map.gif`可能是包含不同城市区域的静态图像,而`a.html`可能是包含`<map>`标签代码的HTML页面。下面将详细解释`<map>`标签及其相关知识...
通过以上方法,你可以创建出兼容所有浏览器的HTML图像映射,利用`<map>`和`<area>`标签为用户提供交互式的图像体验。在实际应用中,可以根据需要调整`coords`和`shape`,以适应任何复杂的图像布局。
在网页设计与开发中,HTML的`<map>`标签扮演着一个非常重要的角色,它允许我们为图像创建可交互的热点区域,即所谓的图像映射(image-map)。通过这种方式,用户可以点击图像上的特定部分来触发不同的动作或跳转到不同...
它常与 `<map>` 和 `<img>` 标签一起使用。例如: ```html <img src="image.jpg" usemap="#examplemap"> <map name="examplemap"> <area shape="rect" coords="0,0,82,126" href="http://www.example.com/"> </...
【jQuery开发的地图热点特效——Map标签详解】 在Web开发中,地图热点特效是一种常见的交互功能,它可以增强用户体验,使用户能够点击地图上的特定区域获取更多信息或执行特定操作。本篇文章将深入探讨如何利用...
本文将深入探讨如何在JSP中将`List`, `Set`, `Map`等集合类型的数据传递到Action,然后再通过`<s:iterator>`标签进行遍历显示。这种方式对于数据的展示和交互具有重要的实践意义。 首先,我们需要了解Struts2的工作...
`<optionsCollection>`是Struts2框架中`<s:select>`或`<s:checkboxlist>`标签的一部分,用于生成HTML的`<option>`元素。其主要属性包括: 1. `list`:这是必须的属性,用于指定包含选项的数据源。可以是一个Action...
### 图像的影像地图超链接(热点区域),map标签浅谈 #### 一、概述 在Web开发领域,HTML提供了一种独特的功能——通过使用`<map>`标签及其相关属性来实现图像上的热点区域(Hotspots)链接。这种方式不仅能够增强...
HTML5中新增了一些标签,如`<article>`、`<aside>`、`<audio>`、`<canvas>`、`<video>`等,同时也废弃了一些标签,如`<applet>`、`<basefont>`等。 HTML标签是网页开发的基础,熟悉这些标签的用途和功能是开发网页...
- 描述:HTML文档的根元素,所有的HTML代码都必须放在`<HTML>`标签内。 - 示例: ```html <HTML> <!-- 其他HTML代码 --> </HTML> ``` **2. `<HEAD>`** - 描述:定义了文档头部信息,包括标题、样式表链接、...
* `<map>`:定义图像映射 * `<object>`:定义内嵌对象 * `<param>`:定义对象的参数 * `<audio>`:定义声音内容 * `<video>`:定义视频内容 * `<source>`:定义媒介源 * `<track>`:定义视频或音频轨道 表单标签 *...
它可以与 `<map>` 和 `<img>` 标签结合使用,为图像的不同部分设置链接。 ### <b>: Bold `<b>` 标签用于定义粗体文本。虽然它通常用于强调文本,但在语义上并不强调文本的重要性,仅改变其样式。 ### <base>: ...
28. `<menu>` 和 `<dir>`:这两个列表标签在HTML5中不再推荐使用,一般用`<ul>`代替。 29. `<dl>`:定义列表,包含`<dt>`(定义条目)和`<dd>`(定义内容)。 30. `<table>`:表格标签,用于创建数据表格。 31. `...
HTML,全称HyperText Markup ...这些只是HTML标签的一部分,HTML5引入了许多新标签,如`<NAV>`, `<ARTICLE>`, `<SECTION>`, `<ASIDE>`等,增强了语义化和无障碍性。了解并熟练使用这些标签是构建有效网页的基础。
<map name="worldmap"> <area shape="rect" coords="0,0,82,126" href="http://example.com" alt="China"> </map> ``` ##### 9. `<article>` - **用途**:定义文章。 - **属性**: - `cite`:引用源。 - `...