have an image change after mouse over, not working properly - html

Question

When I run it locally, it works fine! But it isn't working when I upload it to my host and try it out online.
here's the code I'm using:
<div class="group">
<div class="left">
<img src="img/up.png" onmouseover="this.src='img/upscroll.png'" onmouseout="this.src='img/up.png'"alt="" />
</div>
<div class="middle">
<img src="img/hobo.png" onmouseover="this.src='img/hoboscroll.png'" onmouseout="this.src='img/hobo.png'"alt="" />
</div>
<div class="right">
<img src="img/blamealcohol.png" onmouseover="this.src='img/blamealcoholscroll.png'" onmouseout="this.src='img/blamealcohol.png'"alt="" />
</div>

Answer 1

Ok, editing answer with a different solution altogether.
Maybe this would do what you are looking for but be a little more simple than the mouseover events.
Here's the demo http://jsfiddle.net/xxhpxd98/
<img class="clock" src="http://images.cdbaby.name/6/0/60x60music2_small.jpg" height="60px" width="60px">
<img class="briefcase" src="http://www.globetrotter1897.com/wp-content/uploads/2013/06/Burgundy-Flight-Bag-and-Small-Brief-60x60.jpg">
.clock {
position:absolute;
z-index:2;
}
.clock:hover {
opacity:0
}
.briefcase {
position:absolute;
}

Answer 2

If the path of the hover image is correct then the problem is something else.
Usually when a page is loaded it loads everything which is present in it in the first view. i.e it will not load any images which is put in the javascript events such as onmouseover. And the mouseover image starts loading only when you do the action (i.e mouseover). And sometime it may fail if the hover image is not cached or if the image couldn't be fetched from server.
There are different ways to solve this problem.
Here are two:
1) First method:You should preload the hover image using javascript
var image1=new Image();
image1.src="img/upscroll.png";
by this method the image upscroll.png will get cached and thus your code works fine.
2) Second method:Include all the hover images in the page and set its width and height to 1 px so that no one will see it but the image will be preloaded. If required you can change the position of these dots to fixed and keep it out of the screen at left:-10px or something like that.
This not only makes the code work fine but also it will avoid the weird appearance of the image getting loaded while mouse is over as it is already cached.