<area>标记：主要用于图像地图，通过该标记可以在图像地图中设定作用区域（又称为热点），这样当用户的鼠标移到指定的作用区域点击时，会自动链接到预先设定好的页面。其基本语法结构如下：

　　　　　　<area class="hot" href＝"url" alt＝"text" shape＝"shape" coords＝"coords">

　　　　　　class和id：是分别指定热点的类型和id号。

　　　　　　alt：用于设定热点出错时的替换文字。

　　　　　　href：用于设定该热点所链接的url地址。

　　　　　　shape和coords：是两个主要的参数，用于设定热点的形状和大小。其基本用法如下：

　　　　　　　　<area shape="rect" coords="x1, y1,x2,y2" href=url>表示设定热点的形状为矩形，左上角顶点坐标为（x1,y1），右下角顶点坐标为（x2,y2）。

　　　　　　　　<area shape="circle" coords="x1, y1,r" href=url>表示设定热点的形状为圆形，圆心坐标为（x1,y1），半径为r。

　　　　　　　　<area shape="poligon" coords="x1, y1,x2,y2 ......" href=url>表示设定热点的形状为多边形，各顶点坐标依次为（x1,y1）、（x2,y2）、（x3,y3） ......。

　　　　　　　　　　备注：x1, y1,x2,y2　这几个点的位置 是根据图片而定的，不是根据窗口的大小而定。　

　　　　　　　　　　<area>标记是在图像地图中划分作用区域的，因此其划分的作用区域必须在图像地图的区域内，所以在用 <area>
标记划分区域前必须用HTML的另一个标记<map>来设定图像地图的作用区域，并为指定的图像地图设定名称，该标记的用法很简单，即<map
name="图像地图名称"> ...... </map>。

　　

　　　　　　代码展示：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

        *{margin:0px;padding:0px;}

        .wrap{width:736px;height:400px;border:2px solid red;margin:100px auto;}

        </style>

    </head>

    <body>

        <div class="wrap">

            <img src="1.jpg" width="736" height="400" usemap="#planetmap">

            <map name="planetmap" id="planetmap">

              <area class="area1" shape="circle" coords="100,100,100" href="http://www.baidu.com" target="_blank"/>

              <area class="area2" shape="rect" coords="300,200,700,400" href="http://www.wujiaw.com" target="_blank"/>

            </map>

        </div>

    </body>

</html>

area热点区域的更多相关文章

  1. Study 2 —— 图片热点区域

    标记<map>和<area><img src="图片" usemap="#名称"><map id="#名称& ...

  2. html热点区域

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 【flink training】 打车热点区域实时统计PopularPlaces

    http://training.data-artisans.com/是Apache Flink商业公司DataArtisans提供的一个flink学习平台,主要提供了一些业务场景和flink api结 ...

  4. ASP.NET MVC使用Areas后怎样获取Area（区域）的名称

    写此随笔,目的只为今后在ASP.NET MVC项目中再用到Area(区域)时作为备查. 获取当前Area(区域)名称的方法是: ViewContext.RouteData.DataTokens[&qu ...

  5. 利用flash精确定位asp.net的图像热点区域

    Asp.net的热点区域控件非常有用,但是对于热点区域如何精确定位,设定矩形,圆和多边形要素点的位置,用flash能够精确定位,在flash中制作热点区域的部分,可以是矩形,图形或者文字,然后对于这部 ...

  6. 关于使用Html5 canvas、 map、jquery构造不规则变色点击区域 热点区域

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. HTML <area> 标签区域map标签

    1.距形:(左上角顶点坐标为(x1,y1),右下角顶点坐标为(x2,y2)) <area shape="rect" coords="x1,y1,x2,y2" ...

  8. 创建一个区域(Creating an Area) |使用区域 | 高级路由特性 | 精通ASP-NET-MVC-5-弗瑞曼

    摘自:http://www.cnblogs.com/chenboyi081/p/4472709.html#tar2015050302 下面的AdminAreaRegistration继承自AreaRe ...

  9. 前端开发工程师 - 01.页面制作 - 第3章.HTML

    第3章--HTML HTML简介 Hyper Text Markup Language:超文本标记语言--用于标记网页的内容 history: html(1991)雏形 -> html4.01( ...

随机推荐

  1. tensorflow 1 - 起步

    使用图 (graph) 来表示计算任务. 在被称之为 会话 (Session) 的上下文 (context) 中执行图. 使用 tensor 表示数据. 通过 变量 (Variable) 维护状态. ...

  2. [笔记-图论]Floyd

    用于可带负权的多源最短路 时间复杂度O(n^3) 注意一定不要给Floyd一个带负环的图,不然就没有什么意义了(最短路不存在) 模板 // Floyd // to get minumum distan ...

  3. 11 hbase源码系列（十一）Put、Delete在服务端是如何处理

    hbase源码系列(十一)Put.Delete在服务端是如何处理?    在讲完之后HFile和HLog之后,今天我想分享是Put在Region Server经历些了什么?相信前面看了<HTab ...

  4. Node.js的helloworld 程序

    用文本编辑器.如npp,键入例如以下代码.存储成hello.js console.log('hello') console.log('hello %s->%d','jeapedu', 19418 ...

  5. Xml、Json序列化

    Xml序列化: public class XmlHelper { private static string XmlPath = Path.Combine(AppDomain.CurrentDomai ...

  6. Magento--判断checkout中是否使用了coupon code

    在checkout页面中,如果想判断顾客是否有使用coupon code,可以通过checkout session来进行判断.以下代码会返回checkout中使用的coupon code或者返回空(当 ...

  7. 2015上海网络赛 HDU 5475 An easy problem 线段树

    题意就不说了 思路:线段树,维护区间乘积.2操作就将要除的点更新为1. #include<iostream> #include<cstdio> #include<cstr ...

  8. POJ - 3842 An Industrial Spy dfs(水)

    题意:给你一串数字,最少一个,最多七个,问用这里面的数字能组成多少素数,不重复. 思路:之前还遍历10000000的每一个素数,结果超时,后来发现直接dfs就可以了,只是标记一下做过的数. #prag ...

  9. sqlserver bulk insert

    开启功能 -- To allow advanced options to be changed. EXEC sp_configure 'show advanced options', 1 GO -- ...

  10. OPENCV(5) —— 图像直方图

    新版本对直方图不再使用之前的histogram的形式,而是用统一的Mat或者MatND的格式来存储直方图,可见新版本Mat数据结构的优势. C++: void calcHist(const Mat* ...