[转]如何为图片添加热点链接？（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,不可否认,这些类库功能强大,效果也 ...
随机推荐
- Java 3D游戏引擎——JME(java Monkey Engine)
转自:http://bbs.gameres.com/forum.php?mod=viewthread&tid=180732 JME(java Monkey Engine),一个非常棒的Java ...
- Android学习进阶和IoC
1.成为Android高手一般分为六个阶段: 第一阶段:熟练掌握Java SE,尤其是对其内部类.线程.并发.网络编程等需要深入研究:熟练掌握基于HTTP协议的编程,清楚POST和GET等请求方式流程 ...
- koa2搭建服务器+使用mongoose链接mangodb
使用node搭建服务器,用到了现在比较流行的框架koa. 1.初始化package.json npm init -y 2.安装koa2 npm i koa --save 3.搭建服务器 const K ...
- 分享一个基于 Node.js 的 Web 开发框架 - Nokitjs
简介 Nokit 是一个简单易用的基于 Nodejs 的 Web 开发框架,默认提供了 MVC / NSP / RESTful 等支持,并提供对应项目模板.管理工具. 资源 GitHub https: ...
- selinux改变状态不需要重启的方法
1.selinux的配置路径/var/selinux/config,配置内容为 2.配置文件修改完,需要重启系统,才能生效 3.使用sestatus -v 查看当前selinux功能情况: 4.使用s ...
- iOS: FFmpeg的使用二
1.下载并编译FFMPEG. https://github.com/kewlbear/FFmpeg-iOS-build-script 下载后有一个build-ffmpeg.sh文件.终端执行即可自动下 ...
- QT在windows下的安装与配置
先了解Qt: Qt一直以来,分为商业.开源两个版本,商业版本为用户提供了二级制的动态库,直接安装既可以使用,但是需要花钱购买license,而开源版本则遵守GPL协议,提供了源码,用户需要自行编译,才 ...
- Echarts使用dataset数据集管理数据
1.可以看官网api的入门例子 使用常见的对象数组的格式 option = { legend: {}, tooltip: {}, dataset: { // 这里指定了维度名的顺序,从而可以利用默认的 ...
- JAVA:连接池技术说明以及MVC设计模式理解
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMjgzMDgwNw==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...
- div+css 和 xhtml+css是一回事么?
div+css 和 xhtml+css是一回事.只是说法不一样,表达得意思都是通过CSS定义DIV 布局. 那为什么地方要说成XHTML +css 呢? 以为我们做网站用CSS布局得时候不光是用了DI ...