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)。制作方法:
- 插入图片,并设置好图像的有关参数,且在<img>标记中设置参数usemap="newbook" ismap,以表示对图像地图(newbook)的引用;
- 用<map>标记设定图像地图的作用区域,并取名为:newbook;
- 分别用<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 > |
在制作本文介绍的效果时应注意的几点:
- 在<img>标记不要忘记设置usemap、ismap参数,且usemap的参数值必须与<map>标记中的name参数值相同,也就是说,"图像地图名称"要一致;
- 同一"图像地图"中的所有热点区域都要在图像地图的范围内,即所有<area>标记均要在<map>与</map>之间;
- 在<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 标签。浏览器会忽略超过图像边界范围之外的坐标。
HTML图片热区map area的用法(转)的更多相关文章
- HTML图片热区map area的用法
<area>标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面.其基本语法结构如下: < ...
- HTML图片热区 map area 标签
实例 <img src ="planets.gif" alt="Planets" usemap ="#planetmap" /> ...
- 图片热区——map的用法
<area>标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面.其基本语法结构如下: 1 & ...
- css移除a标签及map、area(图片热区映射)点击过后的边框
默认a标签及其包含的html元素和map中的area(图片热区映射)在点击过后留有默认的蓝色边框,如下图 可以看到,蓝色的边框破坏了页面的整体美感,很多时候我们都是不需要的.通过设置相应的css可以去 ...
- html中map area 热区自适应的原生js实现方案
在做自适应网页的时候,如果在图片中使用了热区map.图片可以通过样式实现:图片大小随页面变化,但是MAP中每个area的坐标并不能通过css直接实现自适应.这篇文章就介绍通过原生js来实现:MAP中每 ...
- 如何为图片添加热点链接?(map + area)
所谓图片热点链接就是为图片指定一个或多个区域以实现点击跳转到指定的页面.简单来说就是点击某一区域就能跳转到相应的页面,而无需点击整个图片才能跳转. 说到图片热点链接,我首先想到了map + area, ...
- [转]如何为图片添加热点链接?(map + area)
原文地址:https://www.cnblogs.com/jf-67/p/8135004.html 所谓图片热点链接就是为图片指定一个或多个区域以实现点击跳转到指定的页面.简单来说就是点击某一区域就能 ...
- [jquery] 图片热区随图片大小自由缩放
在图片上直接画出带超级链接热区元素map和area相信大家并不陌生,Dreamweaver等网页制作软件都有直接在图片上绘制带超级链接的热区工具,但是直接绘制的热区是不能随着图片自适应放大和缩小的,现 ...
- 谈谈html中一些比较"偏门"的知识(map&area;iframe;label)
说明:这里所说的"偏门"只是相对于本人而言,记录在此,加深印象.也希望有需要的朋友能获得些许收获! 1.空元素(void):没有内容的元素. 常见的有:<br>,< ...
随机推荐
- 转载:用Source Insight中看Python代码
在Source Insight中看Python代码 http://blog.csdn.net/lvming404/archive/2009/03/18/4000394.aspx SI是个很强大的代码查 ...
- git 出现冲突时的解决办法
<一> 二者兼得最麻烦 1, 出现冲突一般出现在群体开发两个及以上开发者同时修改同一个文件时 2, 具体表现为 git pull , git push 和 git commit 命令执行失 ...
- MonGoDB 在linux 上的安装和配置
01: 下载 linux 版本的二进制包 => https://www.mongodb.com/ 02: 解压 => tar -zxf mongodb-linux-x86_64-3.4. ...
- Rabbitmq(3) work queues
轮询分发:每个消费者处理的消息是一样的 公平分发:能者多劳 *****公平分发 生产者 package com.aynu.bootamqp.service; import com.aynu.boota ...
- java 常用第3方工具
https://www.cnblogs.com/chenpi/p/5608628.html#_label4
- 如何玩转小程序+公众号?手把手教你JeeWx小程序CMS与公众号关联
随着微信小程序新功能.新入口的不断更新,小程序的商业价值逐步增强,特别是小程序与公众号的深度融合,已经让小程序成为各行业新的营销渠道.Jeewx平台专注小程序的开发,逐步完善小程序生态圈,通过简单操作 ...
- webstorm上svn的安装使用
1.首先要下载SlikSvn网址为:https://sliksvn.com/download/ 进入该网站可以根据需要下载32位的或者64位的svn.下图为要下载的图标样式 点击下载即可. 2.在w ...
- css样式表2
<head> <style type="text/css"> .main { height:42px; width:100%; text-align:cen ...
- 4.Python文件操作
文件内需要写入的内容 Seems the love I’ve ever known 看来,过去我所知道的爱情 Has always been the most destructive kind 似乎总 ...
- MVC之Model元数据
Contronoller激活之后,ASP.NET MVC会根据当前请求上下文得到目标Action的名称,然后解析出对应的方法并执行之. 在整个Action方法的执行过程中,Model元数据的解析是一个 ...