从图像地图激活手风琴

我想从四个互联网浏览器的图像地图上打开手风琴。所以如果有人点击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

从图像地图激活手风琴

回答

相关问题