單擊時更改圖像，包含圖像地圖

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"); 
    return false; 
}); 

這樣：

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

沒有測試用例不幸，但我相信會爲你工作。希望能幫助到你！