您好!欢迎来到静学网! 注册 登入
  • 致力提供中国优质IT教程及新媒体资讯,打造中国品牌教育先锋。

SEO视频教程-<map> 标签与<area>标签的有效结合形成图像映射

课程目录 卢育永 次浏览
这两个标签是结合在一起用的,所以一起讲了,<map> 标签是创建图像映射可点击区域,就是划分范围,通俗一点就是你需要点击图片的全部,<area>标签通常是嵌套在<map>标签内的一起用的,值得注意的是所放的这张图片img标签中的属性需要与map中属性相关联,也就是加一个锚,让其形成一个关联状态,不然是不起效果的,会失去原本的意义和功能。注意在HTML中area是单标签。下面我们来看一下area标签的基本属性有哪些。
 
atl属性,alt属性在area标签中只是一个标记,一个注释,在搜索引擎优化中是有用的,这里是在图片不显示时,该文本就会显示内容。
 
coords是坐标值,就是图像上某个位置或者区块,一般有矩形和圆,比如coords(x,x,x)这个就是表示圆形,当然你要以空间图形构造去理解就容易了,比如说我要画一条直线,只需要知道两点的坐标就可以了,直接连接就可,当然这个会有计算机自动判断。
 
href属性,此属性就是热点中目标地址。
 
nohref属性,词属性是没有跳转功能
 
shape属性,表示形状的意思,就是定义区域形状,有default(默认)、rect(矩形)、circ(圆形)、poly(多边形)
 
target属性,表示点击目标窗口状态(_blank\_parent\_self\_top)
 
要注意的是,在<img>中的usemap要与map中的id或者name对应,主要是考虑到浏览器兼容性。
 
实战案例:
<area>标签
<!DOCTYPE html>
<html>
<head>
<title>Throw-Try-Catch</title>
<meta charset="utf-8" lang="zh-cn">
 
</head>
<body >
 <img src="1.PNG" usemap="#A" alt="tupian">
 <map id="#A" name="#A">
  <area shape="circle" coords="200,200,10" href="#" alt="tupianA" target="_blank">
 </map>
 
 
</body>
</html>

<area>标签

这个不会跳出另一张图,因为没有放图片,所以一直是这一张,从图中可以看出一个圆形,这就是定义的圆。
 
 

静学网 , 版权所有丨如未注明 , 均为原创丨转载请注明SEO视频教程-<map> 标签与<area>标签的有效结合形成图像映射
顶一下
(0)
踩一下
(0)
畅所欲言
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码:点击我更换图片
最新评论
友情链接:
自学网
本网站所刊载信息,不代表静学网观点。 刊用本网站稿件,务经书面授权或注明来源。 未经授权禁止转载、摘编、复制及建立镜像,违者将依法追究法律责任。 投稿邮箱:1870447831@qq.com | 举报邮箱:1870447831@qq.com