怎么在一个图片中做多个链接呢?
热点链接可以帮你解决。这种效果的实质是把一幅图片划分为不同的热点区域,再让不同的区域进行超链接。要完成地图区域超链接要用到三种标签:<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>
分享到:
相关推荐
标题中的“labelImg-master_yolov3_删除xml与图片不对应的单个”表明这是一个关于使用labelImg进行Yolov3训练数据集整理的项目。在训练深度学习模型,尤其是目标检测模型如Yolov3时,我们需要大量的带有精确边界框...
### Java抓取网页图片链接地址 #### 知识点概览 本文将详细介绍如何使用Java编程语言抓取网页上的图片链接。此技术广泛应用于网络爬虫、数据分析等领域,能够帮助开发者快速获取所需的图像资源。 #### 技术背景与...
<img src="图片地址" alt="图片描述" /> ``` 其中,`src`属性指定图片的URL,`alt`属性提供图片的替代文本。 正则表达式是一种模式匹配的语言,可以用来搜索、替换或者分割字符串。要提取`<img>`标签的`src`属性,...
这个"labelImg打好标签的车牌数据"是一个典型的实例,它展示了如何利用数据来训练模型进行车牌定位。在这个项目中,用户亲自拍摄了自然场景下的车牌图像,并且使用了一个名为labelImg的工具为这些车牌图像进行了精确...
3. **父目录路径**:如果图像在上一级目录,我们可以使用"..\"来返回上一级,如`<img src="../image.jpg" alt="示例图片">`。连续的"..\"可以回到更远的父目录。 接下来,我们讨论**img标签**。在HTML中,`<img>`...
《Img2Lcd图片取模工具详解》 在IT领域,图像处理是不可或缺的一部分,尤其在嵌入式系统和微控制器应用中。Img2Lcd工具便是为了解决这一问题而设计的,它是一个专门用于将图片转换为适合低分辨率LCD显示屏的二进制...
例如,我们可以使用 img 标签插入图像,用 div 标签分组元素,用 span 标签高亮文本。 例如: ```html <img src="image.jpg" alt="这是一个图片"> 这是高亮文本 ``` 五、HTML5 的发展 HTML5 是 HTML 的最新...
`QLabel`控件是Qt提供的一种用于展示文本、图标或者简单图形的工具,它可以被用来显示一张静态图片。下面我们将深入探讨如何在`QLabel`标签中加载并显示图片。 首先,我们需要了解`QLabel`的基本用法。`QLabel`是`...
例如,如果你有一个图片文件的Blob对象,你可以先将其转换为Base64字符串,以便在`<img>`标签的`src`属性中使用: ```javascript let blob = ... // 图片的Blob对象 let reader = new FileReader(); reader....
为了解决这个问题,开发者通常会使用一种技巧,即当指定的图片不存在时,显示一个默认的占位图片。这个技术可以通过HTML的`<img>`标签和`onerror`事件属性来实现。 首先,我们来看`<img>`标签的基本结构: ```html...
图像标签是通过img标签实现的,src属性指定图片的地址,height和width属性指定图片的高度和宽度,border属性指定图片的边框宽度,alt属性指定图片的替代文本。 表格标签 表格标签是通过table标签实现的,border...
在网页设计中,图片的展示方式多样,其中一种常见的需求是实现图片的旋转以及附加链接。这个"图片旋转加链接"的主题,主要涉及到HTML、CSS和JavaScript等前端技术的应用,尤其是CSS3的新特性。下面我们将深入探讨...
通常,这样的示例文件会包含一个HTML结构,其中有一些`<img>`标签,然后是对应的JavaScript代码来获取这些图片的`src`属性。 总结来说,通过JavaScript获取HTML中的图片标签及其`src`属性,涉及的主要知识点有:DOM...
这个过程会返回一个新的Blob对象,你可以将其设置为`<img>`标签的`src`属性,或者通过`URL.createObjectURL()`方法创建一个临时URL用于显示水印图片。 4. **动态水印**:如果需要在用户上传图片后立即添加水印,...
【labelImg使用教程】\n\nlabelImg是一款广泛应用于深度学习目标检测领域的图像标注工具,它的主要功能是帮助用户在图像上标记出目标物体的边界框,并以PASCAL VOC或YOLO格式保存标注信息。本教程将详细介绍labelImg...
ofd2img.zip工具包的核心功能是将OFD文件拆解为一系列的图片,每个页面对应一张图片。这个过程涉及到的主要技术包括OFD文件解析、图像渲染和保存。OFD文件解析需要解析XML结构,提取出各个元素的信息;图像渲染则是...
要使图片具有超级链接功能,只需将`<a>`标签包裹在`<img>`标签周围。例如: ```html 目标URL"> <img src="图片URL" alt="图片描述"> ``` 这里,`<img>`标签用于指定图片的来源和替代文本,而`<a>`标签提供了...
例如,假设我们要将所有图片地址替换为一个新的URL: ```javascript let newSrc = 'https://example.com/new-image.png'; content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) { ...
在Vue项目中实现图片上画矩形框并获取对角坐标以及设置`<map>`中的`<area>`样式,涉及到的技术主要包括...通过这些技术,可以为用户提供一个交互式的图片标注工具,同时生成对应的图像热区以实现特定的交互效果。
本项目“页面实现多个图片轮播功能demo”旨在教你如何使用原生JavaScript来实现这一功能,同时通过调用同一函数实现代码复用,避免冗余。 一、图片轮播基本原理 图片轮播的核心原理是改变图片的显示状态,通常通过...