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/

现在只在leg元素上工作（尝试将鼠标悬停在腿上，你会看到它们正在改变红色的颜色 - 它正在将所有图像更改为新图像）。这很好用，但是现在我需要一个褪色动画（那种http://jsfiddle.net/NxJf8/，但鼠标上移回鼠标的原始来源）从普通图像到红色腿的图像，但我不知道怎么做用这改变了图像的来源。我正在考虑在已经可见的元素上创建一个图像类并给它不透明度0，当我将鼠标放在第一个元素上时淡入淡出但是你知道更好的方法吗？

Answer 1

我认为这就是你要找的东西，它有两个图像。它隐藏了一个显示另一个悬停。顺便说一句，我是从https://stackoverflow.com/a/10039286/7252292

得到的

＆＃13;

gen unit_US = V_US/Q_US
gen unit_UK = V_UK/Q_UK
gen unit_France = V_France/Q_France

＆＃13;

$('#area').hover(function() {
    $('img').fadeToggle();
});

＆＃13;

#model {
   position: absolute;
   top: 0; 
   left: 0;
}

#spodnie {
   position: absolute;
   top: 0; 
   left: 0;
  display: none;
}

＆＃13;

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

1 个答案: