img usemap属性 中国地图链接

html的img标签:定义一个图像在网页中引入。它还有个usemap属性很有意思。
看看51ditu首页中有一个地图,中部有个中国地图。点击右键下载下来看下就是一个普通的图片。
但点击地图上的省份却可以出发不同的事件(或打开不同的链接),很有意思。原来是使用了usemap属性。
当然还要定义一个map标签。整份代码如下:

img usemap属性 中国地图链接

<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>

这里还是记下area的shape属性,可选项有矩形,圆形和多边形。尤其要注意的是coords属性,得结合shape使用,图像左上角的坐标是 "0,0"。

原创文章,作者:admin,如若转载,请注明出处:https://www.laofox.com/web/html-tutorial/185.html

(0)
上一篇 2022年7月3日 下午1:21
下一篇 2022年7月3日 下午1:21

相关推荐

  • W3C教程(14):W3C RDF和OWL活动

    RDF 和 OWL 是两项重要的语义网技术。 RDF 和 OWL 是两项重要的语义网技术。 语义网 (Semantic Web) 语义网是为资产管理、企业整合及网络数据的共享和重用...

    html 2022年7月3日
    2500
  • 深层优化 提高网站的访问速度的一些技巧

    深层优化 提高网站的访问速度的一些技巧   网站访问速度可以直接影响到网站的流量,而网站的访问量几乎与网站的利益直接挂钩,因此网站的速度问题成为企业及站长十分关注的问题。现在网站越...

    html 2022年7月3日
    3400
  • 用js互相调用iframe页面内的js函数

    最近,天天搞论文开题报告,一时技痒,再次设计Web,一下子就碰到一个问题,以前设计WEB页的时候都是在IE里面跑的,从来没有考虑过firefox 更别提chrome了,可是现在不同...

    2022年7月4日
    3800
  • 关于超链接的一些问题

    本次薯片会我们总共讨论了三个议题:A、 如何让“用户”更容易识别超链接?B、 超链接是否一定要带有“下划线”?C、 是按钮还是链接?一、 如何让“用户”更容易识别超链接?感觉都像链...

    2022年7月3日
    5900
  • HTML 文本转义小窍门

    今天在CSDN看到一种HTML文本转义的小窍门,很简便。 1、用dom的功能。先作为innerTEXT传给一个dom对象,再取innerHTML属性,就可以取到转义后的文本了。 例...

    html 2022年7月3日
    4400
  • HTML使用相对路径获取各级目录下文件方式详解

    相对路径的概念 以当前文件所在位置为参考点,建立目标文件的路径。 绝对路径的概念 整个文件的完整路径,比如X:\www\web\index.html,或者 http://waldo...

    html 2022年6月8日
    7200
  • 网页布局设计的简单原则

    本文整理了一些网页布局设计的简单原则,希望对网页设计者有一些用处。 本文整理了一些网页布局设计的简单原则,希望对网页设计者有一些用处。 ・重复:在整个站点中重复实现某些页面设计风格...

    html 2022年7月3日
    3100
  • XHTML教程:Transitional和Strict的区别

    其实XHTML 1.0还分两种(加上Frameset DOCTYPE的话算三种,本文不讨论),Transitional(过渡型)和Strict(严格)DOCTYPEs。并且HTML...

    html 2022年7月3日
    3100
  • HTML中img标签只显示图片中心位置的方法(三种方法)

    html中 img标签显示图片中心的方法目前知道三种,在此记录一下 第一种:用到css的clip:rect(top right bottom left);用法,需要配合positi...

    html 2022年6月8日
    33600
  • html 基底网址标记

    它的作用就是定一个全局的样式。那你后面的相对路径会以这个为基准: <img src="logo.gif" />会变成 <img src="https://www....

    html 2022年7月3日
    4400

发表评论

您的电子邮箱地址不会被公开。