`
jackroomage
  • 浏览: 1223099 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

在Html中,图像使用map标签

    博客分类:
  • CSS
 
阅读更多

许多网点的主页都有一幅图象,你可以点击它的不同部位来进入网点的不同部分.例如,这幅图象可以包含一些图标,指定为新闻部分。对话部分及下载部分,如果这个网点的参观者想从主页立即进入新闻部分,他就可以简单地点击一下新闻的图标,包含有这些图标的图象就被称为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>

分享到:
评论

相关推荐

    html图像地图map标签的使用

    在`&lt;img&gt;`标签中使用`usemap`属性来关联图像与对应的`&lt;map&gt;`标签。其值通常是一个以`#`开头的字符串,对应于`&lt;map&gt;`标签中的`name`或`id`属性值。例如: ```html &lt;map name="exampleMap"&gt; ... &lt;/map&gt; ``` 这样,当...

    html map 标签使用

    - 在使用`&lt;map&gt;`标签时,必须确保`&lt;img&gt;`标签中的`usemap`属性值与`&lt;map&gt;`标签的`name`或`id`属性值完全一致。 - 如果图像尺寸较大,建议适当调整`&lt;area&gt;`标签中的坐标值,以提高用户体验。 - 对于复杂的图像映射,...

    Html image 标签 配合 map使用

    注意,虽然`&lt;map&gt;`和`&lt;area&gt;`标签在HTML4和HTML5中都有支持,但在HTML5中,`&lt;map&gt;`标签已被推荐用于语义化更好的`&lt;figure&gt;`和`&lt;figcaption&gt;`元素结合使用。例如: ```html 交互式图像"&gt; 这是一个交互式图像 ...

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

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

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

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

    HTML map标签

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

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

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

    html中的map属性--地图例子

    这个名称将在`&lt;img&gt;`标签中引用,将图像与映射关联起来。例如: ```html &lt;img src="fj_map.png" alt="Fiji Map" usemap="#fijiMap"&gt; &lt;map name="fijiMap"&gt; ,0,100,100" href="north_fiji....

    HTML的MAP设计

    在上面的例子中,`&lt;img&gt;`标签的`usemap`属性引用了`&lt;map&gt;`的`name`属性,这样就能将图像与映射关联起来。`&lt;area&gt;`元素则定义了具体的可点击区域,包括形状(如矩形`rect`、圆形`circle`、多边形`polygon`等)、坐标...

    Web-前端html+css从入门到精通 117. map标签与area标签.zip

    `&lt;map&gt;`标签是用来定义一个图像映射,它并不直接在页面上显示任何内容,而是与`&lt;img&gt;`标签配合使用,为图像添加可点击的区域。`&lt;map&gt;`标签有一个必需的`name`属性,这个属性值用于在`&lt;img&gt;`标签的`usemap`属性中引用...

    Web前端基础:HTML5图像标签.pptx

    在HTML中插入图像通常使用 `&lt;img&gt;` 标签,其基本语法如下: ```html 图像文件url" alt="替代文本" /&gt; ``` `src` 属性用于指定图像文件的URL,`alt` 属性则在浏览器无法加载图像时显示替代文本,同时对搜索引擎优化也...

    map指定区域颜色及划过高亮.zip

    "map-highlight"和"map-area"这两个标签暗示了我们将讨论的是地图组件中的特定功能,即地图区域的着色和高亮显示。 首先,我们需要理解`map-area`的概念。在HTML中,`&lt;map&gt;`元素与`&lt;area&gt;`元素结合使用,可以创建...

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

    在HTML中,我们使用`&lt;img&gt;`标签的`usemap`属性引用一个`&lt;map&gt;`元素,`&lt;map&gt;`元素定义了图像的热区。 - `&lt;area&gt;`标签用于定义图像热区的形状(如矩形`rect`),坐标,以及链接的目标URL。例如: ```html &lt;map name...

    HTML中的常用标签

    7. **影像地图**:通过`&lt;map&gt;`和`&lt;area&gt;`标签实现图像上的热点链接。 - `图像文件名" usemap="#图的名称"&gt;` - `&lt;map name="图的名称"&gt;` - `形状" coords="区域坐标列表" href="链接点的URL"&gt;` 以上便是从给定的...

    HTML标签解释大全

    - **说明**:`&lt;acronym&gt;` 标签用于标明缩写词,但这个标签已经被废弃,在HTML5中不再推荐使用。例如: ```html &lt;acronym title="World Health Organization"&gt;WHO ``` ##### 标签:address - **说明**:`...

    html5标签属性及使用方法教程

    元素在HTML5中被用于定义客户端图像映射中的一个区域,它可以链接到另一个资源。该元素通常与&lt;map&gt;元素一起使用,以创建可点击的图像区域。新属性如shape、coords、hreflang、media和target为开发者提供了更多控制...

    html页面绘制热区工具

    1. **定义图像映射**:首先,你需要在HTML中插入图像,并使用`usemap`属性指定与之关联的映射名称。例如: ```html ``` 2. **创建映射**:接着,定义一个`&lt;map&gt;`标签,其`name`或`id`属性应与`usemap`属性值相...

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

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

    image-map-resizer:响应式HTML图像映射

    您可以选择传递一个CSS选择器,该选择器返回地图标签的集合,例如“ map.myMap”。 或直接引用DOM中的地图对象。 此函数返回已绑定到的地图元素数组。 jQuery用法 包括和脚本,然后将以下调用添加到页面底部: $ ...

    第六课 图像与音视频标签-011

    HTML中的`&lt;img&gt;`标签用于在网页中嵌入图像。这个标签的`src`属性定义了图像的来源,比如`星星课堂图片"&gt;`,这里的`./img/xxkt.jpg`是图像文件的路径,而`alt`属性提供了图像无法显示时的替代文本。对于图像的尺寸...

Global site tag (gtag.js) - Google Analytics