Изменить источник изображения onMouseOver с fade

Question

Я хочу сделать визуализацию модели на карте HTML5 с элементами 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/

Сейчас это работает только на ногах элемента (попробуйте мыши над ногами и лет u видеть, что они меняют цвет на красный - он меняет все изображение на новое). Это отлично работает, но теперь мне нужна затухающая анимация (вид этого 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>