Jquery onclick与地图区域

Question

I am not sure what I am doing wrong.

I am using an image map that needs to click an area then change an image, the text and the header. I have followed as many tutorials as I can, but it isn't working.

This is the method I am currently using:

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:

  <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>

here is the fiddle am using: http://jsfiddle.net/timlcooley/sax66/2/

Thanks for the help. I am sure there is a faster way of doing this :-/

Answer 1

Here look http://jsfiddle.net/sax66/4/ . Clicking on those 2 areas the img below gets changed. Hope that was your purpose :)

Anyway display:show isn't a CSS property, you may want to use display:inline or some other property which I suggest you to learn.

As you may also see, I made your JS more simple and less repetitive.

IMPORTANT! You used in your js something like

$('SafetyStopTitle')..

This is wrong.

Why? This way, jQuery will look for the <SafetyStopTitle> TAG and NOT FOR the id="SafetyStopTitle" so you have to use # before SafetyStopTitle .

If you want to use an element with an ID you have to use:

$('#SafetyStopTitle')..

Or, if you want to use and element with a CLASS, you have to use:

$('.SafetyStopTitle')..

Answer 2

hmm ....

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

etc.

and there is no show in display:

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

Answer 3

Your Updated FIDDLE with no errors.

Jquery always look for ids by using # and for classes by . . So, you should prep-pend # before all the ids. For eg

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

You have to add two divs for which you're assigning the clicks callbacks.