<!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. Luogu P2590 树的统计(树链剖分+线段树)

    题意 原文很清楚了 题解 重链剖分模板题,用线段树维护即可. #include <cstdio> #include <cstring> #include <algorit ...

  2. 网络编程之tcp五层模型

    网络编程 1.客户端与服务端架构:C/S   B/S  架构 client <-------基于网络通信-------->server brower<-------基于网络通信--- ...

  3. Perl正则表达式

    perl正则表达式就是通过一串特别设计的字符串,可以按照我们的需求匹配.替换.转化目标字符串.本文主要是对一些常用的正则表达以及语法的总结以及举例,供广大喜爱Perl的同学交流学习. 操作符: =~ ...

  4. Java学习笔记(15)

    iterator方法 迭代器的作用:就是用于抓取集合中的元素 注:迭代器返回的一个接口类型的实现类,是一种多态的用法,而不是接口在调用方法 public class Demo2 { public st ...

  5. fastjson生成json时Null属性不显示的解决方法

    举个例子 Map < String , Object > jsonMap = new HashMap< String , Object>(); jsonMap.put(&quo ...

  6. Problem G: 部分复制字符串

    #include <stdio.h> #include <string.h> int main() { void copystr(char *,char *,int); int ...

  7. 洛谷 [AHOI2001]质数和分解

     题目描述 Description 任何大于 1 的自然数 n 都可以写成若干个大于等于 2 且小于等于 n 的质数之和表达式(包括只有一个数构成的和表达式的情况),并且可能有不止一种质数和的形式.例 ...

  8. Nginx配置自签名的SSL证书(转载)

    要保证Web浏览器到服务器的安全连接,HTTPS几乎是唯一选择.HTTPS其实就是HTTP over SSL,也就是让HTTP连接建立在SSL安全连接之上. SSL使用证书来创建安全连接.有两种验证模 ...

  9. 用asyncio的异步网络连接来获取sina、sohu和163的网站首页

    代码如下: import asyncio async def wget(host): print('wget %s...' % host) connect = asyncio.open_connect ...

  10. Linux使用pyVLfeat库做Dense sift提示段错误(segmentation fault)详细分析

    pyVLfeat是著名的图像处理库VLFeat在python上的接口包.在linux环境下使用该库提示“段错误”.百度后得知: 所谓的段错误就是指访问的内存超出了系统所给这个程序的内存空间 意思其实就 ...