javascript - 使用淡入淡出更改 onMouseOver 上的图像源

Question

我想在 HTML5 map 上使用 onMouseOver 元素在西装的所有部分上可视化模型。

我做了这个:
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>