<!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. BZOJ 1229 [USACO2008 Nov]toy 玩具（三分+贪心）

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

  2. Eden的退役记

    好久没更博客了, 这篇随笔不同于之前的学术性随笔.游记,只是来发泄一下自己的情感,回忆一下自己的OI经历…… 五年的OI生涯结束了 初一:懵懂的我刚接触了OI,被其功能吸引.由于运气好过了初赛,然而复 ...

  3. 【线段树】洛谷 P3372 【模板】线段树 1

    动态开结点线段树板子. #include<cstdio> using namespace std; typedef long long ll; ll sumv[400005],delta[ ...

  4. 【优先队列】POJ3614-Sunscreen

    参考:❀ #include<iostream> #include<cstdio> #include<queue> #include<algorithm> ...

  5. linux中django部署

    下载nginx yum install nginx rpm -ql nginx systemctl start nginx /usr/share/nginx/html # html页面 /etc/ng ...

  6. RMI（Remote Method Invocation ) 概念恢复

    1.RMI是远程方法调用的简称,像其名称暗示的那样,它能够帮助我们查找并执行远程对象,通俗的说,远程调用就像一个class放在A机器上,然后在B机器中调用这个class的方法. 2.EMI术语 在研究 ...

  7. Problem D: 统计元音字母数

    #include<stdio.h> int main() { ]; int n,j,k,a,e,i,o,u; a=e=i=o=u=; gets(c); ;c[k]!='\0';k++) { ...

  8. iOS 在系统设置中展示Version, Build, Git等信息

     在设置中,展示自定义内容,如下图INFO区域内容:         步骤: 1.在项目中添加Settings.bundle文件 Root.plist和Root.plist的Source code如下 ...

  9. openssh相关

    openssh相关    DSA RSA,非对称加密,产生公钥.私钥,前者存放在remote,后者存放在local,ssh-keygen产生公钥私钥时,提示输入私钥密码,防止私钥泄露被盗    ssh ...

  10. redis节点管理-新增从节点

    原文:http://blog.sina.com.cn/s/blog_53b45c4d0102wg12.html 新增从节点 新增一个节点7008节点,使用add-node --slave命令. [pl ...