用html给一张图片做多个热区链接,html 锚点链接 图像热区链接
锚点链接
图像热区链接
除了对整幅图像设置超链接外，还可以将图像划分为若干区域，这叫做"热区"，每个区域可设置不同的超链接。此时，包含热区的图像可以称为映射图像。
要进行热区设置，首先需要在图像文件中设置映射图像名，格式为：
也就是说，此时需要使用
标记的usemap属性，定义图像的映射图像名。
然后，就要在图像中定义各个热区以及超链接了，主要语法为：
……
在该语法中又引入了两个标记：和。、标记用于包含多个标记，其中的"映射图像名称"就是在
标记中定义的名称。标记则用于定义各个热区和超链接，它有两个重要属性：
(1)shape属性：用来定义热区形状，它有三个值：
● default：默认值，为整幅图像。
● rect：矩形区域。
● circle：圆形区域。
● poly：多边形区域。
(2)coords属性：用来定义矩形、圆形或多边形区域的坐标。它的格式如下：
● 如果shape = "rect"，则coords包含四个参数，分别为left、top、right和bottom，也可以将这四个参数看成矩形左上角和右下角顶点的坐标。
● 如果shape = "circle"，则coords包含三个参数，分别为center-x、center-y和radius，这三个参数是圆心坐标和圆的半径。
● 如果shape = "poly"，则coords需要按顺序取多边形各个顶点的(x、y)坐标值，因此形式为"x1, y1, x2, y2, …… xn, yn"。可以是逆时针，也可以是顺时针。HTML会按照定义顶点的顺序将它们链接起来，形成多边形热区。
如果要定义的热区形状复杂，都可以用多边形热区来逼近，所以如果shape = "poly"，则coords可能包含很多坐标值，其数量必须是偶数。
图像的左上角坐标是(0, 0)，x轴向右、y轴向下为正。
【例7】修改例6，改为chap7_7.html，给图像定义热区并加超链接。
itsway -- 图像
在图中请注意，当鼠标移到热点区域时，鼠标会变成手的形状，此时单击鼠标，就会打开相应的网页。“鼋头渚”念“原头煮”，是无锡太湖的一处名胜，呵呵。
在chap7_7.html中链接了几个网页，它们可以简单写写。例如，chap7_7meiyuan.html代码如下。
itsway -- 图像
无锡梅园横山风景区南临太湖，北倚龙山，成为集自然景观、人文古迹、名花异卉、园林建筑及休闲健身于一体的著名旅游胜地。"四面有山皆入画，一年无日不看花"。
chap7_7yuantouzhu.html代码如下：
itsway -- 图像
鼋头渚是无锡第一胜景、太湖佳绝处，独占太湖风景最美一角，山清水秀。郭沫若吟道："太湖佳绝处，毕竟在鼋头"。鼋头渚的特点是以太湖风景为主，人工修饰为辅，依山傍湖，别具情趣，是观赏太湖的理想所在。
chap7_7piaomiaofeng.html代码如下：
itsway -- 图像
太湖西山缥缈峰，海拔337米，为太湖七十二峰之首，水的精华所在。太湖风云多变，山峰常隐于云雾之中，缥缥缈缈，似仙山隔云海，如霞岭玉带连，有"缥缈晴峦"景观，为西山八大胜景之一。
用html给一张图片做多个热区链接,html 锚点链接 图像热区链接相关推荐
- 用于定义图像热区的html标记是,html 图像热区链接
图像热区链接 除了对整幅图像设置超链接外,还可以将图像划分为若干区域,这叫做"热区",每个区域可设置不同的超链接.此时,包含热区的图像可以称为映射图像. 要进行热区设置,首先需要在 ...
- 用html给一张图片做多个热区链接,HTML之六：图像的热区连接
HTML之六:图像的热区连接. 前面说了一下图像的插入,这次说说设置一张图片上不同地区的链接.比如一张地图上,河北,山东两省,点击河北的覆盖区域,转到一张河北的大地图,点击山东的覆盖区域,转到一张山东 ...
- python对比两张图片的不同并圈起来,比较两幅图像/图片，并标记差异
问题1: 这篇文章展示了比较两张图片的方法.最简单的方法可能是:from PIL import Image from PIL import ImageChops im1 = Image.open(&q ...
- html中热区如何设置,Dreamweaver中如何设置热区?DW设置热区方法图解
Dreamweaver中如何设置热区?下面小编就为大家详细介绍一下,一起来看看吧! 方法/步骤 向平时一样,这里我们在设置Dreamweaver热区的时候.同样这里是需要建立一个新的HTML界面的. ...
- android 点击热区,Android-android中有没有提供点击热区的功能
android没有这个功能,但是你可以通过在你的应用程序里面添加一个TextView控件来实现这个功能.你把这个TextView控件的背景设置为透明,并且设置为可获取焦点.然后在程序里面对这个Text ...
- python如何将两张图片叠加的半透明_python – Raspberry Pi相机透明图像叠加
是否可以在pi相机预览上叠加透明(png或gif)图像? 我找到了一些代码,但它创建了一个白色背景 import picamera from PIL import Image from time im ...
- python读取多张图片_python读取图片的几种方式及图像宽和高的存储顺序
python读取图片的几种方式及图像宽和高的存储顺序 1.opencv 2.imageio 3.matplotlib 4.scipy # coding:utf-8 import cv2 import ...
- 关于网络蜘蛛以及搜索蜘蛛爬行
当"蜘蛛"程序出现时,现代意义上的搜索引擎才初露端倪.它实际上是一种电脑"机器人"(Computer Robot),电脑"机器人"是指某个能 ...
- 全国计算机考试网页制作,全国计算机信息高新技术考试网页制作（FrontPage平台）网页制作员级考试考试大纲...
全国计算机信息高新技术考试网页制作(FrontPage平台)网页制作员级考试考试大纲 时间:2013-10-28 来源:IT认证考试网 点击量: 更多 第一单元 操作文本(共12分) 1.设置文本 ...
最新文章
- Redis 分布式锁没这么简单，网上大多数都有 bug
- Error: Aesthetics must be either length 1 or the same as the data (5): fill
- 第十五届智能车竞赛技术报告-成电金秋-AI电磁
- python第一章测试题_第一章 测试【含答案】 Python大数据分析
- 可用于在 Microsoft.NET Framework 4.0 中的 ASP.NET 浏览器定义文件的修补程序
- Arduino--DHT11温湿度传感器
- JavaScript 常见的六种继承方式
- matplotlib.pyplot分区绘图
- 微信小程序开发——点击按钮退出小程序的实现
- 路由器装上去没有网络_5G网络那么快，今后路由器没有存在的价值了？
- MySQL 8下忘密码后重置密码的办法（MySQL5老方法不灵了）
- web元件库/常用web组件/常用表单/导航栏/边框/图标/日期时间选择器/评分组件/穿梭框/输入框/步骤条/计数器/输入框/Axure原型/axure元件库/rp原型/交互控件/五星评分器/导航框架
- 几种简单的垂直居中方式
- java 登陆微信获取好友列表_微信api接口，触发推送微信好友列表及返回
- 皮尔逊相关系数公式手写代码【Python+详细注解】（Pearson correlation coefficient）
- Blackberry上网问题解决方案
- Flutter 打包问题 Could not resolve io.flutter:arm64_v8a_release
- 迅时MX100G-S数字中继网关荣获《电信设备进网许可证》
- Notepad++ 7.6.4 x64安装包
- 值得收藏的 5 款iPhone 数据恢复软件