지도 영역이있는 Jquery onclick

Question

내가 뭘 잘못하고 있는지 잘 모르겠습니다.

나는 다음 이미지, 텍스트와 헤더를 변경할 영역을 클릭 할 필요가 이미지 맵을 사용하고 있습니다. 가능한 한 많은 자습서를 따라 왔지만 제대로 작동하지 않습니다.

이

내가 현재 사용하고있는 방법입니다 :

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/

도움 주셔서 감사합니다. 나는이 일을 더 빠른 방법이 확신 : -/

Answer 1

있다 여기 봐 http://jsfiddle.net/sax66/4/. 이 두 영역을 클릭하면 아래 img가 변경됩니다. 희망이 당신의 목적이었습니다.

어쨌든 display:show은 CSS 속성이 아니며 display:inline 또는 내가 배우기를 권하는 다른 속성을 사용할 수 있습니다.

여러분도 보셨 겠지만 JS를 더 간단하고 덜 반복적으로 만들었습니다.

중요! 당신이 잘못

$('SafetyStopTitle').. 

처럼 JS 뭔가에 사용됩니다.

왜? 이렇게하면 jQuery는 을 SafetyStopTitle 앞에 사용해야하므로 id="SafetyStopTitle"이 아닌 <SafetyStopTitle> 태그를 찾습니다. 당신이 ID를 가진 요소를 사용하려면

사용해야 : 당신이 사용하려는 클래스와 요소 경우,

$('#SafetyStopTitle').. 

을 또는, 당신은 사용해야합니다 :

$('.SafetyStopTitle').. 

Answer 2

흠 .... 등

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

와는 전혀 show에 display:

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

Answer 3

업데이트 됨 FIDDLE 오류없이 있습니다.

jQuery를 항상 .에 의해 클래스 #를 사용하여 및 대한 식별자를 찾습니다. 그래서, 당신은 수험-을 보류해야 #을 모든 IDS 전에. 예를 들어

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

를 들어 당신은 당신이 clicks 콜백을 할당하고있는이 개 된 div를 추가해야합니다.