Question

早上好！我的项目出现了另一个问题，这次JavaScript无法正常工作，我希望我的鼠标指针悬停在图片上时，感谢你的耐心！：）

    <!DOCTYPE html>
    <html>
    <head>
            <link rel="stylesheet" href="mystyle.css" type="text/css">
            <title>Konst UF</title>
            <meta charset="utf-8">
            <script type="text/javascript" language="javascript">
                if (screen.width <= 699) {
                    document.location = "mobile.html";
                };

                document.getElementById("Orderbutton").onclick = function () {
                    location.href = "http://www.youtube.com/";
                };

                function billFunction() {
                    var Bill = getElementById('BillGate');
                    if (img.src.match("Bill")) {
                        img.src = "bill-gates.jpg";
                    } else {
                        img.src = "Card.jpg";
                    }
                }
            </script>
        <body>
        <p class="madeby">Made by Albin Karlsson and Oliver Jansson</p>
        <center><ul>
            <li><a href="index.html"><p class="Home">Home</p></a></li>
            <li><a href="#"><p class="Products">Products</p></a></li>
            <li><a href="#"><p class="About">About Us</p></a></li>
        </ul></center>
        <center><p class="para1">Konst UF</p></center>
        <center><img id="BillGate" src="bill-gates.jpg" alt="Bill Gates" class="Billgates" onmouseover="billFunction()"/></center>
        <marquee><h2>Bill GATES</h2></marquee>
        <div></div>
        <div class="sidepanels1">
            <center><img class="Konstbild" src="Konst_uf_1.jpg" alt="Konst"/></center>
            <h2>Unknown</h2>
            <p>I have no idea haha</p>

        </div>
        <div class="sidepanels2">
            <center><img class="Konstbild" src="mikrofiberduk-konst.jpg" alt="Monalisa"/></center>
            <center><h2>Mona Lisa</h2></center>
            <center><p>Mona Lisa is a painting which was painted by Leonardo Da Vinci</p></center>
        </div>
        <center><button id="Orderbutton" type="button" onclick="location.href = 'http://www.youtube.com/';">Order Our Products</button></center>
        </body>
    </head>
</html>

那是html代码，我希望你能找到问题，如果你需要css我也得到了它：

body {
    background-color: grey;
    border: grey solid 1px;
}

p.para1 {
    margin: auto;
    width: 40%;
    border: 3px solid black;
    padding: 20px;
    background-color: black;
    color: white;
    font-size: 30px;
}
div.sidepanels1 {
    border: 5px dotted green;
    background-color: grey;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 320px;
    height: 550px;
    text-align: center;
    margin-top: 40px;
}
div.sidepanels2 {
    border: 5px dotted green;
    background-color: grey;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 320px;
    height: 550px;
    margin-top: 40px;
}
p.iframe {
    position: absolute;
    top: 20px;
    text-align: center;
}
div.2nd {
    background-color: black;
    color: white;
}
img.asus-logo{
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid black;
}
img.Billgates {
    margin-top: 30px;
    border: 2px solid black;
    margin-bottom: 40px;
}
img.Konstbild {
    margin-top: 20px;
    width: 300px;
    height: 300px;
    border: 3px solid green;
    margin-right: auto;
    margin-left: auto;
}
ul {
    list-style-type: none;
}
p.madeby {
    position: fixed;
}

谢谢！：d

Answer 1

让我们看一下你的billFunction，因为此功能存在一些问题。

function billFunction() {
   var Bill = getElementById('BillGate');
   if (img.src.match("Bill")) {
      img.src = "bill-gates.jpg";
   } else {
      img.src = "Card.jpg";
   }
}

首先，获得您所需的元素需要您使用document.getElementById，而不仅仅是getElementById。改变它应该给你正确的元素。

接下来，您要设置img.src，但永远不会定义变量img。我认为这应该是Bill.src。（旁注，我建议你使用lowerCamelCase变量名称）

最后，您检查要使用哪个图像的逻辑看起来不对。 Bill（大写字母B）永远不会出现在bill-gates中。使用全小写来改变这个逻辑应该有效。

您将获得以下内容：

function billFunction() {
    var bill = document.getElementById('BillGate');
    if (bill.src.match("bill")) {
        bill.src = "bill-gates.jpg";
    } else {
        bill.src = "Card.jpg";
    }
}

Answer 2

           function billFunction() {
        var Bill = getElementById('BillGate');
        if (img.src.match("Bill")) {
            img.src = "bill-gates.jpg";
        } else {
            img.src = "Card.jpg";
        }
    }

更正了一个：

         $("img").hover(function(){
               $(this).attr("src","bill.jpg");
            },function(){
                $(this).attr("src","card.jpg")
                  });

Answer 3

在您的JavaScript中更改此

    function billFunction(img) {
        var Bill = document.getElementById('BillGate');
        if (img.src.match("Bill")) {
            img.src = "bill-gates.jpg";
        } else {
            img.src = "Card.jpg";
        }
    }

并在您的HTML中

<img id="BillGate" src="screenshot_tweet.png" alt="Bill Gates" class="Billgates" onmouseover="billFunction(this)"/>

此外，您应该先注释onclick代码，这会导致您遇到问题。

更好的解决方案是仅使用CSS执行此操作。它更容易。

#bill {
    background-image: url("bill-gates.jpg");
}

#bill:hover {
    background-image: url("Card.jpg");
}

Onmouseover功能不起作用

3 个答案: