0

How can i change an image to another image when hover? I have image and i have to change the image to another image when mouseover. How can i do that?

Presently, I have image 1 and i have to change the image 1 to image 2 when mouseover on image 1. And i don't know how to do that. I know how to change colors with hover but i don't know how to change it to another image.

<div style="position:absolute; top:1050px; left:360px;"><img src="image1.jpg"><div>
DKim
  • 9
  • 2
  • possible duplicate of [Changing image on hover with css/html](http://stackoverflow.com/questions/18813299/changing-image-on-hover-with-css-html) – Mureinik Oct 19 '14 at 07:26
  • This might help .. http://stackoverflow.com/questions/18032220/css-change-image-src-on-imghover – ArunM Oct 19 '14 at 07:28

2 Answers2

1

FIDDLE

http://jsfiddle.net/rpku6d89/3/

<div class="hello">

</div>

css

.hello{  
    background-image: url("http://farm5.static.flickr.com/4005/4706825697_c0367e6dee_b.jpg");    
    height:300px;
    width:400px;
}
.hello:hover{
    background-image: url("http://farm5.static.flickr.com/4017/4717107886_dcc1270a65_b.jpg");

}
Manjunath Siddappa
  • 2,126
  • 2
  • 21
  • 40
0
<img src="image1.jpg" 
onmouseover="this.src='image2.jpg'" 
onmouseout="this.src='image1.jpg'">
Patricia
  • 2,885
  • 2
  • 26
  • 32