zoukankan      html  css  js  c++  java
  • 【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>

    六、效果

  • 相关阅读:
    面试常见问题(2)-数据同步
    面试常见问题-SQL
    4TH PROFILE SOURCE IN SHAREPOINT 2013′S PEOPLE PICKER
    InfoPath代码切换视图
    Winform 的小技巧
    Sharepoint Workflow模板激活
    Hadoop介绍
    InfoPath的常见处理办法
    InfoPath的常见问题---连接外部数据源提示
    flask表单操作
  • 原文地址:https://www.cnblogs.com/websmile/p/12125035.html
Copyright © 2011-2022 走看看