Onmouseover功能不起作用

早上好！我的項目還有另一個問題，這次JavaScript沒有工作，我希望在我的鼠標指針懸停時改變圖片，感謝您的耐心等待！ :)Onmouseover功能不起作用

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

來源

2016-03-15 Albin Karlsson

要更改哪個圖像 –

** billfunction（）**中的** img **變量未定義。您可能忘記將其替換爲** Bill **變量 – Lucas

在你的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"); 
}

來源

2016-03-15 08:47:42

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

來源

2016-03-15 08:37:38

這是一個JQuery解決方案，但我認爲OP不使用JQuery – Lucas

然後您可以使用您的函數在mouseover上添加事件監聽器。您遇到問題billfunction（）。 –

讓我們看看你的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變量名稱）

最後，你檢查使用哪個圖片的邏輯看起來是錯誤的。（資本B）Bill永遠不能在bill-gates。使用全部小寫更改此邏輯應該可以工作。

你會得到的線沿線的東西：

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

來源

2016-03-15 08:38:40 Matthijs

Onmouseover功能不起作用

回答

相關問題