<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <img src="img/1.jpg" border="0" usemap="#map" />

    <map name="map">

        <area shape="rect" coords="20,20,40,40" href="http://www.baidu.com" />

        <area shape="circle" coords="80,70,20" href="clearfix.html" />

        <area shape="poly" coords="280,323,323,435,100,300,287,45,34,344" href="position.html" />

    </map>

</body>

</html>

usemap="#map" ,map为热点区域

area的三个属性：
shape：
        rect(矩形)：coords的四个数值分明别表示左上角、右下角两个点横纵坐标，单位为像素。
        circle(圆形)：coords的三个数值分明别表示圆心横纵坐标及半径，单位为像素。
        poly(多边形)：coords的多个数值分别表示各个顶点的横纵坐标，单位为像素。



html热点区域的更多相关文章

  1. 利用flash精确定位asp.net的图像热点区域

    Asp.net的热点区域控件非常有用,但是对于热点区域如何精确定位,设定矩形,圆和多边形要素点的位置,用flash能够精确定位,在flash中制作热点区域的部分,可以是矩形,图形或者文字,然后对于这部 ...

  2. Study 2 —— 图片热点区域

    标记<map>和<area><img src="图片" usemap="#名称"><map id="#名称& ...

  3. 【flink training】 打车热点区域实时统计PopularPlaces

    http://training.data-artisans.com/是Apache Flink商业公司DataArtisans提供的一个flink学习平台,主要提供了一些业务场景和flink api结 ...

  4. area热点区域

    <area>标记:主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面.其基本语法结构如下: &l ...

  5. 关于使用Html5 canvas、 map、jquery构造不规则变色点击区域 热点区域

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. dreamweaver中的 map怎么调用?_制作热点图像区域

    我们浏览网页时,经常看到一些图片上会出现特别的超链接,即在一张图片上有多个局部区域和不同的网页链接,比如地图链接. 这就是映射图像(Image Map),它是指一幅根据链接对象不同而被人为划分为若干指 ...

  7. css：map热点的应用

    映射图像(Image Map)可以实现的效果是:一张图片上点不同位置可以跳转到不同的地方, 实例: 1.插入一张图片 2.在底部“属性”栏中选择合适的热点工具,在图片上绘制热点区域,如 3.然后返回代 ...

  8. 图像热点&图像映射

    图像映射 图像映射也称为图像热点. 作用: 让同一张图片上的不同区域,可以实现多个不同的超链接功能. 图示: <map>图像映射三步走: 图像映射的实现需要三方面配合完成: 1.图像映射容 ...

  9. css图片热点链接的设置

    一.热点的原理 图片通过usemap="#Map"属性将名称为"Map"的热点区域及连接映射到图片上. 一般来说,图片的usermap属性对应的是map热点的n ...

随机推荐

  1. 北邮校赛 I. Beautiful Array（DP）

    I. Beautiful Array 2017- BUPT Collegiate Programming Contest - sync 时间限制 1000 ms 内存限制 65536 KB 题目描述 ...

  2. 【Numpy】python机器学习包Numpy基础知识学习

    一.安装:在之前的博客中已经写过:http://www.cnblogs.com/puyangsky/p/4763234.html 二.python数组切片知识: python中序列类有list.str ...

  3. 安装xampp之后如何建立远程登录用户并修改登录方式和密码

    其实xampp作为开发环是非常好用的,但是很少人将其用作生产环境,主要还是它的安全性较低,很多默认设置都存在安全漏洞,但是实际上使用xampp在Linux下面进行配置确实是很节省时间的一件事(如果你的 ...

  4. VB 中DTpicker日期控件的运用

    1.如何加载 VB默认的控件栏中是没有DTpicker日期控件的,添加过程:工具--部件--控件--"Microsoft  Windows Common Controls-2.6.0&quo ...

  5. 在intellij idea 中进行android 单元测试

    本次用来测试的代码是sqlite进行数据操作. ######右键选择要进行单元测试的应用 #############弹出选择框,选择Android>Test Module>Next ### ...

  6. [Nescafé41]异化多肽(多项式求逆元)

    2015年的题,应该是将形式幂级数引入国内的元老级题目. 大意:给定一个大小为m的正整数序列和n,问有多少种选法可以凑成n,每个数可以选多次,种类不同算不同方案.$n,m,C \leqslant 10 ...

  7. POJ2975 Nim 博弈论 尼姆博弈

    http://poj.org/problem?id=2975 题目始终是ac的最大阻碍. 问只取一堆有多少方案可以使当前局面为先手必败. 显然由尼姆博弈的性质可以知道需要取石子使所有堆石子数异或和为0 ...

  8. HDU 6041 I Curse Myself（二分+搜索）

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=6041 [题目大意] 给出一个仙人掌图,求第k小生成树 [题解] 首先找到仙人掌图上的环,现在的问题 ...

  9. BZOJ 1229 [USACO2008 Nov]toy 玩具（三分+贪心）

    [题木链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1229 [题目大意] 每天对玩具都有一定的需求ni,每天可以花f价值每条购买玩具, 当天 ...

  10. [PKUSC2018]最大前缀和

    [PKUSC2018]最大前缀和 题目大意: 有\(n(n\le20)\)个数\(A_i(|A_i|\le10^9)\).求这\(n\)个数在随机打乱后最大前缀和的期望值与\(n!\)的积在模\(99 ...