html中map标签的用法,HTML中的map和area标签

1. 标签介绍：

(1)map标签： 该标签是指图片的映射，也就是说一张可以点击的图片的映射；

属性介绍：

<1> id: 中的 usemap 属性可引用 中的 id 或 name 属性(取决于浏览器)

<2>name:同上

说明：不同的浏览器会根据img中的usemap属性去引用ID或者name值，所以最好使用的时候这两个属性都要加上。

(2)area标签：指的是图片映射的区域，可以是矩形(rect)、圆形()；

属性介绍：

<1> alt :类似img 标签中的同名属性

<2>coords: 区域的坐标(0，0 指的是图片的左上角)，矩形为左上角和右下角两个坐标，圆形为圆心X、Y和半径，多边形为任意两个坐标之间构成的区域

<3>shape:指的区域形状；矩形、圆形、多边形

....

2.使用场景：

主要适用于多个图片组成的超链接区域，例如导航栏、底部说明栏等等；

说白了就是同一张图片点击不同的区域能够跳到不同的链接中或者实现不同的逻辑；

这样的话可以避免我们切图的时候切成多张的图片，减少了客户端的http请求，对提升页面的性能有不少的帮助。

map，area标签

map,area标签实例...

html/css中map和area的应用

一.使用方法: 因为map标签是与img标签绑定使用的,所以我们需要给map标签添加ID和name属性,让img标签中的usemap属性引用map标签中的id或者name属性(由于浏览器的不同,use ...

解决：Map的area属性标签鼠标Hover可以给area加背景

css的area标签是不支持hover的,只有a标签才支持.li标签在IE浏览器下才支持,所以采用jquery的mouseenter和mouseleave事件完成.首先讲jQuery对应的事件:1.m ...

HTML <;area>; 标签区域map标签

1.距形:(左上角顶点坐标为(x1,y1),右下角顶点坐标为(x2,y2))

Python第九课学习

Python第九课学习 数据结构: 深浅拷贝 集合set 函数: 概念 创建 参数 return 定义域 www.cnblogs.com/yuanchenqi/articles/5782764.htm ...

java中final,finally,finalize三个关键字的区别

final 可以作为修饰符修饰变量.方法和类. 被final修饰的变量必须在初始化时给定初值,以后在使用时只能被引用而不能被修改. 被final修饰的方法不能够在子类中被重写(override): 被 ...

聊聊模板方法模式，装饰器模式以及AOP

在软件系统设计的时候,我们需要把一个大的系统按照业务功能进行拆分,做到高内聚.低耦合. 但是呢,拆分之后会产生一些通用性的东西,比如日志,安全,事务,性能统计等,这些非功能性需求,横跨多个模块.最lo ...

FreeBSD之基本配置

1. 设置IP地址.网关ee /etc/rc.conf ifconfig_em0="inet 192.168.21.173 netmask 255.255.255.0"   #设置 ...

WinCE程序调试方法【转】

刚刚接触WinCE编程,感觉大部分跟WinForm一样.刚开始的时候,不知道怎么进行断点调试,后来同事告诉我,可以直接连接进行断点调试,一试之下,果然好用,所以拿出来分享一下. 必备工具: Micro ...