如何为图片添加热点链接？（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>,< ...
随机推荐
- 几种加密算法的java实现包括MD5、RSA、SHA256
SHA加密: package com; import java.security.MessageDigest;import java.security.NoSuchAlgorithmException ...
- Sp_Lock
SP_LOCK 其显示信息为: Spid:进程ID号(要发现哪些用户和该spid相连,你就要执行存储过程sp_who) Dbid:数据库ID号(可以在主数据库中的sysdatabases表格中找到它) ...
- Robot Framework学习笔记（三）------常用关键字介绍
下面关键字全部由 Builtin 库提供,Builtin 为 Robot Framework 标准类库.Builtin库提供常用的关键字 1.log log 关键字就是编程语言里的"prin ...
- Mac Sublime text3 如何设置更加漂亮好用？
说明:配置是根据自己的需求搜索了蛮多博客测试总结的. 显示效果 配置信息: command + , [逗号], 右侧配置信息 { "color_scheme": "Pac ...
- Html5 移动端 触摸滑动事件
以下代码经过测试 没有问题 且可以循环滑动 <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"& ...
- 【SSD，FIO，SAS选择的一些小结】SSD，FIO，SAS选择的一些小结
最近重新摊上了数据库,公司核心数据库天天 IO爆满,在研究用SAS 16*RAID10 ,还是RAID10 SSD*6, 还是FIO:no.1 principle, no raid-5 for dat ...
- python将数据写入excel代码，python与office交互
# -*- coding: utf-8 -*- from smartframe.header import * import pymysql import json import importlib, ...
- ubuntu使用rdesktop连接win10的两个问题
关闭防火墙,解决主机ping不通虚拟机的问题 win10需要修改注册表 \HKLM\SYSTEM\CurrentControlSet\Control\Terminal Server\WinStatio ...
- jq传统火车轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 部署spring Boot项目到tomcat
导火线 : 遇到两次本地可以跑通,部署到服务器tomcat就出问题的情况了,为了不忘记,记录在此吧 第一次部署到服务器上是静态资源访问不了,花了一些时间,是因为application.yml中的 mv ...