클릭하면 이미지가 변경됩니다.

Question

이미지 맵을 여러 번 사용하려고합니다. 아이디어는 당신이 이미지 맵을 가진 그림을 가지고 있다는 것입니다. 하나의 영역을 클릭하면 (이미지 맵에 하이라이트가 있음), 링크가 거의없고, 하나를 누르면 사진이 변경됩니다. 새 사진은 원래 이미지 맵과 동일한 이미지 맵을 사용합니다 (이미지의 색상 만 변경됨).

내가 여기에 제공되는 솔루션을 시도했다 : Jquery change image on click

을하지만, 이미지 맵이 있기 때문에 작동하지 않습니다. 내 코드는 : 나는 그것을 빼앗아 때

<script type="text/javascript" src="jquery.maphilight.js"></script> 

<script type="text/javascript">$(function() { 
     $('.map').maphilight(); 
    });</script> 
<script type="text/javascript src="src="http://code.jquery.com/jquery-latest.js"></script> 

<script> 
    $(document).ready(function() { 
    $('#area1').click(function() { 
     $("#areaOne").show(); 
    }); 
    $('#area2').click(function() { 
     $("#areaTwo").show(); 
    }); 
}); 
$(function() { 
$('#areaOne').click(function(){ 
    $("#pic").attr('src',"pic2.jpg"); 
    return false; 
}); 
}); 
    </script> 


<img class="map" id="pic" src="pic.jpg" width="800" height="533" border="0" usemap="#map" /> 

<map name="map" > 
<area shape="poly" id="area1" coords="201,316,220,324,257,350,290,385,315,423,329,456,297,466,235,476,194,479,158,481,128,474,101,453,94,440,93,426,96,411,114,389,137,367,168,342" href="javascript:myFunction(1)" /> 
<area shape="poly" id="area2"coords="204,315,226,324,254,345,288,379,313,414,330,455,380,439,446,409,489,368,517,329,541,300,580,266,581,254,567,241,549,240,531,242,514,250,489,264,465,282,441,298,416,306,394,303,348,283,323,264,296,236,246,285" href="javascript:myFunction(2)"/> 
</map> 
<br /> 

<div id="pushnshow"> 
Click on Image Map and you will see<br /> 
<div id="areaOne" class="areaOne "style="display: none" >this </div> 
<div id="areaTwo" style="display: none">and this</div> 

<br /> 

문제의 usemap 것 같다 = #지도는 그림은 잘하지만, 강조하지 않고 변화하기 때문이다. 뭐가 문제 야?

Answer 1

maphilight가 실행되면 <img />을 <div class="map" />에 랩핑하고 <img />을 숨 깁니다. 그런 다음 이미지를 새 포장지 <div class="map" />의 배경으로 추가합니다. 불행하게도

$('#areaOne').click(function(){ 
    $("#pic").attr('src',"pic2.jpg"); 
    $("#pic").parent().css('background-image',"url(pic2.jpg)"); 
    return false; 
}); 

아니 테스트 케이스하지만 난 그런 당신을 위해 작동 확신 :

이에

$('#areaOne').click(function(){ 
    $("#pic").attr('src',"pic2.jpg"); 
    return false; 
}); 

을 :

는 코드가이를 변경 작동하도록합니다. 희망이 도움이됩니다!