使用JavaScript在翻转时可以更改图像的来源？

我对使用JavaScript的翻转效果有疑问。使用JavaScript在翻转时可以更改图像的来源？

当使用JS处理onmouseover时，我已经阅读了图像精灵（图像与其他图像在其侧面）可以用CSS抵消的帮助来实现基本翻转。也读过使用JS（className）改变类本身的可能性，以达到上述效果。

我的问题是，我可以使用JavaScript修改图像src本身来实现翻转效果吗？

一个这样的代码，也许 -

document.getElementByID("button1").onmouseover = rolloverFunction; 
function rolloverFunction(){ 
this.src = "button1-image2.png"; 
}

我打这样的事情，看看图像的src可以在侧翻进行修改，但它不工作。你能否让我知道我要去哪里？

来源

2011-10-08 arun nair

您需要mouseover和mouseout事件。在图像中悬停时触发mouseover，在离开图像时触发mouseout。使用纯醇” JS会产生：

<img src="default.png" id="image" alt=""> 

<script> 
var image = document.getElementById("image"); 
image.onmouseover = function() { 
    this.src = "rollover.png"; 
}; 
image.onmouseout = function() { 
    this.src = "default.png"; 
}; 
</script>

或使用共同的功能，以避免重复的网址：

function rollover_effect(img_elm, rollover_src) { 
    var default_src = img_elm.src; 
    img_elm.onmouseover = function() { 
     img_elm.src = rollover_src; 
    }; 
    img_elm.onmouseout = function() { 
     img_elm.src = default_src; 
    }; 
} 
rollover_effect(document.getElementByID("image"), "rollover.png");

来源

2011-10-08 10:05:59 Lekensteyn

是的，我刚刚离开了为简洁的的onmouseout部分。我认为我的代码与你所建议的代码一样。我仍然收到错误，基本上翻转图像显示为十字形;我相信路径是问题。请让我知道如何提及完整路径？我现在正在本地计算机中测试它，并且该图像与网页和脚本以及其他图像位于同一文件夹中。 –

我假设你正在使用Windows，然后在其中使用带反斜杠的路径。在JS中，你必须避开这样的反斜杠，所以'images \ image.png'变成'images \\ image.png'。我建议你在路径中使用正斜杠：'images/image.png'。这总是有效的。 – Lekensteyn

谢谢，@Lekensteyn。这工作。问题出在我用于图像路径的反斜杠上。使用正斜杠工作。再次感谢。 –

使用JavaScript在翻转时可以更改图像的来源？

回答

相关问题