码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-03-06 17:06:16      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:html   web app   


六. "地图"标签


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


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

<!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页面

技术分享

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

标签:html   web app   

原文地址:http://blog.csdn.net/anig2014/article/details/44100959

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!