How to change source of <img> tag on hover?

Question

With only html and css, its not posible to change the src of image. If you do replace the img tag with div tag, then you might be able to change the image that is set as the background as like

div {
    background: url('http://dummyimage.com/100x100/000/fff');
}
div:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

And if you think you can use some javascript code then you should be able to change the src of the img tag as below

function hover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}

function unhover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}

<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover="hover(this);" onmouseout="unhover(this);" />

I have modified few changes related to Patrick Kostjens.

<a href="#">
<img src="http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png" 
onmouseover="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/red-bird-icon.png'"
onmouseout="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png'"
border="0" alt=""/></a>

DEMO

http://jsfiddle.net/ssuryar/wcmHu/429/

Here is an alternate approach using pure CSS. The idea is to include both the images in the HTML markup and have these displayed or hidden accordingly on :hover

HTML

<a>
   <img src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_15-128.png" /> 
   <img src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_12-128.png" />
</a>

CSS

a img:last-child {
  display: none;  
}
a:hover img:last-child {
  display: block;  
}
a:hover img:first-child {
  display: none;  
}

jsfiddle: https://jsfiddle.net/m4v1onyL/

Note that the images used are of the same dimensions for proper display. Also, these images file sizes are quite small so loading multiple is not an issue in this case but may be if you are looking to toggle display of large sized images.

I had a similar problem but my solution was to have two images, one hidden (display:none) and one visible. On the hover over a surrounding span, the original image changes to display:none and the other image to display:block. (Might use 'inline' instead depending on your circumstances)

This example uses two span tags instead of images so you can see the result when running it here. I didn't have any online image sources to use unfortunately.

#onhover {
  display: none;
}
#surround:hover span[id="initial"] {
  display: none;
}
#surround:hover span[id="onhover"] {
  display: block;
}

<span id="surround">
    <span id="initial">original</span>
    <span id="onhover">replacement</span>
</span>

What you could do is cheat a little bit by setting width and height to 0 to hide the actual image and apply some CSS to do what you want:

#aks {
    width:0px;
    height:0px;
    background:url('http://dummyimage.com/100x100/000/fff');
    padding:50px;
}

#aks:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

And the padding making the img tag the size you want it to have (half the size of your actual image).

Fiddle

Concerning semantics, I do not like any solution given so far. Therefore, I personally use the following solution:

.img-wrapper {
  display: inline-block;
  background-image: url(https://www.w3schools.com/w3images/fjords.jpg);
}

.img-wrapper > img {
  vertical-align: top;
}

.img-wrapper > img:hover {
  opacity: 0;
}

<div class="img-wrapper">
  <img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="image" />
</div>

This is a CSS only solution with good browser compatibility. It makes use of an image wrapper that has a background which is initially hidden by the image itself. On hover, the image is hidden through the opacity, hence the background image becomes visible. This way, one does not have an empty wrapper but a real image in the markup code.