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>

    六、效果

  • 相关阅读:
    Vue--路由
    Vue -- 双向过滤器去除html标签
    SQL表的基本操作
    .NET面试题
    MVC Razor
    MVC aspx
    CSS修改滚动条样式
    C# 制作图片验证码
    上传图片加水印
    eclipse常用快捷键
  • 原文地址:https://www.cnblogs.com/websmile/p/12125035.html
Copyright © 2011-2022 走看看