怎么在一个图片中做多个链接呢?
热点链接可以帮你解决。这种效果的实质是把一幅图片划分为不同的热点区域,再让不同的区域进行超链接。要完成地图区域超链接要用到三种标签:<img><map><area>。
<img src="图形文件名" usemap="#图的名称">
<map name="图的名称">
<area shape=形状 coords=区域座标列表 href="URL资源地址">
<!--可根据需要定义多少个热点区域-->
<area shape=形状 coords=区域座标列表 href="URL资源地址">
</map>
【1】shape -- 定义热点形状
shape=rect: 矩形
shape=circle:圆形
shape=poly: 多边形
【2】coords -- 定义区域点的坐标
a.矩形:必须使用四个数字,前两个数字为左上角座标,后两个数字为右下角座标
例:<area shape=rect coords=100,50,200,75 href="URL">
b.圆形:必须使用三个数字,前两个数字为圆心的座标,最后一个数字为半径长度
例:<area shape=circle coords=85,155,30 href="URL">
c.任意图形(多边形):将图形之每一转折点座标依序填入
例:<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">
demo :
<img src="../menu.gif" width="204" height="510" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="12,37,181,88" href="http://www.qq.com" onFocus="this.blur()"/>
<area shape="rect" coords="12,97,182,143" href="http://www.yahoo.com" />
<area shape="rect" coords="18,155,179,200" href="http://www.sina.com" />
<area shape="rect" coords="18,211,182,260" href="http://www.baidu.com" />
<!--<area shape="rect" coords="12,444,182,490" href="sm-textfile.html" target="pcs"/> -->
<!-- onFocus="this.blur()" 去掉虚线框 -->
</map>
分享到:
相关推荐
"map-highlight"和"map-area"这两个标签暗示了我们将讨论的是地图组件中的特定功能,即地图区域的着色和高亮显示。 首先,我们需要理解`map-area`的概念。在HTML中,`<map>`元素与`<area>`元素结合使用,可以创建...
-- 配对的area标签将在这里定义 --> </map> ``` `usemap`属性的值是一个井号(#)后面跟着`<map>`元素的`name`属性,这将两者关联起来。 接下来,我们使用`<area>`标签定义图像上的热点区域。`<area>`标签具有多个...
- 创建一个`<img>`标签,并定义一个`<map>`元素,其中包含多个`<area>`标签,每个`<area>`表示图像的一个区域。 - 使用jQuery选择器选中图片,然后调用`imageMapster()`方法初始化插件。 3. **配置选项** - `...
`<map>`标签用于定义一个客户端图像映射,该映射由多个`<area>`标签组成,每个`<area>`标签定义了图像上的一个可点击区域。通常情况下,`<map>`标签会配合`<img>`标签一起使用,其中`<img>`标签的`usemap`属性值应与...
本教程聚焦于HTML中的`map`标签和`area`标签,这两个标签是创建图像映射的重要工具,使得图像也能具有交互性,用户可以通过点击图像的不同区域跳转到不同的链接或者执行特定的JavaScript功能。 `<map>`标签是用来...
HTML的`<map>`和`<area>`标签在所有主流浏览器中都有很好的支持,包括Chrome、Firefox、Safari、Edge和Internet Explorer。 6. **最佳实践** - 为`<area>`标签提供有意义的`alt`属性,有助于无障碍访问。 - 使用...
注意,虽然`<map>`和`<area>`标签在HTML4和HTML5中都有支持,但在HTML5中,`<map>`标签已被推荐用于语义化更好的`<figure>`和`<figcaption>`元素结合使用。例如: ```html 交互式图像"> 这是一个交互式图像 ...
本篇文章将深入探讨如何利用jQuery和HTML的`<map>`与`<area>`标签来创建这种效果。 1. **HTML的`<map>`标签** `map`标签在HTML中用于定义一个图像映射,即关联一个图像与一系列的可点击区域。这个标签不包含任何...
在Vue项目中实现图片上画矩形框并获取对角坐标以及设置`<map>`中的`<area>`样式,涉及到的技术主要包括JavaScript、HTML5的绘图API以及图像热区技术。接下来,我们将深入探讨这些知识点。 1. **JavaScript绘图API**...
`<area>`标签是`<map>`标签的重要组成部分,用于定义图像映射中的热点区域。主要属性包括: - **shape**:定义热点区域的形状,可以是`circle`、`rectangle`、`polygon`。 - **coords**:根据所选的形状,定义热点...
Image Maps 是 HTML 中一种特殊的技术,允许我们将一个图像的不同部分定义为可点击的区域,通常通过 `<map>` 和 `<area>` 标签实现。Mapster 提供了一套丰富的功能,使开发者能够创建吸引人的、交互式的图像地图,...
在HTML中,热区通常通过`<map>`和`<area>`标签来实现。`<map>`标签定义了一个图像映射,即关联一个图像和一组定义的热区。`<area>`标签则用于定义热区的具体形状、坐标和行为。以下是创建热区的基本步骤: 1. **...
在HTML中,`<map>`元素用来定义图像映射,而`<area>`元素则用于定义映射的各个区域。以下是`<map>`和`<area>`元素的基本结构: ```html <img src="image.jpg" usemap="#mapname" alt="description"> <map name="map...
- 为了兼容性,`<map>` 和 `<area>` 标签应遵循HTML5标准,确保在各种浏览器中都能正确显示。 总结来说,HTML `<area>` 标签是构建图像映射的关键,它通过`shape` 和 `coords` 属性定义不同形状的可点击区域,并...
mapAreahtml 的area只能在固定尺寸的html上使用,通过这段js就可以实现自动适配了#使用方法在map标签下面的area标签需要添加class="MXC_hotPhotoItem"默认所有的坐标是基于750宽度的图片进行定位如果图片大小非标准...
首先,我们要了解HTML `<map>` 和 `<area>` 标签的作用。`<map>` 标签用于定义一个图像映射,即一个与图像相关的坐标区域集合,而`<area>` 标签则用于定义图像映射中的每个可点击区域。通过这些元素,我们可以将图片...
在这个"js抠图+area标签显示"的主题中,我们将探讨如何利用JavaScript进行图像抠图操作,并结合HTML的`<area>`标签来实现图像热点区域的显示。 首先,"抠图"在技术上通常指的是从背景中提取出特定的对象或元素,这...
这种技术通常用于创建...总的来说,通过HTML的`<map>`和`<area>`标签以及JavaScript,我们可以创建出具有交互性和视觉反馈的图像热区。这在网页设计中,尤其是在需要突出展示图片某些部分或提供交互式体验时非常有用。
- 所有热点区域都必须位于图像范围内,即所有的`<area>`标签都应该位于`<map>`和`</map>`标签之间。 3. **坐标与形状的一致性**: - 在设置`coords`属性时,确保其格式与`shape`属性所定义的形状相匹配。例如,不能...
HTML的`<map>`标签用于定义图像映射,而`<area>`标签则用于定义图像上的特定区域。例如: ```html <img src="map.png" usemap="#map" alt="地图"> <map name="map"> <area shape="rect" coords="0,0,100,100" href...