<!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. 自定义word快捷键，设置插入图片快捷键

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 自定义word快捷键,设置插入图片快捷键 文件→选项→自定义功能区 选择键盘快捷方式 自 ...

  2. 【BZOJ 1901】【ZJU 2112】Dynamic Rankings

    http://www.lydsy.com/JudgeOnline/problem.php?id=1901 重新用整体二分写了一下. 整体二分的思想详见论文. 貌似带修区间k大和静态区间k大都是\(O( ...

  3. AC自动机专题总结

    最近学习了AC自动机,做了notonlysuccess大牛里面的题,也该来个总结了. AC自动机(Aho-Corasick Automaton)在1975年产生于贝尔实验室,是著名的多模匹配算法之一. ...

  4. 【计算几何】【预处理】【枚举】Urozero Autumn Training Camp 2016 Day 5: NWERC-2016 Problem K. Kiwi Trees

    发现由于角的度数和边的长度有限制,那俩圆如果放得下的话,必然是塞在两个角里. 于是预处理n个圆心的位置(注意要判断那个圆会不会和其他的边界相交),然后n^2枚举俩角即可. #include<cs ...

  5. 【优先队列】POJ1442-Black Box

    [思路] 建立一个小堆和一个大堆.大堆用来存放第1..index-1大的数,其余数存放在大堆,小堆的堆顶元素便是我们要求出的第index大的数.每次插入一个A(n),必须保证大堆中数字数目不变,故先插 ...

  6. 【枚举+贪心】POJ2718-Smallest Difference

    [题目大意] 按升序输出几个不同的数字,任意组成两个数字,输出最小的差值. [思路] 虽然是在穷竭搜索的章节里找到的题目,但是我觉得不需要穷竭搜索,枚举一下就可以了,0MS.分为一下三种情况: (1) ...

  7. hdu 4071& poj 3873 & zoj 3386 & uva 12197 Trick or Treat 三分法

    思路: 看到这个题目就发现所需最短时间也就是房子和相遇点的最远距离具有凹凸性,很容易就想到了三分法枚举. 找出所有房子的X坐标的最小最大值作为上下界. 代码如下: #include<stdio. ...

  8. express路由和中间件

    路由 简单来说,express路由就是用来处理一些请求,响应一些url地址. var express = require('express'); var app = express(); app.ge ...

  9. 最小生成树之Prim算法--蓝白点思想

    Prim算法: 以前一直不是很明白,Prim算法,今天就来终结一下. Prim算法采用与Dijkstra.Bellman-Ford算法一样的“蓝白点”思想:白点代表已经进入最小生成树的点,蓝点代表未进 ...

  10. java中interface的完整表述

    我用一个工具:java Decompiler反编译工具查看jar包源码的时候,出现了以下代码: public abstract interface AbsITest{} 在网上搜索了一下: 我对这种情 ...