真实页面效果：就是一张图

html代码：

<!DOCTYPE HTML>

<html>

<style>

body{

    padding:0px;

    margin:0px;

}

</style>

<body>

<img src ="images/b.jpg" alt="Planets" usemap ="#planetmap" />

<map id ="planetmap">

<area shape ="rect" coords ="10,10,200,300" href ="sun.htm" alt="Sun" />

<area shape ="circle" coords ="300,200,200" href ="mercur.htm" alt="Mercury" />

<area shape ="circle" coords ="500,240,200" href ="venus.htm" alt="Venus" />

<!--直线-->

<area shape="poly " coords="100,240,200,100,100" href="venus.htm" alt="Venus">

<!--三角形-->

<area shape="poly " coords="100,240,200,100,100,100" href="venus.htm" alt="Venus">

</map>

</body>

</html>

PS：

定义和用法

shape 属性与 coords 属性配合，可以规定区域的尺寸、形状和位置。

详细解释：

shape 属性用于定义图像映射中对鼠标敏感的区域的形状：

  • 圆形（circ 或 circle）
  • 多边形（poly 或 polygon）
  • 矩形（rect 或 rectangle）

1、圆形效果图：

2、长方形效果图：

3、直线效果图：

4、三角形效果图：

html5 area实例的更多相关文章

  1. 【HTML5】实例练习

    1.许多时髦的网站都提供视频.如果在网页上展示视频? <!DOCTYPE HTML> <html> <body> <video width="320 ...

  2. html5 缓存实例

    html5 有两种缓存 1.localStorage:浏览器关闭后,数据库还存在. 2.sessionStorage:session缓存,浏览器关闭后,数据已经不存在. 实例一:localStorag ...

  3. HTML5 小实例

    1.时钟: <!doctype html> <html> <head></head> <body> <canvas id=" ...

  4. html5文章 -- HTML5开发实例-网易微博手机Web App开发过程

    HTML5在国内外越来越受到互联网开发团队的青睐.国外,谷歌兴致勃勃地开发Chrome Web Store,微软发布了支持使用HTML5技术开发的“Irish Spring”主题网站,诺基亚斥巨资购得 ...

  5. 精妙无比 8款HTML5动画实例及源码

    1.jQuery垂直带小图标菜单导航插件 今天我们要来分享一款jQuery菜单插件,这款jQuery菜单是垂直的样式,鼠标滑过菜单项时会出现一个背景,菜单项的右侧也会出现一个小箭头.另外值得注意的是, ...

  6. 8款功能强大的最新HTML5特效实例

    1.HTML5 Canvas画板画图工具 可定义笔刷和画布 今天要分享的这款HTML5 Canvas画图工具就可以简单实现网络画图的功能,我们可以自定义笔刷的类型.粗细.颜色,也可以定义画布的大小和背 ...

  7. HTML5经典实例——1基础语法和语义

    1指定DOCTYPE 在页面的最开始处指定HTML5 DOCTYPE DOCTYPE是不区分大小写的.可以任意的使用大小写. <!DOCTYPE html> <html lang=& ...

  8. HTML5 标签实例

    html 5 学习1.<p></p> #段落元素定义2.<h1></h1> #标题 h1代表大号的字体.依此变小3.<br /> #实例 代 ...

  9. HTML5基础实例（三）

    不知道从哪说起那就一段一段代码的说吧 实例一:iframe框架显示 写一个这样的网页: 分析: 1.需要三个链接,一个是默认的百度链接,默认显示在那个框里,另外:两个是点击跳转的超链接. 2.需要if ...

随机推荐

  1. ACM-ICPC 2018 南京赛区网络预赛 G Lpl and Energy-saving Lamps（线段树）

    题目链接:https://nanti.jisuanke.com/t/30996 中文题目: 在喝茶的过程中,公主,除其他外,问为什么这样一个善良可爱的龙在城堡里被监禁Lpl?龙神秘地笑了笑,回答说这是 ...

  2. redux源码解析-redux的架构

    redux很小的一个框架,是从flux演变过来的,尽管只有775行,但是它的功能很重要.react要应用于生成环境必须要用flux或者redux,redux是flux的进化产物,优于flux. 而且r ...

  3. 图片margin:0 auto;为何不居中

    图片margin:0 auto;为何不居中 关键: img元素 display设为block 代码: <!DOCTYPE html> <html> <head> & ...

  4. LOJ#2249 购票

    解:转移方程写出来,发现是斜率优化.因为在树上,考虑CDQ分治 + 点分治的方法... 每次找到重心,然后先递归解决上面的子树.然后把上面子树的凸包搞出来,下面每个点在凸包上二分找最优决策. 重心自己 ...

  5. A1099. Build A Binary Search Tree

    A Binary Search Tree (BST) is recursively defined as a binary tree which has the following propertie ...

  6. 在hive中UDF和UDAF使用说明

    Hive进行UDF开发十分简单,此处所说UDF为Temporary的function,所以需要hive版本在0.4.0以上才可以. 一.背景:Hive是基于Hadoop中的MapReduce,提供HQ ...

  7. （九）逻辑运算，order by，desc

    逻辑运算 AND,OR,NOT ......where 表达式1  and 表达式2: ......where 表达式2  and 表达式1: SQL优化: SQL在解析where时是从右向左解析的. ...

  8. Hibernate4

    内容简介:1.使用log4j的日志存储,2.一对一关系,3.二级缓存 1       整合log4j(了解) l  slf4j 核心jar  : slf4j-api-1.6.1.jar .slf4j是 ...

  9. Html的简单学习笔记

    1.Html简介 1)什么是html: HyperText Markup Language:超文本标记语言,网页语言. >超文本:超出文本范围. >标记: html中所有的操作都是使用标记 ...

  10. Day12--Python--生成器,生成器函数,推导式,生成器表达式

    一.昨日内容回顾 惰性机制(只有执行__next__()才会取值)二.今日主要内容 1.生成器 生成器:本质是迭代器,写法和迭代器不一样.用法和迭代器一样. ※生成器记录的是代码 2.生成器函数 生成 ...