Question

我已经尝试了幻灯片/幻灯片的每个变体/但是当我在地图上点击Kings Cross时，我似乎无法显示细节面板

MAP HTML

<img src="https://imgur.com/p4z9t0T.png" id="Zone1TubeMap" alt="Zone 1 
Tube Map" usemap="#Map" />
<map name="Map" id="Map">
<area id="KX" alt="Kings Cross St Pancras" title="" href="#" 
shape="rect" coords="474,58,488,111"/>
<area alt="Baker Street" title="" href="#" shape="rect" 
coords="221,94,252,124" />
<area alt="South Kensington" title="" href="#" shape="rect" 
coords="131,359,146,384" />
<area alt="Oxford Circus" title="" href="#" shape="rect" 
coords="287,208,303,225" />
<area alt="Embankment" title="" href="#" shape="rect" 
coords="383,370,410,398" />
<area alt="London Bridge" title="" href="#" shape="rect" 
coords="594,385,608,402" />
<area alt="Liverpool Street" title="" href="#" shape="rect" 
coords="682,156,700,192" />
<area alt="Old Street" title="" href="#" shape="rect" 
coords="593,104,613,124" />
<area alt="Leicester Square" title="" href="#" shape="rect" 
coords="380,268,398,283" />
<area alt="Paddington" title="" href="#" shape="rect" 
coords="47,91,89,145" />
</map>

PANEL HTML

<div class="boxes">
<h1> Kings Cross St Pancras | Coffee Shop </h1>
<small> Details about the Coffee shop </small>
<img src="https://ats-alltopstartups.netdna-ssl.com//wp-
content/uploads/2016/12/How-to-Open-a-Coffee-Shop-.png" width="340px" 
height="195px"> </div>
</div>

PANEL CSS

.boxes {
background-color: white;
border: solid red 5px;
margin-bottom: 18px;
color: rgb(0,5,142);
opacity: 1; 
}

Answer 1

从问题中你不清楚你想要什么样的幻灯片，但下面的代码工作正常。您可以根据需要更改.box div的样式

<!DOCTYPE html>
<html>
<head>
    <title> Narrabundah College Fashion Show </title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <style type="text/css">
        .boxes {
        background-color: white;
        border: solid red 5px;
        margin-bottom: 18px;
        color: rgb(0,5,142);
        opacity: 1;
        display: none;
        }
    </style>
    <script>
        $(document).ready(function(){
            $("#KX").click(function(){
                $('.boxes').slideToggle();
            });
        });
    </script>
</head>
<body>
    <!-- Media Video -->
   <img src="https://imgur.com/p4z9t0T.png" id="Zone1TubeMap" alt="Zone 1 
    Tube Map" usemap="#Map" />
        <map name="Map" id="Map">
        <area id="KX" alt="Kings Cross St Pancras" title="" href="#" 
        shape="rect" coords="474,58,488,111"/>
        <area alt="Baker Street" title="" href="#" shape="rect" 
        coords="221,94,252,124" />
        <area alt="South Kensington" title="" href="#" shape="rect" 
        coords="131,359,146,384" />
        <area alt="Oxford Circus" title="" href="#" shape="rect" 
        coords="287,208,303,225" />
        <area alt="Embankment" title="" href="#" shape="rect" 
        coords="383,370,410,398" />
        <area alt="London Bridge" title="" href="#" shape="rect" 
        coords="594,385,608,402" />
        <area alt="Liverpool Street" title="" href="#" shape="rect" 
        coords="682,156,700,192" />
        <area alt="Old Street" title="" href="#" shape="rect" 
        coords="593,104,613,124" />
        <area alt="Leicester Square" title="" href="#" shape="rect" 
        coords="380,268,398,283" />
        <area alt="Paddington" title="" href="#" shape="rect" 
        coords="47,91,89,145" />
    </map>

     <div class="boxes">
        <h1> Kings Cross St Pancras | Coffee Shop </h1>
        <small> Details about the Coffee shop </small>
        <img src="https://ats-alltopstartups.netdna-ssl.com//wp-
        content/uploads/2016/12/How-to-Open-a-Coffee-Shop-.png" width="340px" 
        height="195px">
    </div>
</body>
</html>

JQuery onClick - 当点击某个区域时，让Panel从地图下方向外滑动吗？

1 个答案: