Question

我有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>

我找不到错误。有什么提示可以找到它吗？

Answer 1

您的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 =＆＃34; juego_paramo＆＃34;为方便起见，我刚刚添加了该图片。）

您的<area>以属性alt="helecho", onMouseOver="resaltarHelecho", onMouseOut="originalJuego"结尾 - 这应该是alt="helecho" onMouseOver="resaltarHelecho()" onMouseOut="originalJuego()" - 否＃34;，＆＃34;在属性之间，并调整了鼠标事件函数的调用。

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

Imageflip Javascript没有翻转

1 个答案: