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

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. 第二届强网杯wp

    web web签到 利用了md5碰撞 payload为 param1 =%4d%c9%68%ff%0e%e3%5c%20%95%72%d4%77%7b%72%15%87%d3%6f%a7%b2%1b% ...

  2. 2018蓝桥杯 省赛B题(明码)

    标题:明码汉字的字形存在于字库中,即便在今天,16点阵的字库也仍然使用广泛.16点阵的字库把每个汉字看成是16x16个像素信息.并把这些信息记录在字节中.一个字节可以存储8位信息,用32个字节就可以存 ...

  3. SpringBoot整合阿里Druid数据源及Spring-Data-Jpa

    SpringBoot整合阿里Druid数据源及Spring-Data-Jpa https://mp.weixin.qq.com/s?__biz=MzU0MDEwMjgwNA==&mid=224 ...

  4. java 子类强转父类 父类强转子类

    Java 继承 继承就是子类继承父类的特征和行为,使得子类对象(实例)具有父类的实例域和方法,或子类从父类继承方法,使得子类具有父类相同的行为. Java 子类强转父类 父类引用指向子类对象: jav ...

  5. QML学习笔记（三）-引入Font-awesome

    作者: 狐狸家的鱼 Github: 八至 1.首先得在qml文件夹下建立字体文件,将font-awesome放入进去 2.然后在main.cpp中注册字体 引入中一定要写上 引用字体 引用字体得路径一 ...

  6. 洛谷P4206 聪聪与可可

    无向简单图上给定s,t.每秒s先向t按照最短路走两步(优先节点编号较小的),然后t随机行动一步. 问期望多少秒相遇.n <= 1000 解: 这个s太蛇皮了...所以预处理一波. 然后不会,看题 ...

  7. 洛谷P4769 冒泡排序

    n <= 60w,∑n <= 200w,1s. 解:首先有个全排列 + 树状数组的暴力. 然后有个没有任何规律的状压...首先我想的是按照大小顺序来放数,可以分为确定绝对位置和相对位置两种 ...

  8. Mock2 moco框架的http协议get方法Mock的实现

    首先在Chapter7文件夹下再新建一个startGet.json startget.json代码如下,因为是get请求,所以要写method关键字,有两个,一个是有参数,一个是无参数的请求. [ { ...

  9. Codeforces Round #525 (Div. 2) C. Ehab and a 2-operation task

    传送门 https://www.cnblogs.com/violet-acmer/p/10068786.html 题意: 给定一个长度为 n 的数组a[ ],并且有两种操作: ①将前 i 个数全都加上 ...

  10. RPC与REST的区别

    https://blog.csdn.net/douliw/article/details/52592188 RPC是以动词为中心的, REST是以名词为中心的, 此处的 动词指的是一些方法, 名词是指 ...