[转]如何为图片添加热点链接？（map + area）
原文地址：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）的更多相关文章
- 如何为图片添加热点链接？（map + area）
所谓图片热点链接就是为图片指定一个或多个区域以实现点击跳转到指定的页面.简单来说就是点击某一区域就能跳转到相应的页面,而无需点击整个图片才能跳转. 说到图片热点链接,我首先想到了map + area, ...
- 图片添加热点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 ...
- 使用Dreamweaver在一张图片上添加多个热点链接
所有代码: <html> <head> <meta charset="utf-8"> <title>无标题文档</title& ...
- HTML图片热区map area的用法
<area>标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面.其基本语法结构如下: < ...
- 【博客美化】05.添加GitHub链接
博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加Git ...
- 13、在 uwp应用中，给图片添加高斯模糊滤镜效果（一）
如果在应用中,如果想要给app 添加模糊滤镜,可能第一想到的是第三方类库,比如 Win2d.lumia Imaging SDK .WriteableBitmapEx,不可否认,这些类库功能强大,效果也 ...
随机推荐
- setsockopt()用法（参数详细说明）
int setsockopt(SOCKET s,int level,int optname,const char* optval,int optlen); s(套接字): 指向一个打开的套接口描述字l ...
- redis的主从配置 扩容
由于redis的集群功能没有完全编写好,见:http://redis.io/topics/cluster-spec 集群只有测试版的第8个版本redis3.0.0 见 http://redis.io/ ...
- tyvj P1403 关押罪犯 题解
P1403 [NOIP2010]关押罪犯 时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 S 城现有两座监狱,一共关押着N 名罪犯,编号分别为1~N.他 ...
- POJ 1740：A New Stone Game
A New Stone Game Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 5113 Accepted: 2806 Desc ...
- PowerDesigner教程系列（三）概念数据模型
目标: 本文主要介绍属性的标准检查约束.如何定义属性的附加检查. 一.定义属性的标准检查约束 标准检查约束是一组确保属性有效的表达式.在实体属性的特性窗口,打开如图所示的检查选项卡. 在这个选项卡可以 ...
- [多校2015.02.1006 高斯消元] hdu 5305 Friends
题意: 给你n个人m条关系 每条关系包括a,b 代表a和b能够是线上朋友也能够是线下朋友 然后保证每一个人的线上朋友数和线下朋友数相等 问你有多少种组成方法 思路: 官方题解是爆搜+剪枝,然而并不会写 ...
- linux free命令详解和使用实例(查看内存使用率)
转载:http://www.jb51.net/LINUXjishu/152017.html 1．命令格式: free [参数] 2．命令功能: free 命令显示系统使用和空闲的内存情况,包括物理内存 ...
- (笔试题)N!尾部连续0的个数
题目: 对任意输入的正整数N,编写C程序求N!的尾部连续0的个数,并指出计算复杂度.如:18!＝6402373705728000,尾部连续0的个数是3. (不用考虑数值超出计算机整数界限的问题) 思路 ...
- IIS 之 功能详解
IIS (Internet Information Services)信息服务管理器,本文以Windows10环境下的IIS为例,主要包含:FTP 服务器.Web 管理工具.万维网服务三大部分,如下表 ...
- vagrant box各种命令汇总
最近在研究laravel,中间用到了vagrant 虚拟机管理工具,学习一下他的命令 vagrant box命令 用于管理boxes的命令,比如添加.删除等等. 此命令的功能主要通过以下子命令完成: ...