如何为图片添加热点链接？（map + area）
所谓图片热点链接就是为图片指定一个或多个区域以实现点击跳转到指定的页面。简单来说就是点击某一区域就能跳转到相应的页面，而无需点击整个图片才能跳转。
说到图片热点链接，我首先想到了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）的更多相关文章
- [转]如何为图片添加热点链接？（map + area）
原文地址:https://www.cnblogs.com/jf-67/p/8135004.html 所谓图片热点链接就是为图片指定一个或多个区域以实现点击跳转到指定的页面.简单来说就是点击某一区域就能 ...
- 图片添加热点MAP之后连接无效的解决方法
好些接触网店的同事都会遇到这个问题:就是明明给图片添加了热点超链接,但是点击图片就是没反应. 其实这个问题就是热点冲突,也就是说这个页面中至少有2个名称相同的热点导致热点冲突无法正确加载. 谷歌浏览器 ...
- 使用DW工具给图片添加热点MAP
一.准备一张图片. 准备一张需要给不同区域添加不同热点的图片. 二.插入图片: 打开Dreamweaver,新建一个网页,将图片插入到页面中. 三.找到地图工具: 单击鼠标左键点击图片,这时候 ...
- html中给图片添加热点
<img src="images/index/top1.jpg" width="248" height="512" usemap=&q ...
- css图片热点链接的设置
一.热点的原理 图片通过usemap="#Map"属性将名称为"Map"的热点区域及连接映射到图片上. 一般来说,图片的usermap属性对应的是map热点的n ...
- HTML图片热区map area的用法
<area>标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面.其基本语法结构如下: < ...
- HTML图片热区 map area 标签
实例 <img src ="planets.gif" alt="Planets" usemap ="#planetmap" /> ...
- 使用Dreamweaver在一张图片上添加多个热点链接
所有代码: <html> <head> <meta charset="utf-8"> <title>无标题文档</title& ...
- 谈谈html中一些比较"偏门"的知识(map&area；iframe；label)
说明:这里所说的"偏门"只是相对于本人而言,记录在此,加深印象.也希望有需要的朋友能获得些许收获! 1.空元素(void):没有内容的元素. 常见的有:<br>,< ...
随机推荐
- 模板引擎（smarty）知识点总结
首先我们必须知道使用smarty的流程 1.引入 2.实例化 3.配置 模板目录 编译目录 3.0版本 支持不存在的目录则新建 4.赋值 5.编译显示 某个模板文件(暗示需要哪 ...
- input选择框样式修改与自定义
html自带的选择框样式不好看,并且在ios设备上丑的罚款.所以一般都是自定义样式: 原理:将原来默认的input选择框隐藏,然后控制label的:before与:after,配合矢量图标或者图片来实 ...
- oracle里的优化器
1.1 oracle里的优化器 RBO(Rule-Based-Optinizer):基于规则的优化器 CBO(Cost-Based-Optinizer): 基于成本的优化器 SQL语句执行过程 待执行 ...
- 记录Mac下安装pyenv时所遇到的问题
http://blog.csdn.net/foryouslgme/article/details/51683654
- 快速恢复开发环境（系统还原后的思考，附上eclipse注释的xml配置文件）
1.Eclipse/Myeclipse的工作空间,不能放在系统盘 除非你的项目都有实时的云同步或SVN等,才能放在系统固态盘,不然你享受快速启动项目的同时,也需要承担系统奔溃后找不回项目的风险: 公司 ...
- Ruby学习之代码块
代码块在其他的语言中都或多或少接触过一些,如perl中sort{$a<=>$b}keys,传入代码块实现按数值排序,在swift中用到闭包,更加深入学习到training closure. ...
- 关于 const 的一点小研究
在饱受 var 的折磨之后,ES6 终于推出了新的定义变量的方法:let 和 const 和 var 相比,let 和 const 有了自己的作用域,let 用于定义变量,而 const 用于定义常量 ...
- exports与module.exports，export与export default 之间的关系和区别
首先我们要明白一个前提,CommonJS模块规范和ES6模块规范完全是两种不同的概念. CommonJS模块规范 Node应用由模块组成,采用CommonJS模块规范. 根据这个规范,每个文件就是一个 ...
- Android studio签名与代码混淆
签名: 应用程序升级:应用程序模块化:代码或者数据共享 混淆:混淆器将代码中的所有变量.函数.类的名称变为简短的英文字母代号,而混淆后的代码很难被反编译,即使反编译成功也很难得出程序的真正语义.
- 运用OpenMP提速图像处理速度
一.算法测试 // openmptest的测试程序#include "stdafx.h"void Test(int n){ for (int i=0;i<10000;i ...