首页
网页制作
网络编程
脚本专栏
数据库
网站运营
网络安全
平面设计
CMS教程
搜索
建站极客
网页制作
HTML/Xhtml
正文
img usemap属性 中国地图链接
所属分类:
网页制作
/
HTML/Xhtml
阅读数: 2029
收藏 0
赞 0
分享
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"。
更多精彩内容
其他人还在看
W3C教程(14):W3C RDF和OWL活动
RDF 和 OWL 是两项重要的语义网技术。 RDF 和 OWL 是两项重要的语义网技术。 语义网 (Semantic Web) 语义网是为资产管理、企业整合及网络数据的共享和重用提供的一个框架。 语义网为企业、应
评论 0
收藏 0
赞 0
分享
W3C教程(16):其他的W3C活动
本节概况了其他一些重要和有趣的 W3C 活动。 本节概况了其他一些重要和有趣的 W3C 活动。 Web Accessibility Initiative (WAI) WAI 定义了如何使残障人士更易使用 Web 内容的指
评论 0
收藏 0
赞 0
分享
W3C教程(13):W3C WSDL 活动
Web Services 与应用程序到应用程序的通信有关。WSDL 是一门基于 XML 的 Web Services 描述语言。 Web Services 与应用程序到应用程序的通信有关。 WSDL 是一门基于 XML 的 Web Se
评论 0
收藏 0
赞 0
分享
W3C教程(15):W3C SMIL 活动
SMIL 向 web 增加了对定时和媒介同步的支持。 SMIL 向 web 增加了对定时和媒介同步的支持。 SMIL SMIL (Synchronized Multimedia Integration Language)
评论 0
收藏 0
赞 0
分享
深层优化 提高网站的访问速度的一些技巧
深层优化 提高网站的访问速度的一些技巧 网站访问速度可以直接影响到网站的流量,而网站的访问量几乎与网站的利益直接挂钩,因此网站的速度问题成为企业及站长十分关注的问题。现在网站越来越多,不少朋友的网站打开速度很
评论 0
收藏 0
赞 0
分享
网页制作中使用规范的HTML代码的几点
许多网站设计者最常犯的错误便是当其网页能够在IE下正常显示便认为其代码正确无误,甚至常看到有人在抱怨其网站排名不理想,到其网站简单看一下便可发现HTML代码中充斥各种各样的错误,在那样的代码基础上无论付出多少努力去优化网站结果都可能
评论 0
收藏 0
赞 0
分享
关于超链接的一些问题
很高兴参加了这一期的薯片会,认识了几个朋友~~不料的却是今天我要来总结一下 很高兴参加了这一期的薯片会,认识了几个朋友~~不料的却是今天我要来总结一下 本次薯片会我们总共讨论了三个议题: A、 如何让“用
评论 0
收藏 0
赞 0
分享
入门:HTML的基本标签和属性简单介绍
HTML是由标志和属性构成的,它们一起被用来告诉浏览器应该如何显示一页文档。标志用来引用一段文字或是一幅图片等文档部件,属性是标志的选项,在标志中修饰,如颜色,对齐方式,高度和宽度等。很多标志都成对出现,例如有 就有 前一个表示开始
评论 0
收藏 0
赞 0
分享
总结XHTML代码常见的应用问题
一段时间以来,发现有很多人XHTML都不会用,不光是普通的初学者,有的程序员都不是很清楚该怎么写这个XHTML,我这里呢算是把一些常见的应用问题做一个总结,也算能使得大家能在沟通,合作上能形成默契。 一段时间以来,发现有
评论 0
收藏 0
赞 0
分享
作用相似html标记:strong与em、q、cite、blockquote
在XHTML标签中有一些标签的作用是相似的,当然这里的相似是指语义相似,以至于很多人都不清楚这些相似的标签如何使用,那么今天的主题就是分解相似的标签,明确各个标签的用途。在前面我们已经讲过了strong与em的区别。除了strong与em之外还有
评论 0
收藏 0
赞 0
分享
查看更多
网络赚钱
更多
调查:55.2%受访用户不会相信朋友圈打广告的化妆品
女子注册相亲网站收到短信 点击链接后6万块钱不翼而飞
网络赚钱的几种模式总结
营销型网站建设提高网站转化率的方法
浅谈一下个人站长领域的灰色地带有多么的暴利
app开发者如何从应用程序中赚钱?
站长故事
更多
iPhone创造了黄牛 还是黄牛捧红了iPhone?
我眼里的2014年中国互联网大会亮点
八零后站长们:我们都是“囧”的一代
我是怎么赚到人生的第一个百万的
人物:戴志康,80后创业者携惊叹号而来
暴走漫画运营经理 这就是高级运营与初级运营的区别