悬停时更改图像

Posted 2023-03-06

技术标签:

【中文标题】悬停时更改图像【英文标题】：Change image on hover 【发布时间】：2012-03-13 03:21:51 【问题描述】：

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

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

所以 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>

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

【问题讨论】：

【参考方案1】：

试试这个，它很简单，而且最短，只需更改图片的 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>

【讨论】：

【参考方案2】：

如果您使用此技术，则无需 javascript

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

你需要css来控制它

.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;

记得给 div 一些类并在你的 css 名称中提及它以避免麻烦:)

【讨论】：

现在你也可以使用 Sprite CSS 技术了，更多细节请自行搜索【参考方案3】：

就用这个吧：

例子：

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

在图片大小相同的情况下效果最佳。

复制一下

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

【讨论】：

【参考方案4】：

如果你不想做 Javascript，你可以使用 CSS 和 :hover 选择器来获得相同的效果。

方法如下：

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*/

【讨论】：

【参考方案5】：

这是一个简化的代码示例：

.change_img 
    background-image: url(image1.jpg);

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

【讨论】：

【参考方案6】：

网页菜单的翻转图像或鼠标悬停图像的最简单方法

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

【讨论】：

【参考方案7】：

或者这样做：

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

我认为这是最简单的方法。

【讨论】：

【参考方案8】：

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

【讨论】：

【参考方案9】：

试试下面的代码。它正在工作

<!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"    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"    onmouseover="changeImage('../Pictures/lightcircle.png')"/></p>

                <p><img src="../Pictures/lightcircle2.png"    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);

【讨论】：

以上是关于悬停时更改图像的主要内容，如果未能解决你的问题，请参考以下文章