Функция 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

, какой образ вы хотите изменить –

функцию ** IMG ** переменная ** billfunction() ** не определен. Вероятно, вы забыли переопределить его как переменную ** Билл ** – 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

Тогда вы можете либо добавить прослушиватель событий при наведении мыши, с вашей функцией. У вас есть проблема с функция bill(). –

Давайте посмотрим на ваши 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"; 
    } 
}

источник

2016-03-15 08:38:40 Matthijs

Функция Onmouseover не работает

ответ

Смежные вопросы