Change image on hover

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 :)


Try the following code. It's working

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title><br />
    </head>

    <body>
        <p>
            <script type="text/javascript" language="javascript">
                function changeImage(img){
                   document.getElementById('bigImage').src=img;
                }
            </script>

            <img src="../Pictures/lightcircle.png" alt="" width="284" height="156" id="bigImage" />
            <p>&nbsp; </p>
            <div>
                <p>
                    <img src="../Pictures/lightcircle2.png" height=79 width=78 onmouseover="changeImage('../Pictures/lightcircle2.png')"/>
                </p>
                <p><img src="../Pictures/lightcircle.png" alt="" width="120" height="100" onmouseover="changeImage('../Pictures/lightcircle.png')"/></p>

                <p><img src="../Pictures/lightcircle2.png" alt="" width="78" height="79" onmouseover="changeImage('../Pictures/lightcircle2.png')"/></p>

                <p>&nbsp;</p>
                </br>
            </div>
    </body>
</html>

I modified the code, like it will work with some delay in it.. But still, it is not animating..

function changeImage(img){
    // document.getElementById('bigImage').src=img;
    setTimeout(function() {document.getElementById('bigImage').src=img;},1250);
}

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>

Or do like this:

<a href="SSX.html">
    <img src="SSX.jpg"
         onmouseover="this.src='SSX2.jpg';"
         onmouseout="this.src='SSX.jpg';"
         height=100
         width=120 />
</a>

I think this is the easiest way.

Tags:

Html

Css

Hover

Recent Posts