Change image on hover

前端未结

关注

 9  663

鱼传尺愫

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

相关标签:

9条回答

余生分开走

2020-12-03 03:42

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);
}

0 讨论(0)

挽巷

2020-12-03 03:47

If you don't want to do Javascript you can use CSS and :hover selector to get the same effect.

Here's how:

index.html:

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<title>Image hover example</title>
</head>
<body>
<div class="change_img"></div>
</body>
</html>

stylesheet.css

.change_img { background-image:url('img.png'); }/*Normal Image*/
.change_img:hover { background-image:url('img_hover.png'); }/*On MouseOver*/

0 讨论(0)

我寻月下人不归

2020-12-03 03:50

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.

0 讨论(0)

上一页 1 2