悬停更改图像

一尘不染

悬停更改图像

css

如何更改此确切代码以对鼠标悬停产生悬停效果？

我尝试遵循其他一些问题和答案，但我无法真正遵循它们。

因此，HTML是：

<a href="RR.html"><img 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>

现在，我要做的是当鼠标悬停在小图像上时更改大尺寸图像。

阅读 206

2020-05-16

共1个答案

一尘不染

请尝试以下代码。工作正常

<!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>

我修改了代码，希望它能稍作延迟。.但是，它不是动画。

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

2020-05-16