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"。
分享到：
- 2009-06-23 09:14
- 浏览 2163
- 评论(3)
- 论坛回复 / 浏览 (3 / 6056)
- 查看更多
相关推荐
`<map>`标签定义了一个图像映射，它不包含任何实际的内容，而是通过`name`属性定义了一个唯一的名字，这个名字与`<img>`标签的`usemap`属性相对应。例如，`<map name="imageMap">`。 然后，`<area>`标签是真正的...
- 确保`<img>`标签中的`usemap`属性与`<map>`标签中的`name`属性保持一致。 2. **热点区域范围**: - 所有热点区域都必须位于图像范围内，即所有的`<area>`标签都应该位于`<map>`和`</map>`标签之间。 3. **坐标与...
- `<IMG>` 的属性，如 `ALIGN`, `WIDTH`, `HEIGHT`, `ALT`, `ISMAP`, `USEMAP`, `BORDER`, `HSpace`, `VSpace` 等用于控制图像的位置、尺寸、替换文本等。 - `<MAP>` 和 `<AREA>`：用于创建图像映射，点击图像的...
10. **图片**：`<img>`标签用于插入图像，`src`属性指定图像源，`border`设置边框宽度，`width`和`height`定义图像尺寸，`vspace`和`hspace`分别设置上下和左右的空白，`alt`提供替代文本（对于无法显示图像的情况）...
img标签的height和width属性允许我们定义图像的尺寸。虽然它们不是必须的，但指定这两个属性可以加快页面加载速度，并且有助于避免页面布局在加载图像时发生变化。align属性用于定义图像与其周围元素的对齐方式，如...
通常情况下，`<map>`标签会配合`<img>`标签一起使用，其中`<img>`标签的`usemap`属性值应与`<map>`标签的`name`或`id`属性值相匹配。 ##### 2.2 标签结构 `<map>`标签的基本结构如下： ```html <img src="image....
`<map>`标签有一个必需的`name`属性，这个属性值用于在`<img>`标签的`usemap`属性中引用，从而将图像与映射关联起来。例如： ```html <img src="example.jpg" usemap="#imageMap" alt="Example Image"> ,0,100,...
img标签中的usemap属性可引用的map标签中的id或name属性（取决于浏览器），所以我们应同时向map标签添加id和name属性。 示例 例如我们想在下面一张图实现九个热点区域，不切图，就使用map标签。 首先用 ps 得到几...
<img src="image.jpg" usemap="#examplemap"> ,0,82,126" href="http://www.example.com/"> ``` ##### 标签：attribute - **说明**：虽然没有直接对应的 `<attribute>` 标签，但这里的“attribute”通常是指...
`<img>`标签加载图像，`src`, `width`, `height`, `alt`, `title`, `dynsrc`和`usemap`属性分别定义图像源、尺寸、提示文本、动态源和映射。 12. **多媒体播放**：`<embed>`标签用于插入媒体文件，如音频或视频，`...
在上面的代码中，`<map>`标签的`name`属性定义了映射的名称，与`<img>`标签的`usemap`属性值相对应（#前缀表示本地引用）。`<area>`标签有三个主要属性： 1. `shape`：定义区域的形状，可以是`rect`（矩形）、`...
`<map>`定义图像的可点击区域，`<area>`定义这些区域的具体链接，`usemap`属性将图像与映射关联，`coords`属性定义区域的坐标。 在编写HTML时，理解这些标签及其属性至关重要，它们共同构成了网页的基本结构，使得...
1. `<img>` 标签用于插入图像，`src` 属性定义图像源，`alt` 提供替代文本。 2. `border` 属性用于设置图像边框的宽度。 3. `width` 和 `height` 属性用于设定图像的尺寸。 4. `vspace` 和 `hspace` 属性设置图像...
以上介绍了Struts2中常用的图像标签以及图像按钮标签的相关属性。这些标签能够帮助开发者更加高效、便捷地开发Web应用界面。通过合理运用这些标签，可以显著提升Web应用的用户体验，并且让前端页面的开发变得更加...
`<img>`标签的`usemap`属性引用了一个`<map>`元素的名称，`<map>`元素内包含若干个`<area>`元素，每个`<area>`定义了一个可点击的形状。例如，创建一个圆形区域，我们可以这样写： ```html <img src="./img/xxkt....
在`<img>`标签中使用`usemap`属性来关联图像与对应的`<map>`标签。其值通常是一个以`#`开头的字符串，对应于`<map>`标签中的`name`或`id`属性值。例如： ```html <img src="example.jpg" usemap="#exampleMap" /> ...
1. **src属性**：这是`<img>`标签中必不可少的一个属性，用于指定图像文件的URL。这个URL可以是相对路径，也可以是绝对路径。例如，在当前练习的文件列表中，"07_图片标签.html"可能包含了一个`<img>`标签，其`src`...
- `<img src="图像文件名" usemap="#图的名称">` - `图的名称">` - `形状" coords="区域坐标列表" href="链接点的URL">` 以上便是从给定的文件信息中提取并整理出的HTML常用标签及知识点详解。希望这些内容能够...
PNG格式地图需要使用`<img>`标签，而SVG地图则使用`<svg>`标签。 ```html <img src="demo_world.png" id="map" usemap="#mapdata" alt="世界地图"> 区域1" title="区域1"> <!-- 其他区域 --> ``` ### 4. 配置...