2016-03-15 468 views
2

早上好!我的项目还有另一个问题,这次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

+0

要更改哪个图像 –

+0

** billfunction()**中的** img **变量未定义。您可能忘记将其替换为** Bill **变量 – Lucas

回答

0

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

这是一个JQuery解决方案,但我认为OP不使用JQuery – Lucas

+0

然后您可以使用您的函数在mouseover上添加事件监听器。您遇到问题billfunction()。 –

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变量名称)

最后,你检查使用哪个图片的逻辑看起来是错误的。 (资本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"; 
    } 
}