從圖像地圖激活手風琴

我想從四個互聯網瀏覽器的圖像地圖上打開手風琴。所以如果有人點擊Firefox，它會在Firefox部分下打開手風琴。目前，如果有人點擊圖像地圖中四個瀏覽器中的一個，它將跳轉到手風琴中的鏈接，但它不會打開。然後他們必須自己點擊鏈接。從圖像地圖激活手風琴

我試過第一條指令on this page，但是我無法讓它工作。我是新的JavaScript，所以這可能只是用戶錯誤。任何幫助深表感謝。

這裏的HTML

<!--begin accordion--> 

<a id="IE"></a><button class="accordion">Internet Explorer</button> 
<div class="panel"> 
    <p>Lorem ipsum dolor sit amet...</p> 
</div> 

<a id="Firefox"></a><button class="accordion">Firefox</button> 
<div class="panel"> 
    <p>Lorem ipsum dolor sit amet...</p> 
</div> 

<a id="Chrome"></a><button class="accordion">Chrome</button> 
<div class="panel"> 
    <p>Lorem ipsum dolor sit amet...</p> 
</div> 

<a id="Safari"></a><button class="accordion">Safari</button> 
<div class="panel"> 
    <p>Lorem ipsum dolor sit amet...</p> 
</div> 

<!--end accordion-->`

的MAP

<p class="browers"><img src="_assets/browsers.jpg" alt="Top Internet Browsers" width="375" height="94" usemap="#Map"> 
    <map name="Map"> 
    <area shape="rect" coords="13,11,82,86" href="#IE" target="_self" alt="Internet Explorer"> 
    <area shape="rect" coords="104,12,176,85" href="#Firefox" target="_self" alt="Firefox"> 
    <area shape="rect" coords="198,12,269,85" href="#Chrome" target="_self" alt="Chrome"> 
    <area shape="rect" coords="288,13,360,83" href="#Safari" target="_self" alt="Safari"> 
    </map> 
    </p>

腳本

<script> 
var acc = document.getElementsByClassName("accordion"); 
var i; 

for (i = 0; i < acc.length; i++) { 
    acc[i].onclick = function(){ 
     this.classList.toggle("active"); 
     this.nextElementSibling.classList.toggle("show"); 
    } 
} 
</script>

來源

2016-09-26 Juanita

您可在圖像映射onclick屬性添加到形狀。

<p class="browers"><img src="_assets/browsers.jpg" alt="Top Internet Browsers" width="375" height="94" usemap="#Map"> 
    <map name="Map"> 
    <area onclick="activateAccordion('IE')" shape="rect" coords="13,11,82,86" href="#IE" target="_self" alt="Internet Explorer"> 
    <area onclick="activateAccordion('Firefox')" shape="rect" coords="104,12,176,85" href="#Firefox" target="_self" alt="Firefox"> 
    <area onclick="activateAccordion('Chrome')" shape="rect" coords="198,12,269,85" href="#Chrome" target="_self" alt="Chrome"> 
    <area onclick="activateAccordion('Safari')" shape="rect" coords="288,13,360,83" href="#Safari" target="_self" alt="Safari"> 
    </map> 
    </p>

來源

2016-09-26 02:23:31

謝謝，加布裏埃爾......我試過了，但不幸的是，它沒有什麼區別。仍在努力:)。 – Juanita

從圖像地圖激活手風琴

回答

相關問題