Imageflip Javascript does not flip

Imageflip Javascript does not flip

本文关键字：flip not does Javascript Imageflip      更新时间：2023-09-26

我拥有这种平静的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>

我找不到错误。有什么线索可以找它吗？

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中被删除了——这只是为了确保在我添加伪图像之前调用了该函数。

相关文章：