通過淡入淡出在onMouseOver上更改圖像源

Question

我想在西裝的所有部分上使用onMouseOver元素使HTML5地圖上的模型可視化。

我做的：
的HTML

<map name="wizualizacja">
<area shape="poly" coords="119,800,114,758,111,737,111,736,106,719,102,706,98,689,95,670,92,657,91,639,93,637,93,636,96,636,98,636,100,636,101,636,103,636,104,636,106,635,106,635,107,634,107,635,108,635,109,636,111,637,113,637,114,637,116,637,117,637,119,637,120,637,122,637,124,637,126,637,128,638,130,638,133,638,136,638,140,638,142,638,144,637,145,635,147,634,148,631,149,630,151,618,153,609,153,601,154,599,156,605,159,609,160,611,161,613,162,614,164,616,168,619,173,621,177,622,181,623,185,623,187,623,188,623,188,634,267,634,267,620,285,620,285,642,285,643,285,644,286,644,286,646,285,667,284,675,283,691,283,698,282,701,282,705,282,707,282,720,282,727,282,730,282,733,283,739,283,742,283,743,282,753,282,756,282,758,283,760,284,766,285,769,285,771,285,774,285,776,286,778,286,779,286,781,286,787,287,789,287,792,288,794,288,796,288,798,288,800" alt="spodnie" title="spodnie" onMouseOver="changeImage()" onMouseOut="original()"/>
</map>

JS

normalny = new Image(384,800)
normalny.src = "http://tive.pl/model.png"

spodnie = new Image(384,800)
spodnie.src = "http://tive.pl/spodnie.png"

function changeImage(){
document.wiz.src = spodnie.src;return true;
}

function original(){
document.wiz.src = normalny.src;return true;
} 

https://jsfiddle.net/kab58u8d/1/

現在僅在腿元素上有效（嘗試將鼠標懸停在腿上，您會看到它們正在將顏色更改為紅色-它將所有圖像更改為新圖像）。 這很好用，但是現在我需要從正常圖像到帶有紅色腿的圖像（該圖像為http://jsfiddle.net/NxJf8/，但在鼠標懸停並在鼠標移出時返回原始源），但我不需要知道如何通過更改圖像源來做到這一點。 我正在考慮在已經可見的元素上創建圖像類，並在將鼠標懸停在第一個元素上時將其賦予不透明度0並在其中淡入，但是也許您知道更好的方法？

Answer 1

我認為這是您要尋找的東西，它有兩個圖像。 它隱藏一個顯示，另一個顯示懸停。 順便說一句，我是從https://stackoverflow.com/a/10039286/7252292獲得的

 $('#area').hover(function() { $('img').fadeToggle(); }); 

 #model { position: absolute; top: 0; left: 0; } #spodnie { position: absolute; top: 0; left: 0; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img id="model" name="wiz" src="http://tive.pl/model.png" usemap="#wizualizacja"/> <img id="spodnie" name="wiz" src="http://tive.pl/spodnie.png" usemap="#wizualizacja"/> <map name="wizualizacja"> <area shape="poly" coords="119,800,114,758,111,737,111,736,106,719,102,706,98,689,95,670,92,657,91,639,93,637,93,636,96,636,98,636,100,636,101,636,103,636,104,636,106,635,106,635,107,634,107,635,108,635,109,636,111,637,113,637,114,637,116,637,117,637,119,637,120,637,122,637,124,637,126,637,128,638,130,638,133,638,136,638,140,638,142,638,144,637,145,635,147,634,148,631,149,630,151,618,153,609,153,601,154,599,156,605,159,609,160,611,161,613,162,614,164,616,168,619,173,621,177,622,181,623,185,623,187,623,188,623,188,634,267,634,267,620,285,620,285,642,285,643,285,644,286,644,286,646,285,667,284,675,283,691,283,698,282,701,282,705,282,707,282,720,282,727,282,730,282,733,283,739,283,742,283,743,282,753,282,756,282,758,283,760,284,766,285,769,285,771,285,774,285,776,286,778,286,779,286,781,286,787,287,789,287,792,288,794,288,796,288,798,288,800" alt="spodnie" title="spodnie" id="area"/> </map>