如何從圖像映射href激活jquery手風琴？

我搜索了所有，並沒有找到我的特定問題的答案。如何從圖像映射href激活jquery手風琴？

我有一個簡單的jquery手風琴，我希望能夠從內部鏈接激活一個特定的部分。該鏈接來自圖像地圖，因此觀看者點擊圖像的某個區域並激活手風琴的該部分。似乎很簡單，但我有一段時間與它。

因此，例如我到目前爲止有：

$(function() { 
$("#myaccordion").accordion({ 
    active: false, 
    autoHeight: false, 
    navigation: true   
}); 
}); 

<img src="Map.png" name="map" width="650" height="336" usemap="#hotspot" id="mymap" /> 

<map name="hotspot" id="hotspot"> 
    <area shape="poly" coords="251,125,241,181,287" href="#section1" target="_self" alt="section1" /> 
    <area shape="poly" coords="155,223,133,194,96" href="#section2" target="_self" alt="section2" /> 
</map> 

<div id="myaccordion"> 
<h3><a href="#section1">Section 1</a></h3> 
<div> 
    <p> 
    Section 1 content 
    </p> 
</div> 
<h3><a href="#section2">Section 2</a></h3> 
<div> 
    <p> 
    Section 2 content 
    </p> 
</div>

我知道基於什麼我已經能夠找到這段代碼是長的路，從什麼它需要，但是這是最我現在可以弄清楚。

我已經能夠基於其他線程得到最接近的是使用href＃從外部鏈接激活一個部分，但我需要這種情況發生而無需重新加載頁面。

來源

2011-03-23 Justin

通過給你的章節標題id屬性，你可以簡單地click()他們，它會激活下來下降的那部分：

<h3 id="acc_1"><a href="#section1">Section 1</a></h3> 
<div> 
    <p> 
    Section 1 content 
    </p> 
</div> 
<h3 id="acc_2"><a href="#section2">Section 2</a></h3> 
.... <!-- and so forth -->

在你area標籤，你可以添加onclick屬性，像這樣：

<area shape="poly" onclick="$('#acc_1').click();" coords="251,125,241,181,287" href="#section1" target="_self" alt="section1" />

來源

2011-03-23 22:34:43 typeof

這很好。謝謝！ – Justin 2011-03-25 05:57:54

我想（但我不確定），我知道你想達到什麼目的。你爲什麼不使用'trigger'。這將模擬一個事件。例如，如果您想觸發#objectA當您懸停#objectB一個點擊，你會使用：

$('#obectB').bind('hover', function() { 
    $('#objectA').trigger('click'); 
});

在你的情況下，點擊該鏈接時，你模擬無論什麼對象事件會使你的手風琴做你想做的事。

來源

2011-03-23 22:29:21 rsplak

添加事件會中斷圖像映射。 – 2011-03-23 22:49:10

調用JavaScript從外形：

<area shape="poly" coords="251,125,241,181,287" href="javascript:yourFunction(someVariable)" target="_self" alt="section1" />

來源

2011-03-23 22:35:43

如何從圖像映射href激活jquery手風琴？

回答

相關問題