HTML5创建热点区域

创建热点区域（比如单击一张图片不同区域时，会显示不同的链接内容，这就是图片的热点区域）所谓图片的热点区域，就是将一个图片划分为若干个链接区域，当访问者单击不同的区域，会链接到不同的页面
在HTML5中，可以为图片创建3种类型的热点区域：矩形，圆形和多边形，创建热点区域用<map> and <area>标记
语法格式如下：

   <!DOCTYPE html><html><head><title>这是一个热点区域</title></head><body><img src="data:images/01.jpg" width="596" height="275" border="5" usemap="#Map"><map name="Map"><area shape="rect" coords="10,10,100,100" href="#"><area shape="circle" coords="120,120,50" href="#"><area shape="poly" coords="78,13,81,14,53,32,86,38" href="#"></map></body><!--数字表示坐标-->

说明：

图片必须增加usemap属性，说明该图像是热区的映射图像，属性值必须“#”开头，加上名字
<map>标记只有一个属性name，作用是为区域命名，其设置值必须与<img>属性值相同
<area>标记主要是定义热点区域的形状及超链接，它有三个必需的属性
shape：控制划分区域的形状，取值3个：rect，circle，poly
coords：控制区域的划分坐标，单位为像素。shape取值为rect，那么coords设置值分别为矩形左上角x，y坐标点和右下角x，y坐标点；shape取值circle，coords的值：圆形圆心x，y的坐标点和半径值；shape取值poly，coords的值：矩形各个点x，y的坐标。
href：设置区域的超链接目标，取值“#”表示空链接

HTML5创建热点区域相关推荐

第12节 html创建热点区域链接
热点区域链接例如: <html><head><title>使用文本建立超链接</title></head><body>< ...
EduCoder-Web程序设计基础-html5— 创建文本区域-第1关：textarea控件相关概念
1.若将文本区域设置为显示10行,每行显示50个字符,正确选项是( ) A. <textarea rows="50" cols="10"> B. & ...
html 的(热点区域的建立、框架的建立)
一.创建热点区域图片的超链接有两中形式,前面已经写过是的一种形式<a href=" #"><img src="tumian.jpg"/> ...
html5 图片热点area，map的用法
今天看了一个html5在图片上面创建热点的标签,所谓图片热点就是给你一张图片然后你可以设置点击图片不同的位置进入不同的链接!如果下面是一张图片的话,里面在长方形.圆形.三角形区域都可以进入其他网页! ...
html热点区域确定坐标,html图片热点连接区域上的坐标是如何定位的？
通过和以及三个标签一起使用,可以在html页面中插入图片,并在该图片上创建一个或多个不同形状区域的热点链接,点击热点区域可以跳转到指定的其他页面.那么, 我们今天就学习一下,如何定位图片热点区域上的坐 ...
在Win8中创建热点，共享网络
在Win8中创建热点,共享网络办公室中,我独享10M光纤,没什么要下的,便想利用来更新下Ipad里面的程序,下点公开课. 那在不利用软件[用很多wifi共享的软件],从win7开始系统本身就自带相 ...
qt通过代码创建滚动区域，添加滚动区域到窗口
引言继承于QWidget创建的项目,要想在QWidget中添加很多子控件,考虑到若是子控件的数目不确定,太多的时候就需要添加滚动条来实现滚动查看,于是可以自定义一个类,在该类中实现滚动区域和滚动窗口 ...
今天学习了无序列表和有序列表和使用HTML5创建表格
ol建立有序列表,该列表可以用设置type="A/a" 其语法架构为 <ol> <li></li> <li></li> ...
C# Excel命名区域（一）-创建命名区域
什么是Excel命名区域? 在Excel中,我们可以选中一个单元格或多个单元格区域,然后给它们取一个名字,换句话说就是给这个区域命名.为什么要创建命名区域呢,当然是为了简化数据操作,比如在公式中使用命 ...

HTML5创建热点区域

HTML5创建热点区域相关推荐

最新文章

热门文章