许多网点的主页都有一幅图象,你可以点击它的不同部位来进入网点的不同部分.例如,这幅图象可以包含一些图标,指定为新闻部分。对话部分及下载部分,如果这个网点的参观者想从主页立即进入新闻部分,他就可以简单地点击一下新闻的图标,包含有这些图标的图象就被称为image map
image map的另一个用途是在网点的每一页的顶部建立导航条,导航条包含了这个网点主要部分的菜单。同样,用户可以用导航条快速而简单地进入他所感兴趣的部分。例如,Netscape的网点上许多网页都有一个导航条.
这是image map的两个主要用途,然而只要我们去想,它还有很多别的用途。例如,你可以使用image map来搜集信息,假如你想知道参观你网点的人是来自世界的哪个角落,你就可以建立一幅世界地图的image map,参观者可通过点击地图来指出他们来自哪个国家。如果你想在一幅图象上显示一系列选择,就要使用image map.
有两种类型的image map:服务器端的及客户端的,当你使用服务器端image map时,服务器会在用户点击了图象上某一部位时决定采取什么行动;而在客户端image map中,则是由浏览器决定采取什么行动。服务器端image map与更多的浏览器有更好的兼容性,但是客户端image map更快。两种image 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>
分享到:
相关推荐
在`<img>`标签中使用`usemap`属性来关联图像与对应的`<map>`标签。其值通常是一个以`#`开头的字符串,对应于`<map>`标签中的`name`或`id`属性值。例如: ```html <map name="exampleMap"> ... </map> ``` 这样,当...
- 在使用`<map>`标签时,必须确保`<img>`标签中的`usemap`属性值与`<map>`标签的`name`或`id`属性值完全一致。 - 如果图像尺寸较大,建议适当调整`<area>`标签中的坐标值,以提高用户体验。 - 对于复杂的图像映射,...
注意,虽然`<map>`和`<area>`标签在HTML4和HTML5中都有支持,但在HTML5中,`<map>`标签已被推荐用于语义化更好的`<figure>`和`<figcaption>`元素结合使用。例如: ```html 交互式图像"> 这是一个交互式图像 ...
### 图像的影像地图超链接(热点区域),map标签浅谈 #### 一、概述 在Web开发领域,HTML提供了一种独特的功能——通过使用`<map>`标签及其相关属性来实现图像上的热点区域(Hotspots)链接。这种方式不仅能够增强...
通过以上方法,你可以创建出兼容所有浏览器的HTML图像映射,利用`<map>`和`<area>`标签为用户提供交互式的图像体验。在实际应用中,可以根据需要调整`coords`和`shape`,以适应任何复杂的图像布局。
博文链接提供的资源可能是一个关于如何使用`<map>`标签的实际示例,其中`city_map.gif`可能是包含不同城市区域的静态图像,而`a.html`可能是包含`<map>`标签代码的HTML页面。下面将详细解释`<map>`标签及其相关知识...
【jQuery开发的地图热点特效——Map标签详解】 在Web开发中,地图热点特效是一种常见的交互功能,它可以增强用户体验,使用户能够点击地图上的特定区域获取更多信息或执行特定操作。本篇文章将深入探讨如何利用...
这个名称将在`<img>`标签中引用,将图像与映射关联起来。例如: ```html <img src="fj_map.png" alt="Fiji Map" usemap="#fijiMap"> <map name="fijiMap"> ,0,100,100" href="north_fiji....
在上面的例子中,`<img>`标签的`usemap`属性引用了`<map>`的`name`属性,这样就能将图像与映射关联起来。`<area>`元素则定义了具体的可点击区域,包括形状(如矩形`rect`、圆形`circle`、多边形`polygon`等)、坐标...
`<map>`标签是用来定义一个图像映射,它并不直接在页面上显示任何内容,而是与`<img>`标签配合使用,为图像添加可点击的区域。`<map>`标签有一个必需的`name`属性,这个属性值用于在`<img>`标签的`usemap`属性中引用...
在HTML中插入图像通常使用 `<img>` 标签,其基本语法如下: ```html 图像文件url" alt="替代文本" /> ``` `src` 属性用于指定图像文件的URL,`alt` 属性则在浏览器无法加载图像时显示替代文本,同时对搜索引擎优化也...
"map-highlight"和"map-area"这两个标签暗示了我们将讨论的是地图组件中的特定功能,即地图区域的着色和高亮显示。 首先,我们需要理解`map-area`的概念。在HTML中,`<map>`元素与`<area>`元素结合使用,可以创建...
在HTML中,我们使用`<img>`标签的`usemap`属性引用一个`<map>`元素,`<map>`元素定义了图像的热区。 - `<area>`标签用于定义图像热区的形状(如矩形`rect`),坐标,以及链接的目标URL。例如: ```html <map name...
7. **影像地图**:通过`<map>`和`<area>`标签实现图像上的热点链接。 - `图像文件名" usemap="#图的名称">` - `<map name="图的名称">` - `形状" coords="区域坐标列表" href="链接点的URL">` 以上便是从给定的...
- **说明**:`<acronym>` 标签用于标明缩写词,但这个标签已经被废弃,在HTML5中不再推荐使用。例如: ```html <acronym title="World Health Organization">WHO ``` ##### 标签:address - **说明**:`...
元素在HTML5中被用于定义客户端图像映射中的一个区域,它可以链接到另一个资源。该元素通常与<map>元素一起使用,以创建可点击的图像区域。新属性如shape、coords、hreflang、media和target为开发者提供了更多控制...
1. **定义图像映射**:首先,你需要在HTML中插入图像,并使用`usemap`属性指定与之关联的映射名称。例如: ```html ``` 2. **创建映射**:接着,定义一个`<map>`标签,其`name`或`id`属性应与`usemap`属性值相...
img标签中的usemap属性可引用的map标签中的id或name属性(取决于浏览器),所以我们应同时向map标签添加id和name属性。 示例 例如我们想在下面一张图实现九个热点区域,不切图,就使用map标签。 首先用 ps 得到几...
您可以选择传递一个CSS选择器,该选择器返回地图标签的集合,例如“ map.myMap”。 或直接引用DOM中的地图对象。 此函数返回已绑定到的地图元素数组。 jQuery用法 包括和脚本,然后将以下调用添加到页面底部: $ ...
HTML中的`<img>`标签用于在网页中嵌入图像。这个标签的`src`属性定义了图像的来源,比如`星星课堂图片">`,这里的`./img/xxkt.jpg`是图像文件的路径,而`alt`属性提供了图像无法显示时的替代文本。对于图像的尺寸...