`

img及maps标签组合使用,实现一张图片对应N个链接地址

    博客分类:
  • HTML
阅读更多

怎么在一个图片中做多个链接呢?

热点链接可以帮你解决。这种效果的实质是把一幅图片划分为不同的热点区域,再让不同的区域进行超链接。要完成地图区域超链接要用到三种标签:<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-master_yolov3_删除xml与图片不对应的单个”表明这是一个关于使用labelImg进行Yolov3训练数据集整理的项目。在训练深度学习模型,尤其是目标检测模型如Yolov3时,我们需要大量的带有精确边界框...

    Java抓取网页图片链接地址

    ### Java抓取网页图片链接地址 #### 知识点概览 本文将详细介绍如何使用Java编程语言抓取网页上的图片链接。此技术广泛应用于网络爬虫、数据分析等领域,能够帮助开发者快速获取所需的图像资源。 #### 技术背景与...

    正则获取html中的 <img src = 图片地址

    &lt;img src="图片地址" alt="图片描述" /&gt; ``` 其中,`src`属性指定图片的URL,`alt`属性提供图片的替代文本。 正则表达式是一种模式匹配的语言,可以用来搜索、替换或者分割字符串。要提取`&lt;img&gt;`标签的`src`属性,...

    labelImg打好标签的车牌数据

    这个"labelImg打好标签的车牌数据"是一个典型的实例,它展示了如何利用数据来训练模型进行车牌定位。在这个项目中,用户亲自拍摄了自然场景下的车牌图像,并且使用了一个名为labelImg的工具为这些车牌图像进行了精确...

    相对路径和img标签demo

    3. **父目录路径**:如果图像在上一级目录,我们可以使用"..\"来返回上一级,如`&lt;img src="../image.jpg" alt="示例图片"&gt;`。连续的"..\"可以回到更远的父目录。 接下来,我们讨论**img标签**。在HTML中,`&lt;img&gt;`...

    Img2Lcd 图片取模工具

    《Img2Lcd图片取模工具详解》 在IT领域,图像处理是不可或缺的一部分,尤其在嵌入式系统和微控制器应用中。Img2Lcd工具便是为了解决这一问题而设计的,它是一个专门用于将图片转换为适合低分辨率LCD显示屏的二进制...

    html标签例如img,div,span等基本标签的使用

    例如,我们可以使用 img 标签插入图像,用 div 标签分组元素,用 span 标签高亮文本。 例如: ```html &lt;img src="image.jpg" alt="这是一个图片"&gt; 这是高亮文本 ``` 五、HTML5 的发展 HTML5 是 HTML 的最新...

    Qt中通过控件在Label标签中显示一张静态图片

    `QLabel`控件是Qt提供的一种用于展示文本、图标或者简单图形的工具,它可以被用来显示一张静态图片。下面我们将深入探讨如何在`QLabel`标签中加载并显示图片。 首先,我们需要了解`QLabel`的基本用法。`QLabel`是`...

    js base46转码、保存图片到本地、img显示本地图片.zip

    例如,如果你有一个图片文件的Blob对象,你可以先将其转换为Base64字符串,以便在`&lt;img&gt;`标签的`src`属性中使用: ```javascript let blob = ... // 图片的Blob对象 let reader = new FileReader(); reader....

    HTML 图片不存在则显示一个默认图片

    为了解决这个问题,开发者通常会使用一种技巧,即当指定的图片不存在时,显示一个默认的占位图片。这个技术可以通过HTML的`&lt;img&gt;`标签和`onerror`事件属性来实现。 首先,我们来看`&lt;img&gt;`标签的基本结构: ```html...

    html列表标签

    图像标签是通过img标签实现的,src属性指定图片的地址,height和width属性指定图片的高度和宽度,border属性指定图片的边框宽度,alt属性指定图片的替代文本。 表格标签 表格标签是通过table标签实现的,border...

    图片旋转加链接

    在网页设计中,图片的展示方式多样,其中一种常见的需求是实现图片的旋转以及附加链接。这个"图片旋转加链接"的主题,主要涉及到HTML、CSS和JavaScript等前端技术的应用,尤其是CSS3的新特性。下面我们将深入探讨...

    获取文章内容中的图片标签及其src实现

    通常,这样的示例文件会包含一个HTML结构,其中有一些`&lt;img&gt;`标签,然后是对应的JavaScript代码来获取这些图片的`src`属性。 总结来说,通过JavaScript获取HTML中的图片标签及其`src`属性,涉及的主要知识点有:DOM...

    Img2Blobjs是一款可以为图片添加自定义水印的jquery插件

    这个过程会返回一个新的Blob对象,你可以将其设置为`&lt;img&gt;`标签的`src`属性,或者通过`URL.createObjectURL()`方法创建一个临时URL用于显示水印图片。 4. **动态水印**:如果需要在用户上传图片后立即添加水印,...

    labelImg使用教程-标注工具labelimg图片目标检测标签-深度学习.pdf

    【labelImg使用教程】\n\nlabelImg是一款广泛应用于深度学习目标检测领域的图像标注工具,它的主要功能是帮助用户在图像上标记出目标物体的边界框,并以PASCAL VOC或YOLO格式保存标注信息。本教程将详细介绍labelImg...

    ofd2img.zip

    ofd2img.zip工具包的核心功能是将OFD文件拆解为一系列的图片,每个页面对应一张图片。这个过程涉及到的主要技术包括OFD文件解析、图像渲染和保存。OFD文件解析需要解析XML结构,提取出各个元素的信息;图像渲染则是...

    图片加超级链接的使用

    要使图片具有超级链接功能,只需将`&lt;a&gt;`标签包裹在`&lt;img&gt;`标签周围。例如: ```html 目标URL"&gt; &lt;img src="图片URL" alt="图片描述"&gt; ``` 这里,`&lt;img&gt;`标签用于指定图片的来源和替代文本,而`&lt;a&gt;`标签提供了...

    用正则表达式替换图片地址img标签

    例如,假设我们要将所有图片地址替换为一个新的URL: ```javascript let newSrc = 'https://example.com/new-image.png'; content.replace(/&lt;img [^&gt;]*src=['"]([^'"]+)[^&gt;]*&gt;/gi, function (match, capture) { ...

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

    在Vue项目中实现图片上画矩形框并获取对角坐标以及设置`&lt;map&gt;`中的`&lt;area&gt;`样式,涉及到的技术主要包括...通过这些技术,可以为用户提供一个交互式的图片标注工具,同时生成对应的图像热区以实现特定的交互效果。

    页面实现多个图片轮播功能demo

    本项目“页面实现多个图片轮播功能demo”旨在教你如何使用原生JavaScript来实现这一功能,同时通过调用同一函数实现代码复用,避免冗余。 一、图片轮播基本原理 图片轮播的核心原理是改变图片的显示状态,通常通过...

Global site tag (gtag.js) - Google Analytics