<!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. Bzoj4016/洛谷P2993 [FJOI2014] 最短路径树问题（最短路径问题+长链剖分/点分治）

    题面 Bzoj 洛谷 题解 首先把最短路径树建出来(用\(Dijkstra\),没试过\(SPFA\)\(\leftarrow\)它死了),然后问题就变成了一个关于深度的问题,可以用长链剖分做,所以我 ...

  2. oracle Lower Upper length substr

    字符函数: Lower(char):将字符串装换为小写的格式 Upper(char):将字符串装换为大写的格式 length(char):返回字符串的长度 substr(char,m,n):从m开始截 ...

  3. Linux基础系列-Day5

    网络管理 ifconfig网络管理工具 ifconfig依赖于命令中使用一些选项属性,不仅可以被用来简单地获取网络接口配置信息,还可以修改这些配置,但是通过ifconfig修改的通常为临时配置,即系统 ...

  4. [LOJ6179]Pyh的求和

    首先有一个等式是$\varphi(ab)=\frac{\varphi(a)\varphi(b)d}{\varphi(d)}$,其中$d=(a,b)$,这个比较好证,直接按展开式计算可得$\varphi ...

  5. Wunder Fund Round 2016 (Div. 1 + Div. 2 combined) F. Double Knapsack 鸽巢原理 构造

    F. Double Knapsack 题目连接: http://www.codeforces.com/contest/618/problem/F Description You are given t ...

  6. 最好的拖拽js

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. mysql join优化

    http://www.jb51.net/article/50427.htm 七.性能优化1.显示(explicit) inner join VS 隐式(implicit) inner join 如: ...

  8. [Android实例] 推荐给你们一个好用的ListView、RecyclerView适配器

    https://github.com/vihuela/RecyclerViewHelpper 如果用过RecyclerView的人都知道,高度不会包裹,然后写法好像也不是很简洁,甚至点击事件不好设 置 ...

  9. bootstrap table 复选框选中后，翻页不影响已选中的复选框

    使用的 jquery版本为 2.1.1 在项目中发现bootstrap table的复选框选中后,翻页操作会导致上一页选中的丢失,api中的 bootstrapTable('getSelections ...

  10. [Android Memory] 手动回收ImageVIew的图片资源

    ImageView默认是不进行图片资源的回收的,需要我们自己在activity或者fragment中进行回收: public static void releaseImageViewResouce(I ...