首页
网页制作
网络编程
脚本专栏
数据库
网站运营
网络安全
平面设计
CMS教程
搜索
建站极客
网页制作
HTML/Xhtml
正文
img usemap属性 中国地图链接
所属分类:
网页制作
/
HTML/Xhtml
阅读数: 2019
收藏 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"。
更多精彩内容
其他人还在看
DOCTYPE 文档类型声明(网页爱好者必看)
文档类型声明与不声明,将会导致你的css或js都无法正常安装要求显示。所以好多网站都声明了文档类型。这样做有什么好处大家可以看看下面的文章。
评论 0
收藏 0
赞 0
分享
纯HTML标签你熟悉多少?
HTML标签很多,可是实际上常用的却就那么十几二十个,很多标签的功能渐渐的被大家忽略了.然后,如果在适当的时候,用一用,还是能在一定程序上给我们的页面设计带来一点小小的方便的.
评论 0
收藏 0
赞 0
分享
HTML元素的ID和Name属性的区别
ID就像是一个人的身份证号码,而Name就像是他的名字,ID显然是唯一的,而Name是可以重复的。
评论 0
收藏 0
赞 0
分享
HTML meta的大作用
meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的与中,meta 标签的用处很多。
评论 0
收藏 0
赞 0
分享
HTML标签tbody的用法与说明
tbody 标签表格主体(正文)。该标签用于组合 HTML 表格的主体内容。
评论 0
收藏 0
赞 0
分享
HTML 特殊字符转换表
html下特殊字符转换表
评论 0
收藏 0
赞 0
分享
HTML基础 HTML的组成结构
HTML是网页主要的组成部分,基本上一个网页都是由HTML语言组成的,所以要学习网站怎样建设,必须从网页的基本语言学起。
评论 0
收藏 0
赞 0
分享
HTML基础之HTML内容细则
我们在第一讲里概括了一下网页的主要框架,现在我们来详细的研究网页的内部细则
评论 0
收藏 0
赞 0
分享
Shtml 精简教程
SSI有什么用? 之所以要扯到ssi,是因爲shtml--server-parsed HTML 的首字母缩略词。包含有嵌入式服务器方包含命令的 HTML 文本。在被传送给浏览器之前,服务器会对 SHTML 文档进行完全地读取、分析以及修改。
评论 0
收藏 0
赞 0
分享
浅谈html table 标签
总的来说,table是个复杂的东西,关于它的主题也很多。我想简单的复习一下table。
评论 0
收藏 0
赞 0
分享
查看更多
网络赚钱
更多
最强PS网银汇款截图:轻松骗走网店17万奢侈品
浅谈网络营销:从卖鸡蛋面的老板联想到个人站长
怎么才能做好移动互联网营销?
广告如何投放才最正确有效?我就给你3个建议!
电脑系统下载类网站是怎么赚钱的?浅析电脑系统下载类网站的赚钱方式
浅谈一下个人站长领域的灰色地带有多么的暴利
站长故事
更多
某个人站长怎么用交友网站年赚80万的
微营销实例之一个80后妈妈的微商之旅
如何利用百度贴吧做网络营销
我认识的互联网活化石金山劳模雷军
站长从菜鸟到资深必经过程
个人经历:盲目的坚持更新网站真的有用吗?