Question

我想在鼠标悬停时更改2张图片。＃例如。一旦我将鼠标悬停，图像将改变...它将不会改变，直到我再次鼠标悬停。我该怎么做。这是我的代码

function updatePic(){
    if(document.getElementById("dpic").src == "images/h1.jpg"){
        document.getElementById("dpic").src = "images/h.jpg";
    }
    if(document.getElementById("dpic").src == "images/h.jpg"){
        document.getElementById("dpic").src = "images/h1.jpg";
    }
}

Answer 1

J.Hasan，有更简单的方法。你能将其中一个图像作为背景图像设置为div吗？

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <style>
        div {
            width:100px;
            height:100px;
            background: url(image1.jpg);
            background-repeat: no-repeat;
            background-size:100% 100%;
            }
        img {
            width:100%;
            height:100%;
            opacity:0;
            }
        img:hover {opacity:1;}
        </style>
    </head>
    <body>
        <div>
            <img src="image2.jpg">
        </div>
    </body>
</html>

如果它是您想要的幻灯片，请试试这个。这个幻灯片的美妙之处在于它不会在页面加载时加载所有图像。只需制作一张白色图像（img0.jpg）即可在幻灯片中设置幻灯片的大小＆＃34; slideshowWrap＆＃34;格。

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="_/js/slides.js"></script>
        <script>
        function showSlides(){
            // SETTINGS
            var rotation = 5000; // set rotation speed (milliseconds)
            var transition = 1000; // set transition speed (milliseconds)
            var path = "_/images/banners/"; // the path to the slides (images)
            // SLIDES
            var slides = [ // add slides (images) to the slideshow (no comma after last slide)
                "img1.jpg",
                "img2.jpg",
                "img3.jpg",
                "img4.jpg"
                ];

        // SLIDESHOW

            var slideAmt = slides.length -1;
            slideTrn ++;
            slideTrn = (slideTrn > 2)?1:slideTrn;

            if(firstSlide == true){
                // slideCnt = 0
                slideCnt ++;
                $("#slide1").attr("src", path + slides[slideCnt]); // slide 0
                $("#slide1").css({"z-index":"1","opacity":"1"});
                slideCnt ++;
                slideCnt = (slideCnt > slideAmt)?0:slideCnt;
                $("#slide2").attr("src", path + slides[slideCnt]); // slide 1
                $("#slide2").css({"z-index":"2",});
                firstSlide = false;
                }
            else{
                if(slideTrn == 2){
                    // slideCnt = 1
                    $("#slide2").animate({opacity:"1"}, transition, function(){ // slide 1 fades in
                        $("#slide1").css({"opacity":"0"}); // slide 0
                        $("#slide2").css({"z-index":"1"}); // slide 1
                        $("#slide1").css({"z-index":"2"});
                        slideCnt ++;
                        slideCnt = (slideCnt > slideAmt)?0:slideCnt;
                        $("#slide1").attr("src", path + slides[slideCnt]); // slide 2
                        });
                    }
                else{
                    // slideCnt = 2
                    $("#slide1").animate({opacity:"1"}, transition, function(){
                        $("#slide2").css({"opacity":"0"});
                        $("#slide1").css({"z-index":"1"});
                        $("#slide2").css({"z-index":"2"});
                        slideCnt ++;
                        slideCnt = (slideCnt > slideAmt)?0:slideCnt;
                        $("#slide2").attr("src", path + slides[slideCnt]);
                        });
                    }
                }
            var t = setTimeout(showSlides, rotation);
            }

        function setValues(){
            firstSlide = true;
            slideCnt = -1;
            slideTrn = 0;
            manSlide = 0;
            }

        window.addEventListener("load", setValues);
        window.addEventListener("load", showSlides);
        </script>
        <style>
        #slideshowWrap {
            width:100%;
            min-height:1px;
            overflow:auto;
        </style>
    </head>
    <body>
        <div id="slideshowWrap" style="position:relative;overflow:hidden;">
            <img alt="" class="blank" src="img0.jpg"> <!-- set white image just to set the size of div "slideshowWrap" -->
            <img alt="" class="slide" src="_/" id="slide1">
            <img alt="" class="slide" src="_/" id="slide2">
        </div>
    </body>
</html>

Answer 2

更新：我认为 onmouseenter 是您正在寻找的鼠标事件：

function change() {
  
var current = document.getElementById("image").getAttribute("src");
  
if (current == "http://i.imgur.com/HNj6tRD.jpg") {    
document.getElementById("image").setAttribute("src", "http://i.imgur.com/3jxqrKP.jpg");
} else {
document.getElementById("image").setAttribute("src", "http://i.imgur.com/HNj6tRD.jpg");
}    
}

#image {
width:550px;
height:150px;
position:relative;
background-repeat: no-repeat;
background-size:100% 100%;
}

<img id="image" alt=image src="http://i.imgur.com/HNj6tRD.jpg" onmouseenter="change()">

Answer 3

这可能是一种更有效的方式，但如果你只是想让它起作用，请试试你的JS。

    var x = 0;
function rollOver() {
    var image1 = "url(images/RIOBtn1.gif)";
    var image2 = "url(images/RIO2Rollover.gif)";
    var image3 = "url(images/RIO1Rollover.gif)";
    var array11 = [image1,image2,image3];

    if (x == 0){
        document.getElementById("myButton").style.backgroundImage = array11[x];
        x++;
    } else if (x == 1) {
        document.getElementById("myButton").style.backgroundImage = array11[x];
        x++;
    } else if (x == 2) {
        document.getElementById("myButton").style.backgroundImage = array11[x];
        x = 0;
    }
    }

所有这一切都是将url放入一个数组中并继续循环遍历它们。我这样做很快，所以它有点乱。在HTML中它只是：

<button id="myButton" onmouseover="rollOver()"></button>

编辑***********************************

正如您希望src更改一样，代码几乎相同但更改了源代码。

    var x = 0;
function rollOver() {
    var image1 = "images/RIOBtn1.gif";
    var image2 = "images/RIO2Rollover.gif";
    var image3 = "images/RIO1Rollover.gif";
    var array11 = [image1,image2,image3];

    if (x == 0){
        document.getElementById("myButton").src = array11[x];
        x++;
    } else if (x == 1) {
        document.getElementById("myButton").src = array11[x];
        x++;
    } else if (x == 2) {
        document.getElementById("myButton").src = array11[x];
        x = 0;
    }
    }

    <img src="images/HomeBtn1.gif" id="myButton" onmouseover="rollOver()">

Answer 4

＆＃13;

$(document).ready(function () {
    var strImgSrc1 = "http://virtualrailfan.com/wp-content/uploads/2014/10/200_200_sample.jpg";
    var strImgSrc2 = "http://www.eminenstore.com/wp-content/uploads/2012/04/samples.jpg";
    $("img").mouseover(function () {
        if ($(this).attr("src") === strImgSrc1)
        {
            $(this).attr("src", strImgSrc2);
        }
        else
        {
            $(this).attr("src", strImgSrc1);
        }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img border="1" src="http://www.eminenstore.com/wp-content/uploads/2012/04/samples.jpg" height="300" width="300"/>

＆＃13;

我想再次更换2张图片onmouseover和agian

4 个答案: