`
hudeyong926
  • 浏览: 2031692 次
  • 来自: 武汉
社区版块
存档分类
最新评论

404 img标签usemap,一个图片中添加多个链接

 
阅读更多

先看一下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就是链接距形左边距大图片最左边的距离,其他数字也一样

分享到:
评论

相关推荐

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

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

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

    - 对于`poly`,需要多个坐标对,每个坐标对表示多边形的一个顶点。 - **`href`**: 当用户点击该区域时将跳转的URL。 **示例代码**: ```html ,0,100,100" href="page1.html"&gt; ,150,50" href="page2.html"&gt; ,200,250...

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

    根据给定文件的信息,本文将围绕“如何使用HTML与jQuery为图片添加多个链接”的主题进行展开,详细解析如何实现图片上的不同区域指向不同的链接,并探讨其中涉及的关键技术点。 ### HTML 图片映射 (Image Map) ###...

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

    综上所述,这个项目涉及到JavaScript的DOM操作、事件处理、canvas绘图等多个技术点,通过这些技术,可以创建出具有交互性和视觉效果的图片热区功能。在实际开发中,还需考虑兼容性、用户体验等多方面因素,以实现更...

    vue实现在图片中画矩形框,并得到对角坐标,设置map中area的样式.zip

    在HTML中,我们使用`&lt;img&gt;`标签的`usemap`属性引用一个`&lt;map&gt;`元素,`&lt;map&gt;`元素定义了图像的热区。 - `&lt;area&gt;`标签用于定义图像热区的形状(如矩形`rect`),坐标,以及链接的目标URL。例如: ```html , y1, ...

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

    首先,`&lt;map&gt;`元素定义了一个图像映射,它不直接显示在页面上,但与`&lt;img&gt;`标签配合使用,为图像提供可交互的区域。例如: ```html &lt;img src="image.jpg" usemap="#myMap" alt="Image with clickable areas"&gt; &lt;!-...

    JS实现图片上的热点功能.rar

    `&lt;map&gt;`标签允许我们将一个图像划分为多个可点击的区域,每个区域可以通过`&lt;area&gt;`标签的`shape`、`coords`和`href`属性来设置形状、坐标和链接地址。例如: ```html &lt;img src="image.jpg" usemap="#imageMap"&gt; ,...

    html页面绘制热区工具

    2. **创建映射**:接着,定义一个`&lt;map&gt;`标签,其`name`或`id`属性应与`usemap`属性值相匹配。例如: ```html ``` 3. **添加热区**:在`&lt;map&gt;`标签内部,使用`&lt;area&gt;`标签定义热区。每个`&lt;area&gt;`标签可以设置...

    图片上设置热区,点击图片上的点,执行javascript方法

    `&lt;map&gt;` 标签定义一个图像映射,而 `&lt;area&gt;` 标签则定义了图像上的一个热区,包括形状(圆形、矩形或多边形)、坐标和关联的超链接或JavaScript函数。 ```html &lt;img src="image.jpg" usemap="#exampleMap"&gt; ,0...

    地图分区链接 示例源码

    在上面的例子中,`&lt;img&gt;`标签的`usemap`属性指向`&lt;map&gt;`的`name`,这样地图图像就能与映射关联起来。`&lt;area&gt;`标签定义了上海的形状和坐标,并链接到`shanghai.html`页面。 为了实现中国地图的分区链接,我们需要对...

    使用图片地图减少HTTP请求

    在这个例子中,`image.jpg`是一张包含多个小图像的大图,通过`&lt;map&gt;`和`&lt;area&gt;`元素,我们可以将不同区域链接到不同的页面。 使用图片地图的优点在于: 1. 减少HTTP请求:将多个小图合并为一张大图,减少了网络...

    Jquery实现html内的图片热区

    本篇文章将深入探讨如何使用jQuery来创建具有多种功能的图片热区,包括添加多个热区,拖动调整热区位置和大小,以及为每个热区添加链接。 首先,我们需要理解HTML中的`&lt;map&gt;`和`&lt;area&gt;`标签。`&lt;map&gt;`标签定义了一个...

    HTML5创建热点区域.pdf

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

    jQuery商品图片映射一比一对比代码.zip

    在这个名为"jQuery商品图片映射一比一对比代码.zip"的压缩包中,我们发现了一个实用的jQuery应用实例,它主要涉及到商品图片的映射功能,允许用户通过点击图片上的特定区域跳转到对应的详细信息页面,实现了用户友好...

    jquery开发的地图热点特效-map标签

    其中,`usemap`属性的值(`#mapName`)与`&lt;map&gt;`的`name`属性匹配,`area`标签则定义了图像中的可点击区域。 2. **`&lt;area&gt;`标签** `area`标签用于定义`&lt;map&gt;`内的可点击区域。它有以下几个关键属性: - `shape`...

    CSS自定义图片热区示例

    在网页设计中,图片热区(Image Map)是一种常见的交互元素,它允许用户与图片的特定区域进行交互,比如点击跳转到不同的链接或者执行其他操作。本示例主要探讨如何使用CSS来自定义图片热区,使得这些交互区域不仅...

    较全的html标签

    - **描述**: 将图像划分成多个区域,每个区域可指向不同的链接。 - **示例**: - 图像定义: `&lt;img src="map.jpg" usemap="#mapName"&gt;` - 地图定义: `&lt;map name="mapName"&gt;` - 区域定义: `坐标列表" href="URL"&gt;`...

    HTML:div+css标签

    6. `usemap` 和 `&lt;map&gt;` 结合`&lt;area&gt;` 标签创建影像地图,允许图像中的不同区域链接到不同的URL。 这些基本的HTML标签和属性是构建网页内容和样式的基础,熟练掌握它们能帮助开发者更好地创建和控制网页的视觉效果...

    IMG中UserMap的使用示例

    首先,我们需要定义一个`&lt;map&gt;`标签,它有一个`name`属性,这个属性值将与`&lt;img&gt;`标签中的`usemap`属性引用的名称相匹配。下面是一个基本的例子: ```html ,100,200,200" href="test1.html"&gt; ,100,300,200" href...

Global site tag (gtag.js) - Google Analytics