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
- 浏览 2141
- 评论(3)
- 论坛回复 / 浏览 (3 / 6054)
- 查看更多
相关推荐
`<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. 配置...