html 图像热区链接
来源:互联网 发布:q版刘关张 知乎 编辑:程序博客网 时间:2024/06/06 03:18
图像热区链接
除了对整幅图像设置超链接外,还可以将图像划分为若干区域,这叫做"热区",每个区域可设置不同的超链接。此时,包含热区的图像可以称为映射图像。
要进行热区设置,首先需要在图像文件中设置映射图像名,格式为:
<img src = 图像文件地址 usemap = 映射图像名称>
也就是说,此时需要使用<img>标记的usemap属性,定义图像的映射图像名。
然后,就要在图像中定义各个热区以及超链接了,主要语法为:
<map name = 映射图像名称>
<area shape = 热区形状1 coords = 热区坐标1 href = 链接地址1>
<area shape = 热区形状2 coords = 热区坐标2 href = 链接地址2>
……
<area shape = 热区形状n coords = 热区坐标n href = 链接地址n>
</map>
在该语法中又引入了两个标记:<map>和<area>。<map>、</map>标记用于包含多个<area>标记,其中的"映射图像名称"就是在<img>标记中定义的名称。<area>标记则用于定义各个热区和超链接,它有两个重要属性:
(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轴向下为正。
- html 图像热区链接
- html 锚点链接 图像热区链接
- Dreamweaver 图像热区链接 跳转菜单
- html利用map和area属性来实现创建图像链接,以及创建可点击图像热区
- html图像热区map area
- html 图像 链接
- HTML 链接和图像
- Html基础学习(五):图片热区链接,滚动文字
- 图片热区链接
- HTML 标题 段落 图像 链接
- 【面向HTML--图像和链接】
- html:图像链接和图像映射
- 中国地图HTML热区
- 深入理解热区链接
- 热区,链接,锚点
- HTML笔记(HTML元素--链接与HTML图像)
- HTML基础2----链接,图像, 段落,对齐
- HTML图像、路径、链接和列表
- 黑马程序员_java基础——基本数据类型包装类
- 文章标题
- char与int等数据类型的强制转化
- error LNK2005:
- 求少数几个数中的最大值最小值与算法思考
- html 图像热区链接
- 开始iOS 7中自动布局教程(一)
- 局域网环境下新增无线路由器搭建WIFI
- 高仿Android QQ2012登陆界面和注册界面
- sublime text 2 热区链接实现
- JAVA 基础 关键修饰符及说明
- python 在 eclipse 上的编码配置问题
- sublime Emmet的用法及相关语法
- 选择swift