• 【html】百度经常使用的 map标签


    一、含义

    带有可点击区域的图像映射

    二、浏览器支持情况

    所有主流浏览器都支持

    三、注意事项

    •    area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
    • <img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性(取决于浏览器),所以我们应同时向 <map> 添加 id 和 name 属性。

    四、属性

    • id           必填       为 map 标签定义唯一的名称。
    • name    可选       为 image-map 规定的名称。 

    五、实例

    <!doctype html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>map 带有可点击区域的图像映射</title>
            <style>
                #lg{
                    text-align: center;
                }
            </style>
        </head>
        <body>
            <div id="lg">
                <img hidefocus="true"
                    class="index-logo-src"
                    src="https://www.baidu.com/img/2019dong_33c09d45f5e85ae961a3852d8769f124.gif"
                    width="270"
                    height="129"
                    usemap="#mp">
                <map name="mp">
                    <area style="outline:none;"
                    hidefocus="true"
                    shape="rect"
                    coords="0,0,270,129"
                    href="https://www.baidu.com/s?wd=%e5%85%83%e6%97%a6&sa=ire_dl_gh_logo&rsv_dl=igh_logo_pcs"
                    target="_blank"
                    title="再见2019,你好2020">
                </map>
            </div>
        </body>
    </html>

    六、效果

  • 相关阅读:
    Java统计程序运行时间(转)
    有符号定点数的表示方法
    移位运算符
    索引
    self与super的区别(转)
    Java经典题型(未完成)
    ObjectiveC 的 self 和 super 详解
    边界计算与不对称边界
    各种排序总结
    运算符的优先级
  • 原文地址:https://www.cnblogs.com/websmile/p/12125035.html
Copyright © 2020-2023  润新知