同一个html页面中两个area,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请求,对提升页面的性能有不少的帮助。

来源:https://www.cnblogs.com/makunzheng/p/10493433.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/526250.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

html 响应式布局 九宫格,两种方法实现响应式九宫格布局

html布局以及基础样式代码如下响应式九宫格html, body { color:#222; margin:0; padding: 0; text-decoration: none; }ul { list-style: none outside none; margin:0; padding: 0; }body { background-color:#eee; }ul li:nth-child(8n1) {background-color:#36A1DB}ul li:nt…

html跳转网页为什么网页无法访问,朋友的网站被网址跳转,导致官网无法正常访问...

原标题&#xff1a;朋友的网站被网址跳转&#xff0c;导致官网无法正常访问昨天中午接到客户的一个电话&#xff0c;告知其某个网站打开之后直接跳转到其他的网站。客户的这个网站&#xff0c;不是我们做的&#xff0c;但是关系一直保持的不错&#xff0c;所以就顺带给他解决一…

2021中卫一中高考成绩查询,2021年宁夏高中排名及分数线 高考本科升学率排行榜...

2019年宁夏高中排名及分数线 高考本科升学率排行榜如何判断一所高中学校的优劣好坏&#xff0c;人们往往从这几个方面来看&#xff1a;高考/竞赛成绩、生源质量、师资力量、软硬件设施、管理水平等。高考成绩因为最直接&#xff0c;最广为关注&#xff0c;但是很多时候未免有失…

微观经济学如何计算机会成本,【微观经济学】机会成本

概念&#xff1a;机会成本机会成本是指你做了某项选择&#xff0c;而不得不因此失去的其他利益。比如你选择了A&#xff0c;就必须放弃B&#xff0c;B就是A的机会成本。对企业来说&#xff0c;最优方案的机会成本&#xff0c;就是次优方案可能带来的收益。机会成本是听起来很简…

如何注释python中html,Python在HTML中提取带注释的代码,python,html,被

假设被注释代码段如下&#xff1a;html""""""如果直接对此代码段使用pyquery转换并提取from pyquery import PyQuery as pqresponse pq(html)("div.forum_content")print(response)会报错&#xff1a;lxml.etree.ParserError: Docume…

基于蓝墨云平台的计算机教学,基于蓝墨云班课的中职计算机“分层教学”模式探究...

崔月娇一、教学现状概述一方面&#xff0c;我校是面向全国招生&#xff0c;部分欠发达地区的学生由于资源配置导致计算机基础相当薄弱&#xff0c;而来自发达地区的学生早早地接触了计算机&#xff0c;部分计算机基础操作已相当熟练&#xff0c;学生的计算机水平参差不齐&#…

计算机专业和机电专业的区别,12届计算机专业和机电专业.doc

12届计算机专业和机电专业12届计算机1班、12届机电1、2、3、4班《计算应用基础》月考试题学号&#xff1a;_________ 姓名&#xff1a;_________ 班级&#xff1a;_____________考试说明&#xff1a;1、考试时间90分钟2、总分&#xff1a;100分3、应用的班级有12计算机1班、12届…

计算机基础知识上机操作excer,《计算机应用基础》Excel上机操作练习题.doc

《计算机应用基础》Excel上机操作练习题.doc《计算机应用基础》Excel上机操作练习题第1题 建立一工作簿&#xff0c;并作如下操作1&#xff0e; 在Sheet工作表中输入如下内容&#xff1a;在A1单元格中输入&#xff1a;中华人民共和国以数字字符的形式在B1单元格…

angularjs html 缓存,如何删除使用AngularJS的HTML中的浏览器缓存?

如何删除HTML浏览器的缓存&#xff0c;它使用AngularJS&#xff1f;我在我的index.html中使用了以下内容。我也尝试在我的app.js中使用$templateCache&#xff0c;但没用。如何删除使用AngularJS的HTML中的浏览器缓存&#xff1f;app.config([$routeProvider, function($routeP…

dede列表页if判断输出html,首页、列表页调用文章body内容的两种方法

随着源码的开放性&#xff0c;很多SEOER对页面的要求也越来越复杂多样性&#xff0c;很多时候&#xff0c;织梦系统的原有功能并不能满足seoer的页面布置要求&#xff0c;这就需要继续开发页面&#xff0c;做更多的功能调用。今天徐金华SEO给大家讲的是关于首页、列表页调用文章…

计算机如何驱动无线网络,win7如何安装无线网卡驱动 安装无线网卡驱动的方法...

今天告诉大家win7安装无线网卡驱动&#xff1f;无线网卡就是既能接受无线信号&#xff0c;又能发射无线信号的网络设备&#xff0c;但无线网卡就需要安装无线网卡驱动。许多新手用户不懂安装步骤&#xff0c;其实安装方法简单&#xff0c;接下来给大家说明一下win7安装无线网卡…

闽江师范专科高等学校计算机专业在哪个校区,闽江师范高等专科学校有几个校区(官网发布数据)...

闽江师范高等专科学校有几个校区一直都是大家关注的问题之一&#xff0c;根据闽江师范高等专科学校官方网站的学校简介&#xff0c;我们将闽江师范高等专科学校一共有多少个校区的资料缓存到本页&#xff0c;给需要了解的同学参考&#xff0c;最新校区新增&#xff0c;校区合并…

计算机网络技术俄罗斯方块,《The Tetris Effect》:这本新书讲述了俄罗斯方块的传奇故事...

原标题&#xff1a;《The Tetris Effect》:这本新书讲述了俄罗斯方块的传奇故事在游戏发展史上&#xff0c;俄罗斯方块是个传奇。没有一款游戏像它一样影响深远&#xff0c;受到全球不同人的喜爱。在即将出版的《The Tetris Effect》(俄罗斯方块效应)中&#xff0c;科技记者 Da…

计算机主机响是什么原因,电脑主机发出不同的响声及解决措施

电脑在使用一段时间后&#xff0c;难免都会遇到些小问题。如很多朋友使用的台式电脑&#xff0c;在开机的时候&#xff0c;主机就会发出很大的响声。其实当主机发出不同响声时&#xff0c;就代表着不同的故障&#xff0c;我们可以根据相应的响声来找出故障的所在。今天U大侠小编…

计算机课具体任务驱动,计算机基础课程的任务驱动的教学设计与实践论文

任务驱动 教学模式设计是基于多维、互动式的 (教师)主导—(学生)主体相结合 的教学设计理念。针对计算机课程在基础方面的教育,我国已经在上世纪八十年代纳入到了教育基础体系之中,经过阶段性努力,在这一方面已经开始逐步形成模式,并具备一定程度上的规格。以下是学习啦小编为大…

酒店管理与计算机技术结合,(定稿)某酒店内部管理系统的开发与应用(完整版)...

《某酒店内部管理系统的开发与应用.doc》由会员分享&#xff0c;可免费在线阅读全文&#xff0c;更多与《(定稿)某酒店内部管理系统的开发与应用(完整版)》相关文档资源请在帮帮文库(www.woc88.com)数亿文档库存里搜索。1、系统测试功能测试测试总结结论参考文献致谢错误&#…

计算机软考中级能评职称吗,软考中级是中级职称么?考此证后可以办理落户么?...

问&#xff1a;上海居转户的中级职称是必备条件&#xff0c;软考中级算中级职称么&#xff1f;上海居住证积分网陈老师回答&#xff1a;算的&#xff0c;上海居转户承认软考中级或高级证书&#xff0c;当然&#xff0c;软考中级也同样适合居住证积分。软考中级哪个好&#xff1…

东莞 小学计算机编程大赛,关于举办第二十一届东莞市中小学电脑制作活动的通知...

各园区、镇(街道)教育管理中心、市直属学校&#xff1a;“全国中小学电脑制作活动”开办二十届以来&#xff0c;我市中小学生的电脑作品水平不断提高&#xff0c;在全省甚至全国的“中小学电脑制作活动”中取得优异成绩。为了继续办好这项活动&#xff0c;更好地为全国、全省竞…

量子计算机创新,中国式量子霸权:光子量子计算机研究创新纪-24小时-虎嗅网...

中国式量子霸权&#xff1a;光子量子计算机研究创新纪录。在量子计算机的国际竞赛中&#xff0c;使用光粒子(光子)创建量子计算机方法已经向前迈进了一大步。据《科学美国人》(《自然》杂志的姐妹版)报道&#xff0c;中国科学技术大学的潘建伟与陆朝阳教授及其团队改进了一种称…

娄底八中的初中计算机考试,众人同心勤耕耘 敢叫日月换新天

“人平总分和初中毕业会考上线率稳居城区第三&#xff1b;秋季开设娄底首个101远程教育实验班。”火热的7月&#xff0c;众人同心勤耕耘&#xff0c;敢叫日月换新天的娄底八中人又一次沉浸在2010年再创佳绩的喜悦中。娄底八中自2005年升格为娄星区区直中学以来&#xff0c;无论…