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