<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style>

    /* #venus {

        background: #f0f;

        display: inline-block;

        width: 20px;

        height: 20px;

    } */

</style>

</head>

<body>

<img src="../img/配图.png" width="145" height="126" usemap="#planetmap">

<map name="planetmap">

<area id="venus" shape="poly" coords="100,46,100,69,140,120,118,68" alt="Venus" href="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87&step_word=&hs=0&pn=1&spn=0&di=249590&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=4238142487%2C3274484296&os=3588978015%2C1121789581&simid=3466970431%2C453436039&adpicid=0&lpn=0&ln=1224&fr=&fmq=1576741759158_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fimg12.3lian.com%2Fgaoqing02%2F02%2F93%2F37.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3B4wsj451jsfrtvp76j_z%26e3BgjpAzdH3Frrp%25Ec%25lB%25BE%25E0%25bl%25b0%25E0%25B9%25Aa%25Em%25lD%25laAzdH3Frrp%25Ec%25lB%25BE%25E0%25bl%25b0%25E0%25B9%25Aa%25Em%25lD%25la-%25Ec%25bc%25bD%25Eb%25B9%25Blrrp%25Ec%25lB%25BE%25E0%25bl%25b0%25E0%25B9%25Aa%25Em%25lD%25la%25Eb%25bn%25bC%25Em%25ll%25AF%25Ec%25lB%25BE%25E0%25bl%25b0%25Eb%25AE%25BE%25Eb%25AE%25A8%25E0%25B9%25Aa%25Em%25lD%25la%25Em%25Ab%25A8%25Em%25lD%25BF%25E9%25Bb%25bB_z%26e3Bip4s&gsm=&rpstart=0&rpnum=0&islist=&querylist=&force=undefined">

    <span id="one"></span>

</map>

</body>

</html>

查看菜鸟教程中的行星图，点击金星即可查看具体信息：

https://www.runoob.com/try/try.php?filename=tryjsref_area_host

  这里金星在图片中的具体位置，可以使用标尺金星测量，如下标尺：

如果shape='poly' 点击部分为多边形时：

area标签的使用，图片中某一个部分可以点击跳转，太阳系中点击某个行星查看具体信息的更多相关文章

  1. map，area标签

    map,area标签 <img src ="planets.gif" alt="Planets" usemap ="#planetmap&quo ...

  2. 使用area标签实现标签的嵌套

    在项目中我们会碰到这种需求:即点击这个整个a标签跳转到一个页面,点击a里面的某个a再跳转到另一个页面.有人会说,这还不简单,直接a标签嵌套a标签,可是事实如此吗,看代码: <a href=&qu ...

  3. HTML图片热区 map area 标签

    实例 <img src ="planets.gif" alt="Planets" usemap ="#planetmap" /> ...

  4. map+area标签

    map标签是用于定义一个客户端的图像映射即带有可点击区域的一幅图像,配合area标签 area 元素永远嵌套在 map 元素内部.area 元素可定义图像映射中的区域 例:要实现一幅地图上鼠标点击或者 ...

  5. 如何在一个div标签里显示出另一个网页？ <iframe src=" http://www.baidu.com " width="800px" height="200px" scrolling="no" frameborder="0"> </iframe>

    如何在一个div标签里显示出另一个网页? 用在div里用iframe,就像下面的代码 <iframe src=" http://www.baidu.com " width=& ...

  6. <area> 标签

    定义和用法 <area> 标签定义图像映射中的区域(注:图像映射指得是带有可点击区域的图像). area 元素总是嵌套在 <map> 标签中. 注释:<img> 标 ...

  7. HTML <area> 标签 带有可点击区域的图像映射（图像映射指的是带有可点击区域的图像）

    例子: <img src="planets.gif" width="145" height="126" alt="Plane ...

  8. 使用<a>标签，链接到另一个页面

    使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签. 语法: <a href="目标网址" title="鼠标 ...

  9. 使用area标签模仿a标签

    众所周知,map标签可以给img图像标记热点区域,而area标签就是跟map标签一起使用的. 但area标签的作用可不止用来标记热点,因为它也有href属性,因此某些场景可以代替a标签进行页面跳转. ...

随机推荐

  1. 《算法图解》全本PDF下载附百度云链接

    作者使用Python和图画来解释算法,找了好久才找到PDF版本,末尾附百度云链接~ 作者[美]Aditya Bhargava 译者袁国忠 类别 出版 / 非虚构 出版社人民邮电出版社 / 2017-0 ...

  2. STVD使用printf输出数据错误

    使用STM8L052输出调试信息 重定向put char #include "stdio.h" //必不可缺少 char putchar (char c) { /* Write a ...

  3. GO指南练习：切片

    最近开始GO语言的学习,在GO指南中练习到切片这个题目 练习:切片 实现 Pic.它应当返回一个长度为 dy 的切片,其中每个元素是一个长度为 dx,元素类型为 uint8 的切片.当你运行此程序时, ...

  4. 【LEETCODE】68、动态规划，medium级别，题目：95、120、91

    package y2019.Algorithm.dynamicprogramming.medium; /** * @ProjectName: cutter-point * @Package: y201 ...

  5. Ubuntu 编译安装 qt-opensource 5.9

    平台 :Ubuntu 18.04 QT版本   :5.9.1 (open source) g++ : 7.3.0arm-gcc :4.8.1 qt 需要 gcc4.8版本以上   下载解压,进入对应的 ...

  6. 老司机的自信，让 CDN 加速再加速

    CDN 的存在,加快了用户的访问速度,使用户可以在不提升网速下,获得更好的访问体验.购物时,可以更快的显示商品图片:看电影时,可以随意的拖拽浏览.如果把数据资源比作是一件件包裹,那么用户的带宽就像是一 ...

  7. .NET Core入门

            .Net core MVC   如何使用 .NET Core,最基本的入行,很多博客以及官网都有的太多太多的例子,但是大部分没有人做到了真的让一个小白一步一步的去学, 我第一次接触的时 ...

  8. P2613 【模板】有理数取余 (数论)

    题目 P2613 [模板]有理数取余 解析 简单的数论题 发现并没有对小数取余这一说,所以我们把原式化一下, \[(c=\frac{a}{b})\equiv a\times b^{-1}(mod\ p ...

  9. 深入理解JVM(三) -- 对象的内存布局和访问定位

    一 对象的内存布局: 在HotSpot虚拟机中,对象在内存中存储的布局可以分为3块区域:对象头(Header),实例数据(Instance Data)和对齐填充(Padding). HotSpot的对 ...

  10. Linux的巡检命令

    # uname -a # 查看内核/操作系统/CPU信息# head -n 1 /etc/issue # 查看操作系统版本# cat /proc/cpuinfo # 查看CPU信息# hostname ...