html/css中map和area的应用

一、使用方法:

因为map标签是与img标签绑定使用的,所以我们需要给map标签添加ID和name属性,让img标签中的usemap属性引用map标签中的id或者name属性(由于浏览器的不同,usemap属性接收二者之一的值,所以通常name和id属性二者都写,值相同),并配合area标签进行使用。

例如:

1、我们先插入一张图片,并与map连接好

 

 2、然后用area设置区域

 

 其中的属性:shape是形状,coords是坐标。

得到的效果图是:

html/css中map和area的应用_第1张图片

 

 点击蓝色线圈位置就能跳转链接的网址。

形状的属性circle是圆形;坐标的前两位数是圆心的位置,后一位是半径。

 

 

形状的属性rectangle是矩形;坐标前两位数是一个角的位置,后两位是对角的位置。

 

 

形状的属性poly是多边形;坐标是每一对数就是一个角的位置。

 

 

 

你可能感兴趣的:(html/css中map和area的应用)