Change image on hover

Question

How can I change this exact code to do the hovering effect on mouseover?

I tried following some of the other questions and answers, but I could not really follow the

Answer 1

The easiest way for Roll Over image or Mouse Over image for web pages menus

<a href="#" onmouseover="document.myimage1.src='images/ipt_home2.png';"   
   onmouseout="document.myimage1.src='images/ipt_home1.png';">
  <img src="images/ipt_home1.png" name="myimage1" />
</a>

Answer 2

Just Use this:

Example:

<img src="http://nineplanets.org/planets.jpg" 
onmouseover="this.src='http://nineplanets.org/planetorder.JPG';"
onmouseout="this.src='http://nineplanets.org/planets.jpg';">
</img>

Works best with the Pictures being the same size.

Copy This

<img src="IMG-1"
onmouseover="this.src='IMG-2';"
onmouseout="this.src='IMG-1';">
</img>

Answer 3

Try this it`s so easy and the shortest one, just change the Image's URL:

<a href="TARGET URL GOES HERE">
    <img src="URL OF FIRST IMAGE GOES HERE"
         onmouseover="this.src='URL OF SECOND IMAGE GOES HERE';"
         onmouseout="this.src='URL OF FIRST IMAGE GOES HERE';">
</a>

Answer 4

Here is a simplified code sample:

.change_img {
    background-image: url(image1.jpg);
}
.change_img:hover {
    background-image: url(image2.jpg);
}

Answer 5

<script type="text/javascript">
    function changeImage(img){
       img.src=URL_TO_NEW_IMAGE;
    }
</script>

<a href="RR.html"><img id="bigImage"
                       onmouseover="changeImage(document.getElementById('bigImage'));"
                       src="R3.jpg"
                       width=700
                       height=300/></a>
<div>
    <a href="SSX.html" ><img src="SSX.jpg" height=100 width=120/></a>
    <a href="MPreview.html"><img src="MaxPayne3Cover.jpg" height=100 width=120/></a>
    <a href="NC.html" ><img src="NC.jpg" height=100 width=120/></a>
    </br>
</div>

Answer 6

No JavaScript needed if you are using this technique

<div class="effect">
<img class="image" src="image.jpg" />
<img class="image hover" src="image-hover.jpg" />
</div>

the you will need css to control it

.effect img.image{
/*type your css here which you want to use for both*/
}
.effect:hover img.image{
display:none;
}
.effect img.hover{
display:none;
}
.effect:hover img.hover{
display:block;
}

remember to give some class to div and mention it in your css name to avoid trouble :)