首页 > Web开发 > 详细

今天我们谈一下HTML标签中的<map>标签的用法和使用场景

时间:2017-11-20 21:28:45      阅读:222      评论:0      收藏:0      [点我收藏+]

首先我们看下这个标签到底是干什么的!

W3C的定义:

技术分享图片

然后兼容性:

技术分享图片

然后与之配套使用的另一个标签:

<area/>规定其区域;

我们来看看<map>标签支不支持全局属性;=====》

技术分享图片

发现它是支持全局属性的;

使用方法:其实<map>只是给浏览器做了一个说明,我要对一个图片创建一个区域映射;所以我们还得有一张图片指向<map>标签。作为指向那么是唯一的;所以我们可以设置id与图片对应;还可以设置name与其进行对应;

如下code;

技术分享图片

技术分享图片
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Map标签的用法</title>
        <style type="text/css">
            div{
                width: 800px;
                height: 800px;
                position: relative;
                margin: 0 auto;
            }
        </style>
    </head>

    <body>
        <div class="CsOuterdiv">
            <h2>Map标签的用法</h2>
            <img src="../../img/Sky.jpg" style="width: 600px;height: auto;" />
            <map></map>
        </div>
    </body>

</html>
View Code

//首先注意:<area/>是个单标签;

它的属性有;

技术分享图片

技术分享图片
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Map标签的用法</title>
        <style type="text/css">
            div {
                width: 800px;
                height: 800px;
                position: relative;
                margin: 0 auto;
            }
        </style>
    </head>

    <body>
        <div class="CsOuterdiv">
            <h2>Map标签的用法</h2>
            <img src="../../img/Sky.jpg" style="width: 600px;height: auto;" usemap="#MyfirstMap" border="0" alt="testimg" />
            <map id="MyfirestMap" name="MyfirstMap">
                <area shape="circle" coords="180,139,14" href ="http://www.baidu.com" alt="百度" />
                 <area shape="circle" coords="129,161,10" href ="http://jingdong.com" alt="京东" />
                  <area shape="rect" coords="0,0,110,260" href ="http://taobao.com" alt="淘宝" />
            </map>
        </div>
    </body>

</html>
View Code

 

今天我们谈一下HTML标签中的<map>标签的用法和使用场景

原文:http://www.cnblogs.com/alideai/p/7868112.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!