Imageflip JavaScript不翻转

我有这个和平的Javascript代码。我有一张照片，我想在mouseover上执行一个imageflip。在浏览器中显示它，显示原始图像。当我将鼠标放在指定区域上时，光标变为手，但图像不会翻转。因此，它识别定义的区域（带有坐标创建的多边形），但它不会翻转。Imageflip JavaScript不翻转

<html> 
<head> 
</head> 
<body> 

<img name="juego_paramo" src=paramo_plantas_original.gif usemap="#paramo"> 


<map name="paramo"> 
<area shape="poly" coords="0,161,4,161,4,162,12,162,12,163,19,163,26,165,34,166,45,168,52,170,62,174,73,177,82,180,91,184,103,188,112,192,122,196,133,202,142,207,152,212,162,216,172,221,180,224,186,227,193,230,197,233,0,233,0,161" 
href="#" alt="helecho", onMouseOver="resaltarHelecho", onMouseOut="originalJuego"> 
<area shape="default" nohref> 
</map> 


<script> 

//preload the images 
original = new Image(698,233) 
originale.src = "paramo_plantas_original.gif" 

helechoResaltado = new Image(698,233) 
helecho.src ="paramo_plantas_con_mouse_blanco.gif" 

//JS function to enlarge the image 
function resaltarHelecho() { 
          document.juego_paramo.src=helechoResaltado; 
            return true; 
            } 

function originalJuego() { 
            document.juego_paramo.src=original; 
            return true; 
            } 

</script> 
</body> 
</html>

我找不到错误。任何提示在哪里寻找它？

来源

2014-10-03 Maccaroni

脚注：在HTML中的onMouseOver应该全部小写：'onmouseover' – myfunkyside 2014-10-03 18:38:14

@myfunkyside很好的知道，但这并没有诀窍... – Maccaroni 2014-10-03 18:46:30

它应该看起来像这样？ http://jsfiddle.net/matthias_h/wfyw63c4/ – 2014-10-03 18:49:51

有你的HTML一些错误，以及在你的JavaScript：

original = new Image(698,233) 
originale.src = "paramo_plantas_original.gif"

新形象的名称应该是相同的，例如

originale = new Image(698,233) 
originale.src = "paramo_plantas_original.gif"

使用纯javascript，在您的函数中更改图像的来源将不会像你这样做，例如，这里：

document.juego_paramo.src=original;

这应该是

document.getElementById('juego_paramo').src = originale.src;

（所提供的原始图像具有一个id = “juego_paramo” 我刚添加方便起见）。

你<area>与属性alt="helecho", onMouseOver="resaltarHelecho", onMouseOut="originalJuego"结束 - 这应该是alt="helecho" onMouseOver="resaltarHelecho()" onMouseOut="originalJuego()" - 没有“”属性之间，并调整了号召为鼠标事件的功能。

console.log消息在已更新的Fiddle中被删除 - 只是为了确保在添加虚拟图像之前调用该函数。

来源

2014-10-03 19:02:42

真棒，谢谢。很好解释。我刚开始学习JS并提供任何提示和技巧。我会upvote你的回答，但我不能。非常感谢马提亚斯。 – Maccaroni 2014-10-03 19:08:45

Imageflip JavaScript不翻转

回答

相关问题