onmouseover issue -- original picture completely disappears

Question

My problem is that I'm not able to change picture based on different events, in my case, onmouseover. I'm using JavaScript and html5 standard.

Below is the affected html:

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

which is supposed to be reliant on the following piece:

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

I only have trouble with the onmouseover event. I haven't tested it thoroughly, but it seemed to work fine with onchange events.

The following is the JavaScript code:

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

When I run this the original picture becomes unavailable even if I have not begun any mouseover. I used a switch-system for my JavaScript before, but the same problem occured.

Thanks in advance.

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

are the images exist ? what does Developer Console tell ? – Raptor Nov 17 '14 at 02:41 — Raptor, Nov 17 '14 at 02:41

score 0 · Accepted Answer · edited May 23 '17 at 11:57

I believe I have achieved what you are attempting to do in this JSFiddle.

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

The HTML is as follows:

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

The JavaScript is as follows:

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);

I have used JavaScript to attach the mouseover event to the radiobutton HTML element.

Sidenote: It is generally a better practice to separate your JavaScript code from your HTML. While HTML provides you attributes such as onmouseover to achieve this, I would recommend to keep the JavaScript code in a separate file (and link it).

This question answers how to link a separate JavaScript file.

Thanks! It indeed seems to work. Moreover, I would like to ask you what I have done wrong and why your works. To my very uneducated eye, it looks as if you have only made it one step longer than necessary. — the1, Nov 17 '14 at 13:34
I have tried to add multiple eventlisteners to a group of radiobuttons using document.getElementByClassName(). It seems to work, but the function I have uses the radiobutton itself as argument, and I have realised that for each radiobutton the last inserted argument is used. So out of 5 radiobuttons, the 5:th has become the argument for each. — the1, Nov 17 '14 at 16:55
When I ran your JSFiddle, it comes up saying `Uncaught ReferenceError: updatePic is undefined`. — Prabu, Nov 17 '14 at 21:45

onmouseover issue -- original picture completely disappears

1 Answers1