`
zhanyu1984
  • 浏览: 73007 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

img usemap属性 中国地图链接

 
阅读更多
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"
分享到:
评论

相关推荐

    地图分区链接 示例源码

    为了实现中国地图的分区链接,我们需要对每个省份进行精确的坐标划分。这通常需要利用GIS软件或在线工具来获取每个省份的边界坐标。一旦有了这些坐标,我们就可以将它们插入到`&lt;area&gt;`的`coords`属性中。例如,对于...

    图片分区块链接 12306网站地图分区块链接代码

    &lt;img src="map3.gif" usemap="#imageMap"&gt; ,0,50,50" href="page1.html"&gt; ,50,25" href="page2.html"&gt; ``` 在这个例子中,`map3.gif`是图片,`imageMap`是映射名,`&lt;area&gt;`标签定义了两个链接区域:一个矩形区域...

    图像的影像地图超链接(热点区域),map标签浅谈

    在这个例子中,`name`属性指定了地图的名称,必须与`&lt;img&gt;`标签中的`usemap`属性值相匹配。 ##### 2.3 `&lt;area&gt;`标签 `&lt;area&gt;`标签用于定义图像中的一个热点区域,可以通过点击这个区域来跳转到指定的URL。 **属性...

    HTML给位图片上的指定区域(热点)添加超链接.zip

    在压缩包中的资源,"HTML 5 -img- usemap 属性.url"和"2.HTML -img- 标签的 usemap 属性.url"很可能是指向W3School或其他教程网站的链接,这些资源提供了更详细的教程和实例,帮助理解`usemap`属性的用法。...

    html基础属性代码

    `&lt;img&gt;`标签加载图像,`src`, `width`, `height`, `alt`, `title`, `dynsrc`和`usemap`属性分别定义图像源、尺寸、提示文本、动态源和映射。 12. **多媒体播放**:`&lt;embed&gt;`标签用于插入媒体文件,如音频或视频,`...

    html map 标签使用

    通常情况下,`&lt;map&gt;`标签会配合`&lt;img&gt;`标签一起使用,其中`&lt;img&gt;`标签的`usemap`属性值应与`&lt;map&gt;`标签的`name`或`id`属性值相匹配。 ##### 2.2 标签结构 `&lt;map&gt;`标签的基本结构如下: ```html &lt;img src="image....

    用基于栅格数据结构的USEMAP软件包制作多因素叠加专题图.pdf

    在USEMAP软件包中,制作多因素叠加专题图首先需要使用TABLET程序对每个评价因素进行数字化,并赋予不同的属性编码。完成数字化后,使用COMBINE程序进行图型叠加,并产生新的多边形属性编码。在这些编码中,某些特定...

    html中map热点area的使用全部代码和效果,兼容所有浏览器

    `usemap`属性的值是一个井号(#)后面跟着`&lt;map&gt;`元素的`name`属性,这将两者关联起来。 接下来,我们使用`&lt;area&gt;`标签定义图像上的热点区域。`&lt;area&gt;`标签具有多个属性,包括`shape`、`coords`和`href`: 1. `...

    html中的map属性--地图例子

    在上述代码中,`&lt;img&gt;`标签中的`usemap`属性引用了`&lt;map&gt;`的`name`属性,即"#fijiMap"。接着,我们定义了三个`&lt;area&gt;`元素,每个都有不同的`shape`、`coords`和`href`属性。 1. `shape`属性定义了区域的形状,可以...

    给图片上加上多个链接.txt

    - `&lt;IMG&gt;`标签定义了图像的位置和大小,其中`useMap`属性指定了与该图像关联的地图名称。 - `&lt;MAP&gt;`标签定义了一个图像映射,`name`属性用于标识这个映射。 - 每个`&lt;AREA&gt;`标签定义了图像中的一个可点击区域,包括...

    网页设计与制作(HTML+CSS+JS)-3期(KC003) KC003050000002 单元设计_任务2 网页的基本页面实现

    此外,标签还可以配合#锚点实现页面内部跳转,以及使用&lt;img&gt;标签中的usemap属性实现图像映射,创建可点击的图像区域。 表格与列表是组织信息的有效工具。标签用于创建表格,定义行,定义单元格,而用于定义表头。...

    IMG中UserMap的使用示例

    然后,我们可以在`&lt;img&gt;`标签中使用`usemap`属性来引用这个图像地图: ```html &lt;img src="test.gif" usemap="#Map"&gt; ``` 这里的`#Map`就是我们之前定义的`&lt;map&gt;`标签的名称。这样,当用户点击图像的相应区域时,...

    前端练习01-前端-HTML(image)

    6. **usemap和ismap属性**:这两个属性与图像映射有关,允许创建交互式图像,通过点击图像的不同区域链接到不同的位置。 7. **loading属性**:用于控制图像的加载方式,如`loading="lazy"`实现延迟加载,提高页面...

    HTML5创建热点区域.pdf

    使用 `&lt;img&gt;` 标签,添加 `src` 属性指定图片路径,并使用 `usemap` 属性定义关联的热点地图。`usemap` 的值应该以 `#` 开头,后跟热点地图的名称,例如 `#pic`。 ```html &lt;img src="图片地址" usemap="#pic"&gt; ``` ...

    html标签属性大全.pdf

    3. **影像地图 `&lt;map&gt;` 和 `&lt;area&gt;`**:允许创建交互式的图像,通过`usemap`属性将图像与`&lt;map&gt;`关联,然后使用`&lt;area&gt;`定义可点击的区域。 在准备考试或学习HTML时,了解这些基本标签及其属性是至关重要的。它们...

    js 动态获取图片矩形热区,并在热区上添加蒙版,鼠标经过,以半透明形式显示该区域

    - `&lt;img&gt;` 元素用于在网页上插入图像,`usemap` 属性用于关联图像与图像映射。 - `&lt;map&gt;` 元素定义图像映射,内部包含若干个`&lt;area&gt;`元素,每个`&lt;area&gt;`代表一个热区。 2. **JavaScript 动态创建热区**: - 可以...

    HTML的MAP设计

    在上面的例子中,`&lt;img&gt;`标签的`usemap`属性引用了`&lt;map&gt;`的`name`属性,这样就能将图像与映射关联起来。`&lt;area&gt;`元素则定义了具体的可点击区域,包括形状(如矩形`rect`、圆形`circle`、多边形`polygon`等)、坐标...

    为图片根据坐标自动创建热区并点击变颜色

    &lt;img src="example.jpg" usemap="#myMap"&gt; ,0,100,100" href="#" alt="区域1" onclick="changeColor(this)"&gt; function changeColor(area) { area.style.fill = 'blue'; // 改变颜色 area.style.opacity =...

    HTML超链接图片热点区域.zip

    这个`name`属性的值在`&lt;img&gt;`标签中用`usemap`属性引用,以将图像与映射关联起来。 ```html &lt;img src="image.jpg" usemap="#imageMap"&gt; &lt;!-- area标签会放在这里 --&gt; ``` 2. `&lt;area&gt;`标签: - `&lt;area&gt;`...

Global site tag (gtag.js) - Google Analytics