原文地址：https://www.cnblogs.com/jf-67/p/8135004.html

所谓图片热点链接就是为图片指定一个或多个区域以实现点击跳转到指定的页面。简单来说就是点击某一区域就能跳转到相应的页面，而无需点击整个图片才能跳转。

　　说到图片热点链接，我首先想到了map + area，当然了，可能还有其他方法也能实现。

　　以前只是知道有这个功能，但是具体如何实现却没有去真正的了解。由于工作需要，今天稍微了解了下，发现这个功能其实蛮实用的，尤其是在网页banner广告位中想实现点击指定区域或链接以实现跳转是非常有用的。

　　首先说下map，map的作用是定义一个图像映射。所谓图像映射，是指带有可点击区域的一幅图像。

　　然而光有map是不够的，还需要配合area标签来使用，area元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域，也就是指定的点击区域。

　　说了这么多，还是直接上代码吧：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

    .box{

      width:1024px;

      margin:10px auto;

    }

    img{

      width:1024px;

      height:200px;

    }

    #mapArea{

      outline:none;

    }

  </style>

</head>

<body>

  <div class="box">

    <img src="adver_xmb.png" alt="" usemap="#planetmap">

    <map name="planetmap" id="planetmap">

      <area shape="rect" coords="248,45,403,65" href ="http://xmeibao.com" target ="_blank" alt="Venus" id="mapArea" />

    </map>

  </div>

</body>

</html>

实现效果如下：

　　　　

　　　　点击图中的链接实现跳转链接对应的网站，由于热点链接点击过后默认会有一个边框，这里我们可以给area元素设置样式：outline:none即可实现点击后无边框

　　

　　ps:<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。shape属性规定了点击区域的形状。而coords 属性则规定区域的 x 和 y 坐标。这两个属性结合起来使用，来规定点击区域的尺寸、形状和位置。

　　shape可取值：circle(圆形)、polygon(多边形)、rect(矩形)

　　shape取值rect，则coords对应的值为x1,y1,x2,y2。第一个坐标表示矩形左上角的坐标，第二个坐标表示矩形右下角的坐标。

　　shape取值circle，则coords对应的值为x,y,r。其中x，y表示圆心的坐标，r则是圆的半径。

　　至于多边形我没使用过，多边形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."

　　每一对 "x,y" 坐标都定义了多边形的一个顶点（"0,0" 是图像左上角的坐标）。定义三角形至少需要三组坐标；高纬多边形则需要更多数量的顶点。多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。（由于多边形没使用过，此处引用的w3school）

[转]如何为图片添加热点链接？（map + area）的更多相关文章

  1. 如何为图片添加热点链接？（map + area）

    所谓图片热点链接就是为图片指定一个或多个区域以实现点击跳转到指定的页面.简单来说就是点击某一区域就能跳转到相应的页面,而无需点击整个图片才能跳转. 说到图片热点链接,我首先想到了map + area, ...

  2. 图片添加热点MAP之后连接无效的解决方法

    好些接触网店的同事都会遇到这个问题:就是明明给图片添加了热点超链接,但是点击图片就是没反应. 其实这个问题就是热点冲突,也就是说这个页面中至少有2个名称相同的热点导致热点冲突无法正确加载. 谷歌浏览器 ...

  3. 使用DW工具给图片添加热点MAP

    一.准备一张图片.     准备一张需要给不同区域添加不同热点的图片. 二.插入图片: 打开Dreamweaver,新建一个网页,将图片插入到页面中. 三.找到地图工具: 单击鼠标左键点击图片,这时候 ...

  4. html中给图片添加热点

    <img src="images/index/top1.jpg" width="248" height="512" usemap=&q ...

  5. css图片热点链接的设置

    一.热点的原理 图片通过usemap="#Map"属性将名称为"Map"的热点区域及连接映射到图片上. 一般来说,图片的usermap属性对应的是map热点的n ...

  6. 使用Dreamweaver在一张图片上添加多个热点链接

    所有代码: <html> <head> <meta charset="utf-8"> <title>无标题文档</title& ...

  7. HTML图片热区map area的用法

    <area>标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面.其基本语法结构如下: < ...

  8. 【博客美化】05.添加GitHub链接

    博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加Git ...

  9. 13、在 uwp应用中，给图片添加高斯模糊滤镜效果（一）

    如果在应用中,如果想要给app 添加模糊滤镜,可能第一想到的是第三方类库,比如 Win2d.lumia Imaging SDK .WriteableBitmapEx,不可否认,这些类库功能强大,效果也 ...

随机推荐

  1. Go：如何组织代码

    备注 此文主要是对官方教程的学习总结,官方教程:http://golang.org/doc/code.html. 工作空间(Workspaces) Go代码必须保持在一个workspace,works ...

  2. jquery省市选择案例

    1.代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  3. ICLR 2014 International Conference on Learning Representations深度学习论文papers

    ICLR 2014 International Conference on Learning Representations Apr 14 - 16, 2014, Banff, Canada Work ...

  4. iOS开源项目：AudioPlayer

    AudioPlayer是一个基于AVAudioStreamer的在线音乐播放软件. https://github.com/marshluca/AudioPlayer 首先将歌曲信息存储在NSArray ...

  5. C#对.zip 存档读取和写入【转】

    Framework4.5支持 引用: System.IO.Compression.dll,System.IO.Compression.FileSystem.dll 提取压缩文件 ZipFile.Ext ...

  6. 如何查看ESXi的网卡的MAC地址?

    直接上图 图一, 物理网卡   图二, vmkernel虚拟网卡   参考资料 ============================ How To Determine Vmkernel Inter ...

  7. Woocommerce 分类下的产品如何使用ID号来作为默认排序字段

    在给一个客户开发网店系统时使用了WordPress系统的Woocommerce插件 WordPress版本:3.8 Woocommerce版本:2.0.20 如果没有指定排序规则(指定的字段),则Wo ...

  8. （回溯法）数组中和为S的N个数

    Given a list of numbers, find the number of tuples of size N that add to S. for example in the list ...

  9. Android研究之动态创建UI界面具体解释

     Android的基本UI界面一般都是在xml文件里定义好,然后通过activity的setContentView来显示在界面上.这是Android UI的最简单的构建方式.事实上,为了实现更加复 ...

  10. ipkg包管理

    添加ipkg更新源 你可以通过修改/opt/etc/ipkg.conf去添加 ############################ echo src optware http://ipkg.nsl ...