首页
网页制作
网络编程
脚本专栏
数据库
网站运营
网络安全
平面设计
CMS教程
搜索
建站极客
网页制作
HTML/Xhtml
正文
img usemap属性 中国地图链接
所属分类:
网页制作
/
HTML/Xhtml
阅读数: 2077
收藏 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"。
更多精彩内容
其他人还在看
浅谈HTML代码中的空格和空行
下面小编就为大家带来一篇浅谈HTML代码中的空格和空行。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
全面了解html.css溢出
下面小编就为大家带来一篇全面了解html.css溢出。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
htm初学笔记(新手必看)
下面小编就为大家带来一篇htm初学笔记(新手必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
HTML中文件上传时使用的<input type="file">元素的样式自定义
这篇文章主要介绍了HTML中文件上传时使用的<input type=
评论 0
收藏 0
赞 0
分享
关于input的file 控件及美化
下面小编就为大家带来一篇关于input的file 控件及美化。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
Html/Css(新手入门第一篇必看攻略)
下面小编就为大家带来一篇Html/Css(新手入门第一篇必看攻略)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
HTML 隐藏滚动条和去除滚动条的方法
这篇文章主要介绍了HTML 隐藏滚动条和去除滚动条的方法的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
浅谈html标签的显示模式(块级标签,行内标签,行内块标签)
下面小编就为大家带来一篇浅谈html标签的显示模式(块级标签,行内标签,行内块标签)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
html制作细线表格的简单实例
下面小编就为大家带来一篇html制作细线表格的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
HTML中table表格标签的基础学习教程
用table标签在Web上显示表格内容是HTML所具有的最基本功能之一,这里我们就来看一下HTML中table表格标签的基础学习教程,需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
查看更多
网络赚钱
更多
网上赚钱怎么赚钱?网上兼职的方法有哪些
屌丝伪装高富帅 用女友朋友圈低价卖iPhone 6 卷走180万
网络公司的普通程序员如何利用QQ营销月赚万元
浅谈一下个人站长领域的灰色地带有多么的暴利
百度图+推广上线 如何在图片上投放广告_图片屏蔽不想出现图+广告
为什么做网站不赚钱?做网站不赚钱的三大原因
站长故事
更多
被低估的公司(一):写在阿里IPO之后
揭晓互联网三大巨头(百度,腾讯,阿里巴巴)和草根站长的往来
创业失败:一个屌丝站长4年互联网的辛酸经历
浅谈网站站长之现状
职场中12种经典实用的管理方法和工具
精品内容永不过时,个人站长应自我审视