国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > web前端 > htmlcss > HTML常用标签之"地图"标签

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

来源:程序员人生   发布时间:2015-03-24 08:12:39 阅读次数:3457次


6. "地图"标签


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


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

<!DOCTYPE html> <html> <head> <title>地图标签</title> <meta charset="utf⑻"> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF⑻"> <!--<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页面



生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生