html的img标签：定义一个图像在网页中引入。它还有个usemap属性很有意思。
看看51ditu首页中有一个地图，中部有个中国地图。点击右键下载下来看下就是一个普通的图片。
但点击地图上的省份却可以触发不同的事件（或打开不同的链接），很有意思。原来是使用了usemap属性。
当然还要定义一个map标签。整份代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>img usemap属性</title>
</head>
<body>
<img src="http://img.jb51.net/maps/chinamap.gif" usemap="#Map" border="1"/>
<map name="Map" class="maparea">
<area shape="rect" coords="73,87,103,104" href="javascript:alert('新疆')">
<area shape="rect" coords="144,125,173,142" href="javascript:alert('青海')">
<area shape="rect" coords="84,158,115,175" href="javascript:alert('西藏')">
<area shape="rect" coords="220,90,257,105" href="javascript:alert('内蒙古')">
<area shape="rect" coords="348,45,389,61" href="javascript:alert('黑龙江')">
<area shape="rect" coords="346,68,371,83" href="javascript:alert('吉林')">
<area shape="rect" coords="323,84,351,100" href="javascript:alert('辽宁')">
<area shape="rect" coords="298,100,326,114" href="javascript:alert('天津')">
<area shape="rect" coords="288,120,314,136" href="javascript:alert('山东')">
<area shape="rect" coords="268,107,295,121" href="javascript:alert('河北')">
<area shape="rect" coords="207,116,235,130" href="javascript:alert('宁夏')">
<area shape="rect" coords="186,162,214,179" href="javascript:alert('四川')">
<area shape="rect" coords="256,142,281,157" href="javascript:alert('河南')">
<area shape="rect" coords="305,144,332,159" href="javascript:alert('江苏')">
<area shape="rect" coords="320,162,342,177" href="javascript:alert('上海')">
<area shape="rect" coords="216,168,243,185" href="javascript:alert('重庆')">
<area shape="rect" coords="250,162,277,177" href="javascript:alert('湖北')">
<area shape="rect" coords="283,161,308,177" href="javascript:alert('安徽')">
<area shape="rect" coords="213,196,239,209" href="javascript:alert('贵州')">
<area shape="rect" coords="243,183,269,198" href="javascript:alert('湖南')">
<area shape="rect" coords="273,185,299,200" href="javascript:alert('江西')">
<area shape="rect" coords="308,177,334,193" href="javascript:alert('浙江')">
<area shape="rect" coords="179,210,204,225" href="javascript:alert('云南')">
<area shape="rect" coords="227,214,252,228" href="javascript:alert('广西')">
<area shape="rect" coords="231,248,257,263" href="javascript:alert('海南')">
<area shape="rect" coords="292,200,319,214" href="javascript:alert('福建')">
<area shape="rect" coords="259,219,287,231" href="javascript:alert('广东')">
<area shape="rect" coords="244,231,270,246" href="javascript:alert('澳门')">
<area shape="rect" coords="276,232,304,248" href="javascript:alert('香港')">
<area shape="rect" coords="311,228,338,243" href="javascript:alert('台湾')">
<area shape="rect" coords="272,90,302,107" href="javascript:alert('北京')">
<area shape="rect" coords="196,130,222,145" href="javascript:alert('甘肃')">
<area shape="rect" coords="246,116,272,130" href="javascript:alert('山西')">
<area shape="rect" coords="224,136,252,151" href="javascript:alert('陕西')">
</map>
</body>
</html>
map标签里的area标签的几个属性意义见：http://www.w3school.com.cn/tags/tag_area.asp
这里还是记下area的shape属性，可选项有矩形，圆形和多边形。尤其要注意的是coords属性，得结合shape使用，图像左上角的坐标是 "0,0"
看看51ditu首页中有一个地图，中部有个中国地图。点击右键下载下来看下就是一个普通的图片。
但点击地图上的省份却可以触发不同的事件（或打开不同的链接），很有意思。原来是使用了usemap属性。
当然还要定义一个map标签。整份代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>img usemap属性</title>
</head>
<body>
<img src="http://img.jb51.net/maps/chinamap.gif" usemap="#Map" border="1"/>
<map name="Map" class="maparea">
<area shape="rect" coords="73,87,103,104" href="javascript:alert('新疆')">
<area shape="rect" coords="144,125,173,142" href="javascript:alert('青海')">
<area shape="rect" coords="84,158,115,175" href="javascript:alert('西藏')">
<area shape="rect" coords="220,90,257,105" href="javascript:alert('内蒙古')">
<area shape="rect" coords="348,45,389,61" href="javascript:alert('黑龙江')">
<area shape="rect" coords="346,68,371,83" href="javascript:alert('吉林')">
<area shape="rect" coords="323,84,351,100" href="javascript:alert('辽宁')">
<area shape="rect" coords="298,100,326,114" href="javascript:alert('天津')">
<area shape="rect" coords="288,120,314,136" href="javascript:alert('山东')">
<area shape="rect" coords="268,107,295,121" href="javascript:alert('河北')">
<area shape="rect" coords="207,116,235,130" href="javascript:alert('宁夏')">
<area shape="rect" coords="186,162,214,179" href="javascript:alert('四川')">
<area shape="rect" coords="256,142,281,157" href="javascript:alert('河南')">
<area shape="rect" coords="305,144,332,159" href="javascript:alert('江苏')">
<area shape="rect" coords="320,162,342,177" href="javascript:alert('上海')">
<area shape="rect" coords="216,168,243,185" href="javascript:alert('重庆')">
<area shape="rect" coords="250,162,277,177" href="javascript:alert('湖北')">
<area shape="rect" coords="283,161,308,177" href="javascript:alert('安徽')">
<area shape="rect" coords="213,196,239,209" href="javascript:alert('贵州')">
<area shape="rect" coords="243,183,269,198" href="javascript:alert('湖南')">
<area shape="rect" coords="273,185,299,200" href="javascript:alert('江西')">
<area shape="rect" coords="308,177,334,193" href="javascript:alert('浙江')">
<area shape="rect" coords="179,210,204,225" href="javascript:alert('云南')">
<area shape="rect" coords="227,214,252,228" href="javascript:alert('广西')">
<area shape="rect" coords="231,248,257,263" href="javascript:alert('海南')">
<area shape="rect" coords="292,200,319,214" href="javascript:alert('福建')">
<area shape="rect" coords="259,219,287,231" href="javascript:alert('广东')">
<area shape="rect" coords="244,231,270,246" href="javascript:alert('澳门')">
<area shape="rect" coords="276,232,304,248" href="javascript:alert('香港')">
<area shape="rect" coords="311,228,338,243" href="javascript:alert('台湾')">
<area shape="rect" coords="272,90,302,107" href="javascript:alert('北京')">
<area shape="rect" coords="196,130,222,145" href="javascript:alert('甘肃')">
<area shape="rect" coords="246,116,272,130" href="javascript:alert('山西')">
<area shape="rect" coords="224,136,252,151" href="javascript:alert('陕西')">
</map>
</body>
</html>
map标签里的area标签的几个属性意义见：http://www.w3school.com.cn/tags/tag_area.asp
这里还是记下area的shape属性，可选项有矩形，圆形和多边形。尤其要注意的是coords属性，得结合shape使用，图像左上角的坐标是 "0,0"
分享到：
发表评论
-
在js上获得cookie中指定的值
2012-08-02 10:56 813获得cookie中的"loginName" ... -
在servlet和filter中获取Spring上下文
2012-07-18 11:32 2586在servlet中 方法一：在spring上下文加载到内存后直 ... -
js作用域链的问题
2012-06-03 22:01 1153var name = "The Window&quo ... -
oracle10g导入导出命令
2011-08-09 16:50 920exp和imp一定要加$符号！ -
oracle10g安装问题
2011-08-08 18:47 1140版本10g,安装是报错:ora-12638 身份证明检索失败, ... -
浏览器缓存
2011-07-18 17:16 859大家在系统开发中都可能会在js中用到ajax或者dwr，因为I ... -
文档类型 <!DOCTYPE HTML>
2011-07-15 11:00 986写html的时候需要定义文档类型，如果不定义，浏览器在渲染 ... -
log4j学习与应用总结
2011-07-09 17:03 1483最近几天研究log4j，个人的一些总结 严重声明问题 对于减少 ... -
获得一个节点对象的节点类型
2011-06-30 18:16 903html:<div id="aa"& ... -
JSTL 只有c:if 而没有 c:else
2011-06-10 14:00 12658在jsp中 我们可以在 《% %》中写if（）{}else{} ... -
JSTL fmt数字日期格式化
2011-05-13 16:07 15103<%@ taglib uri="http:// ... -
el fn函数收藏
2011-05-12 11:28 1162可以截取，用fn函数： <%@ taglib pre ... -
多线程Java Socket编程示例
2011-03-30 14:53 902http://www.blogjava.net/sternin ... -
struts2 type="chain"时result的参数
2011-03-28 15:27 1776Type=“chain”时 result标签的参数可以有下面4 ... -
在eclipse中修改注释模板和myeclipse6.0下art+/不能用的解决办法
2011-03-09 15:45 1139注释模板设置 eclipse-->Window--> ... -
struts2学习笔记之转换器实现语言切换
2011-02-26 11:38 1229第一步,在工程src目录下新建属性文件struts.prope ... -
castor学习笔记
2011-02-21 16:02 2169castor是一个可以把java对象和XML进行相互转换的工具 ... -
获得字符串的拼音头和全拼的写法
2011-02-14 10:20 2089public class SpellCache impleme ... -
查找出clazz的声明属性以及父类的声明属性
2010-07-08 15:33 973private List _getFields(Class c ... -
关于自定义标签rtexprvalue属性
2010-07-02 11:56 1244自定义标签时，在<attribute>标签里指定& ...
相关推荐
为了实现中国地图的分区链接，我们需要对每个省份进行精确的坐标划分。这通常需要利用GIS软件或在线工具来获取每个省份的边界坐标。一旦有了这些坐标，我们就可以将它们插入到`<area>`的`coords`属性中。例如，对于...
通常情况下，`<map>`标签会配合`<img>`标签一起使用，其中`<img>`标签的`usemap`属性值应与`<map>`标签的`name`或`id`属性值相匹配。 ##### 2.2 标签结构 `<map>`标签的基本结构如下： ```html <img src="image....
【项目资源】： 单片机项目适用于从基础到高级的各种项目，特别是在性能要求较高的场景中，比如操作系统开发、嵌入式编程和底层系统编程。如果您是初学者，可以从简单的控制台程序开始练习；如果是进阶开发者，可以尝试涉及硬件或网络的项目。 【项目质量】： 所有源码都经过严格测试，可以直接运行。 功能在确认正常工作后才上传。 【适用人群】： 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】： 有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 鼓励下载和使用，并欢迎大家互相学习，共同进步。 # 注意 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担。 2. 部分字体以及插图等来自网络，若是侵权请联系删除。
毕设工坊：专注于计算机毕业设计项目的交流与资源共享平台，涵盖各类技术文档、代码示例及实战经验分享，助力学子顺利完成学业挑战。
【window 可视化nvm管理node版本 nvm-desktop】
资源内项目源码是来自个人的毕业设计，代码都测试ok，包含源码、数据集、可视化页面和部署说明，可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源，毕设答辩评审绝对信服的保底85分以上，放心下载使用，拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务，拿来就能用的绝对好资源！！！ 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件，仅供学习参考, 切勿用于商业用途。
# 基于microbit编程语言的mymicrobit扩展插件项目 ## 项目简介 这是一个基于microbit编程语言的mymicrobit扩展插件项目。该项目旨在提供额外的功能和特性，以扩展microbit编程环境。通过此插件，用户可以轻松地在MakeCode环境中进行编程，实现对micro:bit设备的更多控制和功能实现。 ## 项目的主要特性和功能 1. 扩展性提供了丰富的积木块和代码库，允许用户轻松实现复杂的编程逻辑和功能扩展。 2. 图形化编程支持通过积木块形式的图形化编程，降低编程门槛，方便初学者快速上手。 3. 实时预览提供了积木块的实时预览功能，方便用户直观地了解代码块的逻辑和功能。 4. 与MakeCode无缝集成可以直接在MakeCode环境中导入和使用，无需额外的配置和安装。 ## 安装使用步骤
【项目资源】： 单片机项目适用于从基础到高级的各种项目，特别是在性能要求较高的场景中，比如操作系统开发、嵌入式编程和底层系统编程。如果您是初学者，可以从简单的控制台程序开始练习；如果是进阶开发者，可以尝试涉及硬件或网络的项目。 【项目质量】： 所有源码都经过严格测试，可以直接运行。 功能在确认正常工作后才上传。 【适用人群】： 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】： 有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 鼓励下载和使用，并欢迎大家互相学习，共同进步。 # 注意 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担。 2. 部分字体以及插图等来自网络，若是侵权请联系删除。
资源内项目源码是来自个人的毕业设计，代码都测试ok，包含源码、数据集、可视化页面和部署说明，可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源，毕设答辩评审绝对信服的保底85分以上，放心下载使用，拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务，拿来就能用的绝对好资源！！！ 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件，仅供学习参考, 切勿用于商业用途。
项目资源包含：可运行源码+sql文件 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 项目具有较高的学习借鉴价值，也可拿来修改、二次开发。 有任何使用上的问题，欢迎随时与博主沟通，博主看到后会第一时间及时解答。 开发语言：Python 框架：django Python版本：python3.8 数据库：mysql 5.7 数据库工具：Navicat 开发软件：PyCharm 浏览器：谷歌浏览器
第三章-局域网-思维导图
内容概要：PT300机械故障综合模拟实验台由瓦仑尼安教学设备有限公司生产，旨在帮助用户深入了解振动特征知识及复杂转子振动频谱分析，实现精密振动分析和精准故障诊断。该实验台能模拟轴承故障、不平衡、不对中、设备松动、转子摩擦等多种机械故障现象，可进行不同转速下的轴承故障频率识别、转子静动平衡模拟试验、设备启停机测试等实验。设备采用高效节能ABB三相交流电动机，配备高精度转速控制和测量模块，确保运行稳定。此外，实验台还设有透明防震安全罩和互锁开关，保障实验安全。; 适合人群：高校师生、科研人员等需要学习或研究机械故障诊断相关理论知识和实践技能的人群。; 使用场景及目标：①用于高校等教育机构的教学，辅助学生理解机械故障诊断的理论知识和实践技能；②满足科研人员进行机械故障诊断算法验证、故障特征分析等科研需求。; 其他说明：PT300机械故障综合模拟实验台的每个部件均经过高精度加工，确保在不同振动状态下稳定运行。用户可根据期望分析特定部件的故障特征。设备尺寸为735mm（长）×310mm（宽）×350mm（高），保修一年，且提供免费操作指导服务。
【项目资源】： 适用于从基础到高级的各种项目，特别是在性能要求较高的场景中，比如操作系统开发、嵌入式编程和底层系统编程。如果您是初学者，可以从简单的控制台程序开始练习；如果是进阶开发者，可以尝试涉及硬件或网络的项目。 【项目质量】： 所有源码都经过严格测试，可以直接运行。 功能在确认正常工作后才上传。 【适用人群】： 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】： 有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 鼓励下载和使用，并欢迎大家互相学习，共同进步。 # 注意 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担。 2. 部分字体以及插图等来自网络，若是侵权请联系删除。
内容概要：本文详细介绍了使用COMSOL Multiphysics的弱形式接口对三维光子晶体进行数值模拟的方法和技巧。文章通过具体的代码示例，解释了如何构建光子晶体的介电常数分布、设置弱形式PDE、处理电磁场切向连续性、应用Floquet周期边界条件以及特征值求解等关键步骤。特别强调了弱形式接口相比传统物理场接口的优势，如灵活性和对复杂边界的处理能力。文中还分享了一些实用的经验和注意事项，如布洛赫边界条件的实现、特征值求解器参数的优化配置以及网格划分的技巧。 适合人群：具备一定电磁学和数值模拟基础的研究人员或工程师，尤其是对光子晶体仿真感兴趣的读者。 使用场景及目标：①理解并掌握COMSOL弱形式接口在光子晶体仿真中的应用；②学习如何通过弱形式设置处理复杂的电磁场问题；③提高对光子晶体能带结构和带隙特性的认识；④掌握特征值求解和网格划分的最佳实践。 阅读建议：由于本文涉及较多的具体代码和物理概念，建议读者在阅读过程中结合COMSOL软件进行实际操作，同时查阅相关电磁理论书籍以加深理解。此外，对于文中提到的一些具体参数设置和技巧，可以通过尝试不同的配置来巩固所学知识。
# 基于Arduino平台的INSPTComputacion2项目 ## 项目简介 INSPTComputacion2是一个基于Arduino平台的开发项目。该项目旨在通过Arduino的硬件和软件能力，实现一系列计算和交互功能。通过此项目，用户可以体验到Arduino在嵌入式系统、物联网和微控制器等领域的强大功能。 ## 项目的主要特性和功能 该项目的主要特性和功能包括但不限于以下几点 1. 嵌入式系统开发利用Arduino的硬件资源，开发嵌入式系统应用。 2. 物联网应用实现Arduino与物联网技术的结合，进行数据采集、传输和控制。 3. 交互设计通过Arduino实现人机交互，如按钮控制、LED显示等。 4. 数据处理利用Arduino进行数据处理和分析，如温度、湿度等环境数据的采集和处理。 ## 安装使用步骤 以下是在已下载本项目源码文件后的安装使用步骤 1. 确保已安装Arduino IDE软件。
【项目资源】： 物联网项目适用于从基础到高级的各种项目，特别是在性能要求较高的场景中，比如操作系统开发、嵌入式编程和底层系统编程。如果您是初学者，可以从简单的控制台程序开始练习；如果是进阶开发者，可以尝试涉及硬件或网络的项目。 【项目质量】： 所有源码都经过严格测试，可以直接运行。 功能在确认正常工作后才上传。 【适用人群】： 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】： 有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 鼓励下载和使用，并欢迎大家互相学习，共同进步。 # 注意 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担。 2. 部分字体以及插图等来自网络，若是侵权请联系删除。
【项目资源】： 物联网项目适用于从基础到高级的各种项目，特别是在性能要求较高的场景中，比如操作系统开发、嵌入式编程和底层系统编程。如果您是初学者，可以从简单的控制台程序开始练习；如果是进阶开发者，可以尝试涉及硬件或网络的项目。 【项目质量】： 所有源码都经过严格测试，可以直接运行。 功能在确认正常工作后才上传。 【适用人群】： 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】： 有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 鼓励下载和使用，并欢迎大家互相学习，共同进步。 # 注意 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担。 2. 部分字体以及插图等来自网络，若是侵权请联系删除。
Python数据结构-学习笔记
该系统展示了一个电影在线购票系统的结构图，系统分为前台和后台两部分。前台包括首页、影院信息、电影信息、电影资讯和个人中心等模块，主要面向普通用户，提供电影浏览、选座购票、个人账户管理等功能。后台部分由管理员通过后台模块进行操作，包括系统首页、用户管理、场次管理、时间段管理、影院信息管理、电影分类管理、电影信息管理、订单管理和个人中心等模块，用于系统的维护和管理，如用户信息维护、电影和影院信息更新、订单处理等。整个系统旨在为用户提供便捷的在线购票体验，同时确保后台管理的高效和有序。
5G NR射频一致性自测用例 由于NR射频测试场景太多，全指标自动化跑测用时太久，本表格选取了主要场景的关键指标，以便于射频工程师对产品的NR射频指标进行初步摸底。 表格每一页概况： 1、NR TDD摸底指标N77/78/79/41 2、NR FDD摸底指标N1/3//5/8/28 附录1、各频段带宽所支持的SCS 附录2、各带宽SCS的RB配置 附录3、灵敏度测试的RB配置 附录4、摸底测试信道查询 附录5、各频段频率范围