我有这样平静的 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 中删除- 这只是为了确保在添加虚拟图像之前调用该函数。
关于javascript - Imageflip Javascript不翻转，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26184509/