`
zengshaotao
  • 浏览: 788939 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

HTML图片热区map area的用法

 
阅读更多

<area>标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面。其基本语法结构如下:

1 <area
2     class=type
3     id=Value
4     href=url
5     alt=text
6     shape=area-shape
7     coods=value>

shape和coords:是两个主要的参数,用于设定热点的形状和大小。其基本用法如下:

  • <area shape="rect" coords="x1, y1,x2,y2" href=url>表示设定热点的形状为矩形,左上角顶点坐标为(X1,y1),右下角顶点坐标为(X2,y2)。
  • <area shape="circle" coords="x1, y1,r" href=url>表示设定热点的形状为圆形,圆心坐标为(X1,y1),半径为r。
  • <area shape="poligon" coords="x1, y1,x2,y2 ......" href=url>表示设定热点的形状为多边形,各顶点坐标依次为(X1,y1)、(X2,y2)、(x3,y3) ......。

<area>标记是在图像地图中划分作用区域的,因此其划分的作用区域必须在图像地图的区域内,所以在用 <area> 标记划分区域前必须用HTML的另一个标记<map>来设定图像地图的作用区域,并为指定的图像地图设定名称,该标记的用法很简单,即<map name="图像地图名称"> ...... </map>。

下面通过一个例子来说明这两个标记的用法:

这里是一幅新书架的图片,要做的效果是:当鼠标点"网址大全"这本书时,新开一窗口,显示关于这本书的简介及订单的网页(urlall.htm);当 鼠标点"网站设计攻略"这本书时,新开一窗口,显示关于这本书的简介及订单的网页(siteall.htm);当鼠标点"网页技巧大全"这本书时,新开一 窗口,显示关于这本书的简介及订单的网页(pagejqlall.htm)。制作方法:

  1. 插入图片,并设置好图像的有关参数,且在<img>标记中设置参数usemap="newbook" ismap,以表示对图像地图(newbook)的引用;
  2. 用<map>标记设定图像地图的作用区域,并取名为:newbook;
  3. 分别用<area>标记针对三本书的位置划分出三个矩形作用区域,并设定好其链接参数href。
1 <img src="image/htmlp3.gif" width="207" height="148" alt="新书架" hspace="10" align="left" usemap="#newbook" border="0">
2 <map name="newbook">
3 <area shape="rect" coords="56,69,78,139" href="urlall.htm" target="_blank" alt="这里收集十万多个网址。" title="这里收集十万多个网址。">
4 <area shape="rect" coords="82,70,103,136" href="siteall.htm" target="_blank" alt="网站设计师的启蒙读本。" title="网站设计师的启蒙读本。">
5 <area shape="rect" coords="106,68,128,136" href="pageall.htm" target="_blank" alt="网页制作者不可不读的书。" title="网页制作者不可不读的书。">
6 </map>

在制作本文介绍的效果时应注意的几点:

  1. 在<img>标记不要忘记设置usemap、ismap参数,且usemap的参数值必须与<map>标记中的name参数值相同,也就是说,"图像地图名称"要一致;
  2. 同一"图像地图"中的所有热点区域都要在图像地图的范围内,即所有<area>标记均要在<map>与</map>之间;
  3. 在<area>标记中的 cords 参数设定的坐标格式要与shape参数设定的作用区域形状配套,避免出现在shape参数设置的矩形作用区域,而在cords 中设置的却是多边形区域顶点坐标的现象出现。

coords 属性

<area> 标签的 coords 属性定义了客户端图像映射中对鼠标敏感的区域的坐标。坐标的数字及其含义取决于 shape 属性中决定的区域形状。可以将客户端图像映射中的超链接区域定义为矩形、圆形或多边形等。

下面列出了每种形状的适当值:

圆形:shape="circle",coords="x,y,z":这里的 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 像素图像的右下方四分之一处,定义了一个对鼠标敏感的区域,并在图像的正中间定义了一个圆形区域。

1 <map name="map">
2 <area shape="rect" coords="75,75,99,99" nohref="nohref">
3 <area shape="circ" coords="50,50,25" nohref="nohref">
4 </map>

注释:如果某个 area 标签中的坐标和其他区域发生了重叠,会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标

分享到:
评论

相关推荐

    js 动态设置图片的热区并获取图片坐标

    在JavaScript中,动态设置图片的热区(hotspots)并获取图片坐标是一项常见的需求,尤其在交互式网页设计中。热区技术允许我们为图片指定特定的交互区域,用户点击或悬停在这些区域上时可以触发特定的事件。本文将...

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

    在Vue项目中实现图片上画矩形框并获取对角坐标以及设置`&lt;map&gt;`中的`&lt;area&gt;`样式,涉及到的技术主要包括JavaScript、HTML5的绘图API以及图像热区技术。接下来,我们将深入探讨这些知识点。 1. **JavaScript绘图API**...

    jquery设置图片热区并生成图片

    通过jQuery设置图片热区并生成图片涉及的关键知识点包括:HTML图片映射(`&lt;map&gt;`和`&lt;area&gt;`标签),jQuery事件处理(`click()`, `mouseover()`, `mouseout()`等),以及可能的Canvas API或图像处理库的使用。...

    js 动态获取图片矩形热区,并在热区上添加蒙版,鼠标经过,以半透明形式显示该区域

    在本场景中,我们讨论的是如何使用JavaScript动态地在图片上生成矩形热区,并在热区上添加蒙版效果。热区(Area)是HTML `&lt;map&gt;` 元素的一部分,允许我们在图像上定义可点击的交互区域。 1. **HTML `&lt;img&gt;` 和 `...

    图片上设置热区,点击图片上的点,执行javascript方法

    在网页设计中,热区(Hotspots)是一种特殊的技术,允许我们为图片的不同区域赋予交互性,使得用户点击这些特定区域时可以触发某些预设的行为,例如执行JavaScript方法。这通常用于实现图像映射,即在一张大图上定义...

    imagemap-generator:网上找的image map生成热区工具,放到本地方便访问

    imagemap-generator网上找的image map生成热区工具,放到本地方便访问出处:使用方法将本项目克隆到本地,浏览器打开index.html或者直接访问在输入框输入图片地址或者拖拽本地图片到输入框等待图片加载后,鼠标移入...

    HTML给位图片上的指定区域(热点)添加超链接.zip

    总结一下,通过HTML的`&lt;map&gt;`和`&lt;area&gt;`标签,我们可以将一张图片分割为多个可点击的区域,每个区域都可以链接到不同的网页或者执行不同的操作。这在制作交互式地图、产品展示或者复杂导航菜单时非常有用。了解和...

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

    本文将详细介绍如何使用`&lt;img&gt;`、`&lt;map&gt;`以及`&lt;area&gt;`标签创建图像的热点区域,并探讨其实际应用。 #### 二、基础知识 ##### 2.1 `&lt;img&gt;`标签 `&lt;img&gt;`标签用于在HTML文档中嵌入图像。当结合`usemap`属性使用时,它...

    JS图片展示效果美很

    例如,使用`canvas`元素进行图片的裁剪,然后将裁剪后的图像数据应用到HTML5画布上。对于缩放,可以调整图片的CSS属性`width`和`height`,保持原始宽高比。 六、图片滤镜 JS可以实现各种图片滤镜效果,如黑白、模糊...

    图片热点技术Demo

    热点可以通过HTML的`&lt;area&gt;`标签来创建,与`&lt;map&gt;`标签配合使用,定义图片上的交互区域。 2. **CSS样式表**:CSS文件用于控制页面元素的外观,包括热点区域的视觉效果。例如,可以通过CSS为热点添加边框、阴影等...

    图片焦点效果--让浏览者更容易找到自己想要的信息

    3. **图片热区(Image Map)**:创建HTML的标签,并结合使用&lt;map&gt;和&lt;area&gt;标签,可以定义图片的不同区域并关联不同的行为。当鼠标移动到特定区域时,可以触发相应的小框显示。 4. **Bootstrap或其他框架**:许多...

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

    ### 使用方法 1. 首先,你需要准备一张图片,并且获取你希望定义为热区的具体坐标。这通常需要使用图形编辑软件如Photoshop,以像素为单位获取准确的坐标。 2. 在HTML文件中,首先声明DOCTYPE,并设置`lang`属性和...

    网页设计与制作之超链接.pdf

    首先,你需要使用`&lt;map&gt;`和`&lt;area&gt;`标签定义图片的热区,然后将`&lt;a&gt;`标签应用于`&lt;area&gt;`标签。例如: ```html &lt;map name="alumnicard"&gt; &lt;area shape="rect" coords="x1, y1, x2, y2" href="alumni_details....

    网页超链接的制作.docx

    5. 图片热区链接:对于包含多个链接区域的图片,可以通过定义热区(HTML的`&lt;map&gt;`和`&lt;area&gt;`标签)来创建链接。每个热区对应不同的链接目标。 在实际操作中,我们需要注意保存并预览链接是否有效。例如,制作完交互...

    jquery.image-maps-master.zip

    在网页设计中,有时我们需要让图片具有交互性,比如点击图片的特定区域跳转到不同的链接,这种技术被称为图像热区映射,即image maps。jQuery Image Maps插件是实现这一功能的强大工具,尤其在`jquery.image-maps-...

    07创建超链接和网页模板教案.pdf

    通过使用HTML的`&lt;map&gt;`和`&lt;area&gt;`标签,可以定义图像上的不同区域链接到不同的URL。热区通常用于复杂的交互式图像,例如地图或图标,用户点击图像的不同部分可以触发不同的链接。 【教学目标】 本课的教学目标旨在...

    实验3 客户端脚本编程1

    6. 创建图片热区,可使用HTML的`&lt;map&gt;`和`&lt;area&gt;`标签定义: ```html &lt;map name="imageMap"&gt; &lt;area shape="rect" coords="0,0,50,50" href="link1.html"&gt; &lt;!-- 更多区域 --&gt; &lt;/map&gt; ``` 接下来是JavaScript...

    安徽大学网站设计与建设复习题.pdf

    热区映射通过在图像上定义不规则形状的链接区域,而图像地图则使用`&lt;map&gt;`和`&lt;area&gt;`标签定义链接区域。 【CSS样式控制】 在CSS(Cascading Style Sheets)中,可以使用`font-size`属性来更改字体大小,以控制文本...

    Firefox和IE通用的三则网站重构实用技巧

    对于规则的矩形图片热区,我们可以通过CSS样式来代替传统的HTML `&lt;map&gt;` 和 `&lt;area&gt;` 标签。这种方式使得代码更简洁,维护更容易。以下是一个示例,创建两个不同大小的矩形热区: ```css #banner { width: 400px; ...

    按功能顺序列出的 HTML 4.01/XHTML 1.0 标签手册

    图像相关标签 `&lt;img&gt;` 用于插入图像,`&lt;map&gt;` 和 `&lt;area&gt;` 用于创建图像热区,实现点击图像触发不同链接的功能。 表格标签包括 `&lt;table&gt;`、`&lt;tr&gt;`(表格行)、`&lt;td&gt;`(表格单元格)、`&lt;th&gt;`(表格表头)、`...

Global site tag (gtag.js) - Google Analytics