zoukankan      html  css  js  c++  java
  • map+area标签

    map标签是用于定义一个客户端的图像映射即带有可点击区域的一幅图像,配合area标签
    area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域
    例:要实现一幅地图上鼠标点击或者悬停在某个区域,可以显示出该区域的相关介绍,就需要
    这样的map+area标签的组合
    <img> 标签中的 usemap 属性可引用 <map> 中的 id 或 name 属性(由浏览器决定),所以我们需要同时向 <map> 添加 id 和 name 两个属性。


    area标签中的属性:1.shape:定义该区域的形状
    2.coords:可点击区域(对鼠标敏感区域)的坐标
    3.href:定义该区域的URL即类似于a标签的用法提供链接
    4.alt类似于img里的alt定义该区域的替换文本
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>map和area标签</title>
     6 </head>
     7 <body>
     8 
     9 <img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
    10 
    11 <map name="planetmap" id="planetmap">
    12     <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
    13     <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
    14     <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
    15  
    16 </map>
    17 </body>
    18 </html>
  • 相关阅读:
    Leetcode 349. Intersection of Two Arrays
    hdu 1016 Prime Ring Problem
    map 树木品种
    油田合并
    函数学习
    Leetcode 103. Binary Tree Zigzag Level Order Traversal
    Leetcode 102. Binary Tree Level Order Traversal
    Leetcode 101. Symmetric Tree
    poj 2524 Ubiquitous Religions(宗教信仰)
    pat 1009. 说反话 (20)
  • 原文地址:https://www.cnblogs.com/myErebos/p/8588220.html
Copyright © 2011-2022 走看看