欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

html/css中map和area的应用

程序员文章站 2022-05-04 13:04:32
一、使用方法: 因为map标签是与img标签绑定使用的,所以我们需要给map标签添加ID和name属性,让img标签中的usemap属性引用map标签中的id或者name属性(由于浏览器的不同,usemap属性接收二者之一的值,所以通常name和id属性二者都写,值相同),并配合area标签进行使用 ......

一、使用方法:

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

例如:

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

html/css中map和area的应用

 

 2、然后用area设置区域

html/css中map和area的应用

 

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

得到的效果图是:

html/css中map和area的应用

 

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

形状的属性circle是圆形;坐标的前两位数是圆心的位置,后一位是半径。html/css中map和area的应用

 

 

形状的属性rectangle是矩形;坐标前两位数是一个角的位置,后两位是对角的位置。html/css中map和area的应用

 

 

形状的属性poly是多边形;坐标是每一对数就是一个角的位置。html/css中map和area的应用