`
zhouyrt
  • 浏览: 1158923 次
  • 性别: 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://www.51ditu.com/maps/img/chinamap.gif?n%A3%BDm" 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"。

 

分享到:
评论
3 楼 elementstorm 2009-09-11  
...刚接触dreamweaver就拿这个标签折腾了好久
2 楼 xiaoyu 2009-06-23  
标题党呀。。。。。。

无语了。。。。。。。
1 楼 ferreousbox 2009-06-23  
这个你才知道?

相关推荐

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

    `&lt;map&gt;`标签定义了一个图像映射,它不包含任何实际的内容,而是通过`name`属性定义了一个唯一的名字,这个名字与`&lt;img&gt;`标签的`usemap`属性相对应。例如,`&lt;map name="imageMap"&gt;`。 然后,`&lt;area&gt;`标签是真正的...

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

    - 确保`&lt;img&gt;`标签中的`usemap`属性与`&lt;map&gt;`标签中的`name`属性保持一致。 2. **热点区域范围**: - 所有热点区域都必须位于图像范围内,即所有的`&lt;area&gt;`标签都应该位于`&lt;map&gt;`和`&lt;/map&gt;`标签之间。 3. **坐标与...

    HTML标签大全(包括标签内属性)

    - `&lt;IMG&gt;` 的属性,如 `ALIGN`, `WIDTH`, `HEIGHT`, `ALT`, `ISMAP`, `USEMAP`, `BORDER`, `HSpace`, `VSpace` 等用于控制图像的位置、尺寸、替换文本等。 - `&lt;MAP&gt;` 和 `&lt;AREA&gt;`:用于创建图像映射,点击图像的...

    html标签属性大全.pdf

    10. **图片**:`&lt;img&gt;`标签用于插入图像,`src`属性指定图像源,`border`设置边框宽度,`width`和`height`定义图像尺寸,`vspace`和`hspace`分别设置上下和左右的空白,`alt`提供替代文本(对于无法显示图像的情况)...

    HTML图片img标签_动力节点Java学院整理

    img标签的height和width属性允许我们定义图像的尺寸。虽然它们不是必须的,但指定这两个属性可以加快页面加载速度,并且有助于避免页面布局在加载图像时发生变化。align属性用于定义图像与其周围元素的对齐方式,如...

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

    Web-前端html+css从入门到精通 117. map标签与area标签.zip

    `&lt;map&gt;`标签有一个必需的`name`属性,这个属性值用于在`&lt;img&gt;`标签的`usemap`属性中引用,从而将图像与映射关联起来。例如: ```html &lt;img src="example.jpg" usemap="#imageMap" alt="Example Image"&gt; ,0,100,...

    用CSS中的map标签制作单图多区域点击的示例

     img标签中的usemap属性可引用的map标签中的id或name属性(取决于浏览器),所以我们应同时向map标签添加id和name属性。 示例 例如我们想在下面一张图实现九个热点区域,不切图,就使用map标签。 首先用 ps 得到几...

    HTML标签解释大全

    &lt;img src="image.jpg" usemap="#examplemap"&gt; ,0,82,126" href="http://www.example.com/"&gt; ``` ##### 标签:attribute - **说明**:虽然没有直接对应的 `&lt;attribute&gt;` 标签,但这里的“attribute”通常是指...

    html基础属性代码

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

    Html image 标签 配合 map使用

    在上面的代码中,`&lt;map&gt;`标签的`name`属性定义了映射的名称,与`&lt;img&gt;`标签的`usemap`属性值相对应(#前缀表示本地引用)。`&lt;area&gt;`标签有三个主要属性: 1. `shape`:定义区域的形状,可以是`rect`(矩形)、`...

    HTML标签对应英文全称及中文翻译

    `&lt;map&gt;`定义图像的可点击区域,`&lt;area&gt;`定义这些区域的具体链接,`usemap`属性将图像与映射关联,`coords`属性定义区域的坐标。 在编写HTML时,理解这些标签及其属性至关重要,它们共同构成了网页的基本结构,使得...

    HTML:div+css标签

    1. `&lt;img&gt;` 标签用于插入图像,`src` 属性定义图像源,`alt` 提供替代文本。 2. `border` 属性用于设置图像边框的宽度。 3. `width` 和 `height` 属性用于设定图像的尺寸。 4. `vspace` 和 `hspace` 属性设置图像...

    Struts2 常用标签

    以上介绍了Struts2中常用的图像标签以及图像按钮标签的相关属性。这些标签能够帮助开发者更加高效、便捷地开发Web应用界面。通过合理运用这些标签,可以显著提升Web应用的用户体验,并且让前端页面的开发变得更加...

    第六课 图像与音视频标签-011

    `&lt;img&gt;`标签的`usemap`属性引用了一个`&lt;map&gt;`元素的名称,`&lt;map&gt;`元素内包含若干个`&lt;area&gt;`元素,每个`&lt;area&gt;`定义了一个可点击的形状。例如,创建一个圆形区域,我们可以这样写: ```html &lt;img src="./img/xxkt....

    html图像地图map标签的使用

    在`&lt;img&gt;`标签中使用`usemap`属性来关联图像与对应的`&lt;map&gt;`标签。其值通常是一个以`#`开头的字符串,对应于`&lt;map&gt;`标签中的`name`或`id`属性值。例如: ```html &lt;img src="example.jpg" usemap="#exampleMap" /&gt; ...

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

    1. **src属性**:这是`&lt;img&gt;`标签中必不可少的一个属性,用于指定图像文件的URL。这个URL可以是相对路径,也可以是绝对路径。例如,在当前练习的文件列表中,"07_图片标签.html"可能包含了一个`&lt;img&gt;`标签,其`src`...

    HTML中的常用标签

    - `&lt;img src="图像文件名" usemap="#图的名称"&gt;` - `图的名称"&gt;` - `形状" coords="区域坐标列表" href="链接点的URL"&gt;` 以上便是从给定的文件信息中提取并整理出的HTML常用标签及知识点详解。希望这些内容能够...

    maphilight js热点图高亮

    PNG格式地图需要使用`&lt;img&gt;`标签,而SVG地图则使用`&lt;svg&gt;`标签。 ```html &lt;img src="demo_world.png" id="map" usemap="#mapdata" alt="世界地图"&gt; 区域1" title="区域1"&gt; &lt;!-- 其他区域 --&gt; ``` ### 4. 配置...

Global site tag (gtag.js) - Google Analytics