HTML常用标签之"地图"标签

六. "地图"标签

简介: 这个和上一章的图像标签一样, 都属于简单容易理解的, 所谓的地图标签就是在原本的图像上添加了地图上坐标的概念, 使得图像上不同的坐标位置点击时可以有不同的跳转页面

跟上一章一样, 直接上码了

<!DOCTYPE html>
<html>
  <head>
    <title>地图标签</title>

	<meta charset="utf-8">
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>
  <a href="Main.html">返回主页</a><br>
  <img src="Image/beacon.jpg" usemap="#mymap" border=5/>
  <map name="mymap">
  <!-- 图像的该坐标处指向的是打开百度, 因为该方法较先执行, 如有重叠的区域,点击则会进入百度界面 -->
  	<area shape="rect" coords="0,0,100,200" href="http://www.baidu.com" target="_blank">
  	<!-- 图像的该坐标处指向了打开CSDN -->
  	<area shape="circle" coords="0,0,200,400" href="http://www.csdn.net" target="_blank">
  </map>
  </body>
</html>

运行结果:

点击下图蓝线内的任意位置, 打开百度网页

点击下图蓝线内的区域进入CSDN页面

时间： 2024-07-31 18:09:30

HTML常用标签之"地图"标签的相关文章

HTML常用标签之格式标签

首先我们把HTML的常用标签分为一下几类: 格式标签, 文本标签, 超链接标签, 锚点标签, 图像标签, "地图"标签. 一. 格式标签 1. 作用: 用于定义网页中的布局, 缩进, 位置, 换行列等等 2. 各属性作用: <hr>  <br>  <p></p>  <center></center> &l

百度地图API多个点聚合时，标注添加的标签label地图刷新就丢失的问题解决

当将自定义的Marker(含有Label)通过MarkerClusterer 管理的时候,当地图发生任何移动.缩放的时候,Marker 的Label 就会自动消失. 这个问题主要是由于百度的点聚合API<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></scrip

html常用标签（form标签）

一.form标签 form标签是html标签中非常重要的一个标签.常用于注册.登录页面的使用. <form action="提交地址" method="提交方式"> </form> 注:method的值有两个.get(默认值)和post.get数据安全性没有post高.post的速度没有get快. form常用的元素: 1.文本框 <input type="text"/> 2.密码框 <input typ

FineReport中如何用JavaScript自定义地图标签

在日常使用地图过程中,通常会遇到地图标签,提示点等显示不满足我们的需求,需要进行JavaScript代码编写. 例如:在使用地图过程中,会发现很多地名显示的位置偏离.这时候就需要使用JavaScript进行调控.以黑龙江和内蒙古为例,来介绍下如何在FineReport中利用JavaScript自定义地图标签. 新建地图以区域地图为例,新建表单,拖入地图(新特性)组件,地图边界选择区域地图下的中国(省级): 数据准备新建工作簿,添加数据集ds1,SELECT*FROM地图1,选中图表,选择图表

jQuery常用的方法和标签总结01(有代码示例)

//jQuery的优点 : 1 轻量级 2 强大的选择器 3 出色的DOM操作的封装 4 可靠的事件处理机制 5 完善的Ajax 6 不污染顶级变量 7 出色的浏览器兼容性 8 链式操作方式 9 隐式迭代 10 行为曾与结构层的分离 11 丰富的插件支持 12 完善的文档 13 开源 <script src="

我们常用的在a标签中有点击事件

我们常用的在a标签中有点击事件:1. a href="javascript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放.W3C标准不推荐在href里面执行javascript语句 2. a href="javascript:void(0);"

前端之head标签，基本标签，div和span，常用标签，表单标签

一.head标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="icon" href="https://www.jd.com/favicon.ico"> <meta name="keyw

HTML常用标签之超链接标签

前面学习过了格式标签和文本标签, 本章开始学习超链接标签三. 超链接标签 1. 分类: 超链接标签分为相对URL和绝对URL 2. 作用: 相对URL: 指向站点内的某个文件(例如: 跳转到xxx.html) 绝对URL: 指向另一个站点 (例如: 跳转到http://www.baidu.com) 3. 属性作用: <a href=" "></a> <!-- 提供 href 属性或 name 属性, 标签的 href 属性用于指定超链接目标的 URL -

jsp：常用标签的核心标签的使用

一,本例主要讲核心标签的使用方法 <c:out value="${null}" default="ada"></c:out>  <c:out value="&ltadadadd&gt" escapeXml="false"></c:out> <!-- escapeXml方法是否使用Xml特