<!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. 下载好的AE模板怎么用

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 下载好的AE模板怎么用_百度经验

  2. 【枚举】bzoj1072 [SCOI2007]排列perm

    暴力,next_permutation函数用于枚举出下一个排列.sscanf函数用于将字符串转化成数字. #include<cstdio> #include<cstring> ...

  3. (疯狂java)第二课

    (本文章只是为了好玩,没有别的意思,有理解错误之处,恳请提醒,谢谢) 三.数据类型和运算符 想了一下今天看的内容好像依然大脑停留在用C语言去理解java,感觉有点奇怪,为啥本章叫数据类型和运算符,上来 ...

  4. bzoj 1585: [Usaco2009 Mar]Earthquake Damage 2 地震伤害

    1585: [Usaco2009 Mar]Earthquake Damage 2 地震伤害 Description Farmer John的农场里有P个牧场,有C条无向道路连接着他们,第i条道路连接着 ...

  5. (原创)Stanford Machine Learning (by Andrew NG) --- (week 9) Anomaly Detection&Recommender Systems

    这部分内容来源于Andrew NG老师讲解的 machine learning课程,包括异常检测算法以及推荐系统设计.异常检测是一个非监督学习算法,用于发现系统中的异常数据.推荐系统在生活中也是随处可 ...

  6. Java高级架构师(一)第36节:Nginx的反向代理模块

    理解Http正向代理和Http反向代理的区别 Proxy模块,最常用的proxy_pass, Proxy_pass 可以转发请求到其他的浏览器.  # Nginx强项在于负载.反向.动静分离 #

  7. openGl 基础

    最近由于手机项目中需要用到OpenGL ES的知识,所以这段时间正在研究OpenGL的相关知识.因为OpenGL ES是OpenGL的剪裁版本,所以我直接从OpenGL入手,然后再去看OpenGL E ...

  8. You must have a TTY to run sudo

    1.方法一,给命令行添加tty ssh -t user@foo.com 2.使用sudo visudo修改配置: Defaults:user !requiretty 表示用户user使用sudo命令时 ...

  9. java中int取值范围是怎么计算的?

    首先jdk中定义int占4个字节 ===> 32位(后面全部的计算都是以此为根据的) 32位就是jvm仅仅给分配32个格子的空间,用以存放数据. 总所周知计算机中用0和1存放数据. 那么,32个 ...

  10. [转]在Sql Server中将字符串分割成表格数据示例

    本文转自:http://www.lmwlove.com/ac/ID718 比如我们有一个字符串 ) select @appName ='UserID=admin,Account=ABC' 然后我们要以 ...