jquery onclick與地圖區域

我正在使用需要單擊區域的圖像映射，然後更改圖像，文本和標題。我儘可能多地學習了一些教程，但它不起作用。

這是我目前使用的方法：

CSS：

#SafetyStopTitle {display:show} 
#SafetyStopText {display:show;} 
#SafetyStopImg {display:show;} 
#PenStyleActivationTitle {display:none;} 
#PenStyleActivationText {display:none;} 
#PenStyleActivationImg {display:none;} 
#ErgonomicGripText {display:none;} 
#ErgonomicGripTitle {display:none;} 
#ErgonomicGripImg {display:none;} 
#BladeActivationTitle {display:none;} 
#BladeActivationText {display:none;} 
#BladeActivationImg {display:none;} 
#TaperedTipTitle {display:none;} 
#TaperedTipText {display:none;} 
#TaperedTipImg {display:none;} 
#SafetySutureGrooveTitle {display:none;} 
#SafetySutureGrooveText {display:none;} 
#SafetySutureGrooveImg {display:none;} 
#BladeAvailabilityTitle {display:none;} 
#BladeAvailabilityText {display:none;} 
#BladeAvailabilityImg {display:none;} 
#SafetyStopArea{} 
#PenStyleActivationArea{} 
#ErgonomicGripArea{} 
#BladeActivationArea{} 
#TaperedTipArea{} 
#SafetySutureGrooveArea{} 
#BladeAvailabilityArea{}

JQuery的

$("PenStyleActivationArea").click(function(){ 
    $("SafetyStopTitle").css(「display」, 「none」); 
    $("SafetyStopText").css(「display」, 「none」); 
    $("SafetyStopImg").css(「display」, 「none」); 
    $("PenStyleActivationTitle").css(「display」, 「show」); 
    $("PenStyleActivationText").css(「display」, 「show」); 
    $("PenStyleActivationImg").css(「display」, 「show」); 
    $("ErgonomicGripText").css(「display」, 「none」); 
    $("ErgonomicGripTitle").css(「display」, 「none」); 
    $("ErgonomicGripImg").css(「display」, 「none」); 
    $("BladeActivationTitle").css(「display」, 「none」); 
    $("BladeActivationText").css(「display」, 「none」); 
    $("BladeActivationImg").css(「display」, 「none」); 
    $("TaperedTipTitle").css(「display」, 「none」); 
    $("TaperedTipText").css(「display」, 「none」); 
    $("TaperedTipImg").css(「display」, 「none」); 
    $("SafetySutureGrooveTitle").css(「display」, 「none」); 
    $("SafetySutureGrooveText").css(「display」, 「none」); 
    $("SafetySutureGrooveImg").css(「display」, 「none」); 
    $("BladeAvailabilityTitle").css(「display」, 「none」); 
    $("BladeAvailabilityText").css(「display」, 「none」); 
    $("BladeAvailabilityImg").css(「display」, 「none」); 
});

地圖：

<map id="imgmap201310792213" name="imgmap201310792213"> 
    <area title="" alt="Safety Stop" coords="533,94,14" shape="circle" href="#/SafetyStop" /> 
    <area title="" alt="Pen Style Activation" coords="447,179,14" shape="circle" href="#/PenStyleActivation" /> 
    <area title="" alt="Broad Sturdy Ergonomic Grip" coords="386,219,14" shape="circle" href="#/ErgonomicGrip" /> 
    <area title="" alt="No Look, No Reposition, Passive or Active Blade Retraction" coords="232,312,15" shape="circle" href="#/BladeActivation" /> 
    <area title="" alt="Tapered For Better Blade Visibility" coords="170,401,16" shape="circle" href="#/TaperedTip" /> 
    <area title="" alt="Safety Suture Trimming Groove" coords="136,413,14" shape="circle" href="#/SafetySutureGroove" /> 
    <area title="" alt="Blade Availability" coords="107,431,15" shape="circle" href="#/BladeAvailability" /> 
    <area id="SafetyStopArea" coords="384,85,474,97" shape="rect" href="#/SafetyStop" /> 
    <area id="PenStyleActivationArea" coords="473,171,554,200" shape="rect" href="#/PenStyleActivation" /> 
    <area id="ErgonomicGripArea" coords="242,136,352,160" shape="rect" href="#/ErgonomicGrip" /> 
    <area id="BladeActivationArea" coords="12,235,187,279" shape="rect" href="#/BladeActivation" /> 
    <area id="BladeAvailabilityArea" coords="21,308,144,368" shape="rect" href="#/BladeAvailability" /> 
    <area id="TaperedTipArea"coords="240,387,371,415" shape="rect" href="#/TaperedTip" /> 
    <area id="SafetySutureGrooveArea" coords="141,442,261,468" shape="rect" href="/#/SafetySutureGroove" /> 
    </map>

這裏擺弄我使用： http://jsfiddle.net/timlcooley/sax66/2/

感謝您的幫助。我相信有這樣做的更快的方法： -/

來源

2013-11-24 Tim Cooley

這裏看看 http://jsfiddle.net/sax66/4/。點擊這兩個區域，下面的img會被更改。希望這是你的目的:)

無論如何display:show是不是一個CSS屬性，你可能想要使用display:inline或其他一些我建議你學習的屬性。

正如你所看到的，我讓你的JS更簡單，重複性更低。

重要！ 你在你的JS使用的東西像

$('SafetyStopTitle')..

這是不對的。

爲什麼？ 這樣，jQuery將尋找標籤<SafetyStopTitle>而不是id="SafetyStopTitle"，所以你必須在SafetyStopTitle之前使用#。

如果你想使用的元素有一個ID，你必須使用：

$('#SafetyStopTitle')..

或者，如果你想使用一個類元素，你必須使用：

$('.SafetyStopTitle')..

來源

2013-11-24 21:46:23

謝謝！那是完美的。 –

@TimCooley好！檢查「重要」部分。因爲它對你真的很有用:) –

嗯....

$("#SafetyStopTitle").css("display", "none");

等

並沒有show在display:

#SafetyStopTitle {display:block /* or whatever */}

來源

2013-11-24 21:44:43 reyaner

Your updates FIDDLE沒有錯誤。

jquery始終使用#來查找ID，對於.來說，查找類ID。所以，你應該在所有的ID之前準備好#。對於如

replace $('eleid') by $('#ele-id')

您必須添加兩個div您想爲其分配clicks回調。

來源

2013-11-24 22:10:22 softvar

jquery onclick與地圖區域

回答

相關問題