Question

我有一个页面，我告诉maxwidth 100％，它应该根据窗口调整大小，以便比例总是相同的... 现在事实证明我不能用它来映射...（我将一页切成4个图形，我列出了一个在另一个之下）。 Matt Stow（https://github.com/stowball/jQuery-rwdImageMaps）的工具也没有用。

有人能说出我做错了吗？

<!doctype html>
<html>
    <head>
        <title>         Theater im Markthafen
        </title>    
        <link rel="stylesheet" type="text/css" href="css/default.css">  
        <style type="text/css"></style>
    </head>
    <body>
        <div id="mama">
            <div id="content">
                <div>
                    <img src="header.jpg" alt="" usemap="#Map" width="1920px" height="2240px"/>
                    <map name="Map" id="Map">
                        <area alt="" href="#was" shape="poly" shape="poly" coords="85,292,121,265,171,266,224,302,205,364,137,393,70,364" />
                        <area alt="" href="#stuecke" shape="poly" coords="46,436,49,433,337,418,351,543,51,560" />
                        <area alt="" href="#termine" shape="poly" coords="80,625,158,583,264,621,265,695,194,718,103,703,64,665" />
                        <area alt="" href="#team" shape="poly" coords="37,697,293,853,329,908,268,905,13,746" />
                        <area alt="" href="#wo" shape="rect" coords="105,887,217,900" />
                    </map>
                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
                    <script src="jquery.rwdImageMaps.min.js"></script>
                    <script>
                        $(document).ready(function(e) {
                            $('img[usemap]').rwdImageMaps();
                            $('area').on('click', function() {
                                alert($(this).attr('alt') + ' clicked');
                            });
                        });
                    </script>
                </div>   
                <div>
                    <a name="was"><img alt=" " src="was.jpg"  style=" border-width: 0px;"></a>
                </div>
                <div><a name="stuecke"><img alt=" " src="stuecke.jpg"  style="border-width: 0px;"></a>
                </div>
                <div><a name="termine"><img alt=" " src="termine.jpg"  style="border-width: 0px;"></a>
                </div>
                <div><a name="team"><img alt=" " src="team.jpg"  style="border-width: 0px;"></a>
                </div>
                <div><a name="wo"><img alt=" " src="wo.jpg" style="border-width: 0px;"></a>
                </div>
            </div>
        </div>
    </body>
</html>

CSS：

div {display:block}

body {padding: 0; margin:0;}
#content{max-width: 1920px; margin:0 auto;}

 img {
display:block;  
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;}

area {
display:block;  
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;}

我做错了什么？

响应式图形与映射相结合

0 个答案: