Question

我知道在这个问题上已经提出了很多类似的问题，但是我似乎无法使用任何解决方案。我有这个imagemap位于div :(不要介意coords - 他们现在不正确）

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

现在，当点击最后一个多边形（或任何，但仅仅是为了例如）时，我需要地图img具有不同的css类 - 以便class =“map”被class =“phasemap”替换。（我在css中有一个精灵，你看：））

我试过这个：

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

但它似乎没有诀窍..我确信我有一个错字或更多 - 我对这个js / jq的东西很新：）

编辑：我刚才意识到这可能意味着地图是用JS创建的。所以我还需要知道在哪里放jq的东西（在地图下面或.js文件中的哪个地方我坚持这个？：））

我的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;
});

和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

由于$('#map')位于selector之外，您将$(this).find("#map")用作img而不是phasemap 试试这个，

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

已更新，您必须在return false;之后使用toggleClass来阻止area的默认工作，

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

在 demo 中，您可以在console中看到image class为toggling。

你edited question应该使用jquery version >= 1.9使用on()之类的，

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

你要检查createSpinner()是否有效。通过在firebug

中检查它

Answer 2

var a=0;
function yourfunctionname(){
  if(a == 0){
   $("#map").attr('class','');
   $("#map").attr('class','phasemap map');
   a=1;
   return false;
  }
  else{
   $("#map").attr('class','');
   $("#map").attr('class','map');
   a=0;
   return false;
   }
 // your function code 
}

更改图像映射的图像类

2 个答案: