Javascript 使用淡入淡出更改MouseOver上的图像源

我想在HTML5地图上用onMouseOver元素在衣服的各个部分对模型进行可视化

我做了这个：
HTML

---

这现在只在legs元素上工作（尝试将鼠标移到legs上，您会看到它们正在更改红色的颜色-它正在将所有图像更改为新的）。这是伟大的作品，但现在我需要一个淡入淡出的动画（有点像，但在鼠标上，并回到原来的来源，鼠标出）从正常的图像到这个图像与红色的腿，但我不知道如何做到这一点，改变图像的来源。我想在已经可见的元素上创建一个图像类，当我在第一个元素上鼠标悬停时，给它不透明度0，然后在这个元素中淡入淡出，但也许你们知道更好的方法吗？

我想这就是你们要找的，它有两个图像。它隐藏一个，并显示另一个悬停。顺便说一句，我是从

$（'#区域'）。悬停（函数（）{
$（'img'）.fadeToggle（）；
});
#模型{
位置：绝对位置；
排名：0；
左：0；
}
#斯波德尼{
位置：绝对位置；
排名：0；
左：0；
显示：无；
}

我看到了这个解决方案，但它可以在两个图像上使用last:child标记作为要更改的图像，并且只在这两个图像之间淡入淡出。我需要淡出我所有的图像区域（大约10个）…我使用了你的片段，通过稍微修改它，我得到了我正在考虑的效果。两个图像之间没有白色过渡。现在查看jsfiddle。谢谢太好了，很高兴我能帮忙
<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>

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