Question

我的问题是我无法根据不同的事件更改图片，在我的情况下，onmouseover。我正在使用JavaScript和html5标准。

以下是受影响的html：

<img alt="" height="300" width="162" id="bronze" class="badges" src="bilder/Bronze160x310.png">

应该依赖于以下部分：

<label class="block">
    <input name="Radio" type="radio" id="b1" onmouseover='updatePic("pictures/hi_again.png")' onchange="enableProceed(); updatePrice();" value="2.9">
    <span style="cursor:pointer">test</span>
</label>

我只对onmouseover事件有困难。我没有彻底测试它，但它似乎与onchange事件很好。

以下是JavaScript代码：

function updatePic(newPic) {   
    document.getElementById("bronze").src = newPic; 
}

当我运行它时，即使我没有开始任何鼠标悬停，原始图片也不可用。我以前在我的JavaScript中使用了一个switch系统，但是出现了同样的问题。

提前致谢。

JSFiddle：http://jsfiddle.net/xfkjL3as/3/

Answer 1

我相信我已经在这个JSFiddle中实现了你想要做的事情。

DEMO： http://jsfiddle.net/xfkjL3as/1/。

HTML 如下：

<img src="http://theunleashedreviewboard.files.wordpress.com/2013/08/angry-face.png" id="myImage">

<div>
    <input type="radio" id="myRadioButton" value="100" />
    <label for="myRadioButton">My Radio Button</label>
</div>

JavaScript 如下：

function updateImageSource(src)
{
    var myImage = document.getElementById("myImage");
    myImage.src = src;
}

var myRadioButton = document.getElementById("myRadioButton");

myRadioButton.addEventListener("mouseover", function(){
    updateImageSource('http://www.worldpeace-uk.org/wp-content/uploads/2013/07/smiley-face.jpg');
}, false);

我使用JavaScript将mouseover事件附加到radiobutton HTML元素。

旁注：将JavaScript代码与HTML分开通常是一种更好的做法。虽然HTML为您提供onmouseover等属性来实现此目的，但我建议将JavaScript代码保存在单独的文件中（并将其链接）。

此question回答了如何链接单独的JavaScript文件。

onmouseover问题 - 原始图片完全消失

1 个答案: