<!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. Class文件格式

    本文系<深入理解Java虚拟机>总结 ClassFile{ u4 magic; u2 minor_version; u2 major_version; u2 constant_pool_c ...

  2. Check if a user is in a group

    groups or groups user

  3. Linux基础系列-Day6

    Samba服务(基于CentOS 7.0) Samba是在Linux和UNIX系统上实现SMB协议的一个免费软件,由服务器及客户端程序构成,Samba主要用于Linux或UNIX和Windows系统之 ...

  4. js中ajax的异步性

    最近项目里遇到ajax异步性的问题,简化后的代码如下: function ajaxGetEvents(calendarView, time) { var year = time.getFullYear ...

  5. Ubuntu用户管理原理

    Ubuntu账户: Ubuntu有三类账户:超级用户.普通用户以及系统用户. 每一个用户在ubuntu中都必须拥有一种账户,在Ubuntu中, /etc/passwd用来保存每个账户的信息.实际密码保 ...

  6. Funny Car Racing CSU - 1333 （spfa）

    There is a funny car racing in a city with n junctions and m directed roads. The funny part is: each ...

  7. 【置换群/模拟】NOIP2005-篝火晚会

    [问题描述] 佳佳刚进高中,在军训的时候,由于佳佳吃苦耐劳,很快得到了教官的赏识,成为了“小教官”.在军训结束的那天晚上,佳佳被命令组织同学们进行篝火晚会.一共有n个同学,编号从1到n.一开始,同学们 ...

  8. bzoj 3540: [Usaco2014 Open]Fair Photography

    3540: [Usaco2014 Open]Fair Photography Description FJ's N cows (2 <= N <= 100,000) are standin ...

  9. Erlang学习记录(三)——表达式大集合

    Erlang中的表达式必须以.结束才会去执行.如果不加.你在编译环境下按多少次Enter,表达式都不会执行,表达式之间可以用,分隔,以.结尾后所有的表达式都会执行,但是只有最后一个以.结尾的表达式会在 ...

  10. linux 配置信息

    # uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue # 查看操作系统版本 # cat /proc/cpuinfo # 查看CPU信息 # hostn ...