How to put hover on <img src=""> tag?

Question

I have some confusions, I want to put hover on image <img> tag without using "background-image". So that when user try to mouseover, the image will be change. How can i do this? Thanks.

Answer 1

1. Inline JavaScript version

<img src="a.jpg" onmouseover="this.src='b.jpg'" onmouseout="this.src='a.jpg'" />  

this refer to the current img tag

2. CSS Version (recommended)

CSS

a.logo {
  display:block;
  width: 100px;
  height: 100px;
  background: url(/path/to/logo.png) no-repeat center center;
  background-size: contain;
}

a.logo:hover {
  background-image: url(/path/to/logo-hover.png);
}

HTML

<a href="#" class="logo"></a>

By using css, you get more flexibility and it will work even on JavaScript-Disabled environments.

3. JavaScript handler

Useful on advanced situations

var img = document.getElementById('myImg');

img.onmouseout = function () {
   this.src = 'b.jpg';
};

img.onmouseover = function () {
   this.src = 'a.jpg';
};

Answer 2

Inline version: <img src="original.jpg" onmouseover="this.src='hover.jpg';" onmouseout="this.src='original.jpg';" />