通过淡入淡出在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>