Change source of image onMouseOver with fade

Question

I want to make visualisation of model on HTML5 map with onMouseOver elements on all parts of suit.

I made this:

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

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

This is working now only on legs element (try to mouse over legs and you see that they are changing color on red - it is changing all image to new). This works great but now I need an fading animation (kind of that http://jsfiddle.net/NxJf8/ but on mouse over and back to the original source on mouse out) from normal image to this image with red legs but I dont know how to do that with this changing the source of image. I was thinking about making a image class on already visible element and give it opacity 0 and fade in this when I mouse over on first element but maybe you know about better method?

Answer 1

I think this is what you are looking for, it has two images. It hides one shows the other on hover. BTW, I got this from 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>