先看一下404页面,http://blog.51yip.com/404.html 这里面主要就是一个404图片,代码如下
<div style="margin: 10px; text-align: center;"> <img src="test404_files/06.png" usemap="#Map" alt="HTTP 404,file not found" border="0" height="422" width="450"> <map name="Map" id="Map"> <area shape="rect" coords="64,340,123,365" href="javascript:history.back();"> <area shape="rect" coords="164,340,205,365" href="http://blog.51yip.com"> </map> </div>
解释:
usemap="#Map"调用一个name='Map'的标签
<map name="Map" id="Map"> html标签
一个<area>对应图片中的一块
shape="rect" 链接的形状,rect是rectangle(距形)英文单词的缩写
coords="64,340,123,365"距形链接坐标,这里的coords是coordinates(坐标)英文单词的缩写。
64,340,123,365这四个数字分别是链接距形相对于图片的左边,上边,右边,下边的位置。
64就是链接距形左边距大图片最左边的距离,其他数字也一样
相关推荐
`<map>`标签定义了一个图像映射,它不包含任何实际的内容,而是通过`name`属性定义了一个唯一的名字,这个名字与`<img>`标签的`usemap`属性相对应。例如,`<map name="imageMap">`。 然后,`<area>`标签是真正的...
- 对于`poly`,需要多个坐标对,每个坐标对表示多边形的一个顶点。 - **`href`**: 当用户点击该区域时将跳转的URL。 **示例代码**: ```html ,0,100,100" href="page1.html"> ,150,50" href="page2.html"> ,200,250...
根据给定文件的信息,本文将围绕“如何使用HTML与jQuery为图片添加多个链接”的主题进行展开,详细解析如何实现图片上的不同区域指向不同的链接,并探讨其中涉及的关键技术点。 ### HTML 图片映射 (Image Map) ###...
综上所述,这个项目涉及到JavaScript的DOM操作、事件处理、canvas绘图等多个技术点,通过这些技术,可以创建出具有交互性和视觉效果的图片热区功能。在实际开发中,还需考虑兼容性、用户体验等多方面因素,以实现更...
在HTML中,我们使用`<img>`标签的`usemap`属性引用一个`<map>`元素,`<map>`元素定义了图像的热区。 - `<area>`标签用于定义图像热区的形状(如矩形`rect`),坐标,以及链接的目标URL。例如: ```html , y1, ...
首先,`<map>`元素定义了一个图像映射,它不直接显示在页面上,但与`<img>`标签配合使用,为图像提供可交互的区域。例如: ```html <img src="image.jpg" usemap="#myMap" alt="Image with clickable areas"> <!-...
`<map>` 标签定义一个图像映射,而 `<area>` 标签则定义了图像上的一个热区,包括形状(圆形、矩形或多边形)、坐标和关联的超链接或JavaScript函数。 ```html <img src="image.jpg" usemap="#exampleMap"> ,0...
`<map>`标签允许我们将一个图像划分为多个可点击的区域,每个区域可以通过`<area>`标签的`shape`、`coords`和`href`属性来设置形状、坐标和链接地址。例如: ```html <img src="image.jpg" usemap="#imageMap"> ,...
2. **创建映射**:接着,定义一个`<map>`标签,其`name`或`id`属性应与`usemap`属性值相匹配。例如: ```html ``` 3. **添加热区**:在`<map>`标签内部,使用`<area>`标签定义热区。每个`<area>`标签可以设置...
在上面的例子中,`<img>`标签的`usemap`属性指向`<map>`的`name`,这样地图图像就能与映射关联起来。`<area>`标签定义了上海的形状和坐标,并链接到`shanghai.html`页面。 为了实现中国地图的分区链接,我们需要对...
在这个例子中,`image.jpg`是一张包含多个小图像的大图,通过`<map>`和`<area>`元素,我们可以将不同区域链接到不同的页面。 使用图片地图的优点在于: 1. 减少HTTP请求:将多个小图合并为一张大图,减少了网络...
本篇文章将深入探讨如何使用jQuery来创建具有多种功能的图片热区,包括添加多个热区,拖动调整热区位置和大小,以及为每个热区添加链接。 首先,我们需要理解HTML中的`<map>`和`<area>`标签。`<map>`标签定义了一个...
使用 `<img>` 标签,添加 `src` 属性指定图片路径,并使用 `usemap` 属性定义关联的热点地图。`usemap` 的值应该以 `#` 开头,后跟热点地图的名称,例如 `#pic`。 ```html <img src="图片地址" usemap="#pic"> ``` ...
在这个名为"jQuery商品图片映射一比一对比代码.zip"的压缩包中,我们发现了一个实用的jQuery应用实例,它主要涉及到商品图片的映射功能,允许用户通过点击图片上的特定区域跳转到对应的详细信息页面,实现了用户友好...
其中,`usemap`属性的值(`#mapName`)与`<map>`的`name`属性匹配,`area`标签则定义了图像中的可点击区域。 2. **`<area>`标签** `area`标签用于定义`<map>`内的可点击区域。它有以下几个关键属性: - `shape`...
在网页设计中,图片热区(Image Map)是一种常见的交互元素,它允许用户与图片的特定区域进行交互,比如点击跳转到不同的链接或者执行其他操作。本示例主要探讨如何使用CSS来自定义图片热区,使得这些交互区域不仅...
- **描述**: 将图像划分成多个区域,每个区域可指向不同的链接。 - **示例**: - 图像定义: `<img src="map.jpg" usemap="#mapName">` - 地图定义: `<map name="mapName">` - 区域定义: `坐标列表" href="URL">`...
6. `usemap` 和 `<map>` 结合`<area>` 标签创建影像地图,允许图像中的不同区域链接到不同的URL。 这些基本的HTML标签和属性是构建网页内容和样式的基础,熟练掌握它们能帮助开发者更好地创建和控制网页的视觉效果...
首先,我们需要定义一个`<map>`标签,它有一个`name`属性,这个属性值将与`<img>`标签中的`usemap`属性引用的名称相匹配。下面是一个基本的例子: ```html ,100,200,200" href="test1.html"> ,100,300,200" href...