原文地址: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. haitaolab.com 我的新网站,欢迎访问

    从博客园到csdn,再到新浪云博客,最近终于下决心购买空间和域名建立自己的独立网站! 在这里也建议希望建立自己独立博客的朋友尽快行动吧! 我的新的网站“海淘实验室”专注于介绍和分享海淘资讯,欢迎大家访 ...

  2. 代码规范审查 – Sonar分析项目

    Sonar搭建成功之后,就可以通过简单的CMD指令进行项目分析,此篇主要介绍使用Sonar来分析.net项目. 扫描步骤: a.    打开CMD,切换到指定的项目根目录,和.sln同级目录即可(此处 ...

  3. iOS开源项目:PullToRefresh

    PullToRefresh实现了类似微博下拉刷新的功能:https://github.com/sonnyparlin/PullToRefresh 首先把PullToRefreshView.h, Pul ...

  4. PowerDesigner教程系列(一)概念数据模型

    目标: 本文主要介绍PowerDesigner中概念数据模型 CDM的基本概念. 一.概念数据模型概述 数据模型是现实世界中数据特征的抽象.数据模型应该满足三个方面的要求:1)能够比较真实地模拟现实世 ...

  5. 【Android】Activity 生命周期具体解释

    与其它编程模式不同,android中的Activity没有main()函数.我们无法决定Activity的创建和销毁过程,Activiy的创建和销毁(即生命周期)由系统完毕,系统会在Activity的 ...

  6. angular中定义全局变量及全局变量的使用

    一个例子,定义了两个变量,并且把变量显示出来: <!DOCTYPE html> <html ng-app="myApp"> <head> < ...

  7. Ubuntu 下建立WiFi热点的方法

    使用ap-hotspot来创建WIFI热点.终端里输入: $ sudo add-apt-repository ppa:nilarimogard/webupd8 $ sudo apt-get updat ...

  8. 显示游戏FPS帧率的几种计算方式

    FPSDisplay.cs using UnityEngine; using System.Collections; public class FPSDisplay : MonoBehaviour { ...

  9. UI组件之TextView及其子类(五)计时器Chronometer

    Chronometer直接继承了TextView组件,它会显示一段文本,显示从某个事实上时间開始.一共过了多长时间.我们看Chronometer的源代码: watermark/2/text/aHR0c ...

  10. android studio提示信息乱码解决方法

    在build.gradle文件中加上 android {compileOptions.encoding = "GBK"}就好了