change class on image for image map

Question

I am aware that a lot of similar questions has been asked on this matter, however I seem to not be able to put any of the solutions to use.. i have this imagemap located in a div: (never mind the coords - they are not correct right now)

<div class="spinner">
 <img src="test.gif"  alt="spinner" id="map" class="map" usemap="#spinnermap">

 <map name="spinnermap">
   <area shape="poly" coords="0,0,82,126" href="" id="systemmap" alt="System">
   <area shape="poly" coords="90,58,3" href="" id="rolemap" alt="Role">
   <area shape="poly" coords="124,58,8" href="" id="phasemap" onclick="createTable();" alt="Phase">
 </map>
</div>

Now, when the last poly is clicked (or any, but just for e.g) i need the map img to have a different css class - so that class="map" is replaced by class="phasemap". (I have a sprite for this in the css, you see :))

I have tried this:

$('#phasemap').click(function(){
    $(this).find("#map").toggleClass('phasemap map');
}); 

But it doesn't seem to do the trick.. I am sure I have a typo or more - I am very new to this js/jq thingy :)

Edit: I just realized that maybe it means something that the map is created in JS.. So i kinda also need to know where to put the jq stuff (below the map or where in the .js file do i stick this? :))

my JS:

function createSpinner() {
    var spinner = '<div class="spinner">';
    spinner += '<img src="filler.png" id="map" class="map" alt="Spinner"  Usemap="#spinnermap" border="0" />';

    spinner += '<map name="spinnermap">';
    spinner += '<area shape="poly" coords="5,25 51,60 110,25 51,2 8,25" href="#" onclick="createTable();" alt="Role">';
    spinner += '<area shape="poly" coords="5,25 8,66, 15,89 55,112 55,66 5,25"  href="#" onclick="createTable();" alt="System">';
    spinner += '<area shape="poly" coords="55,112 89,108 118,59 110,25 51,66 55,112" id="phasemap" href="#" onclick="createTable();" alt="Phase">';
    spinner += '</map>';
    spinner += '</div>';

    return spinner;
}

$('#phasemap').click( function() {
    $("#map").toggleClass('phasemap map');
    return false;
}); 

and the css:

.map {
    width: 117px;
    height: 119px;
    background: url('spinner.png');
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

.rolemap {
    background-position: 0px 0px;
}   

.systemmap {
    background-position: 0px -124px;
}

.phasemap {
    background-position: 0px -248px;
}

Answer 1

You hav to use $('#map') as selector not $(this).find("#map") as your img is outside of the phasemap Try this,

$('#phasemap').click(function(){
   $("#map").toggleClass('phasemap map');
   // Use #map directly it is not children of #phasemap
});// don't use colon here

Updated, you have to use return false; after toggleClass to prevent default working of area like,

$('#phasemap').click(function(){
   $("#map").toggleClass('phasemap map');
   return false;// use return false or event.preventDefault() here
});

In the demo you can see in console the image class is toggling.

From you edited question you should use jquery version >= 1.9 an use on() like,

$(document).on('click','#phasemap',function(){
   $("#map").toggleClass('phasemap map');
   return false;
}); 

And you to check createSpinner() works or not. by inspecting it in firebug