2016-08-08 2 views
0

Пожалуйста, несите меня. Я - новое и самообучающееся программирование с использованием JavaScript. Я хотел бы знать правильный код для события onmouseout, который работает совместно с событием onmouseover в этой программе. Конечный результат должен был бы получить скрыть окно предупреждения на странице HTML, когда мышь покидает область действия для события OnMouseOver:Код JavaScript - onmouseout event rids окна предупреждения, активированного событием onmouseover

<! DOCTYPE html> 
<html> 
<head> 
    <title>Product Information</title> 
    <script> 
    function Product1Info() { 
    alert("Summer Product! On sale until Labor Day for $9.99."); 
    } 
    function Product2Info() { 
    alert("One of our best sellers! A bargain at $19.50."); 
    } 
    function Product3Info() { 
    alert("Everyone could use one of these at $1.99!"); 
    } 

    </script> 
</head> 
<body> 
<h1>Fran's Place<br>Shop our inventory!</h1> 
We've got everything you need!<br> 
<img src ="product1.jpg" height="300px" width="200px" 
border="5" style="border-color:blue;" onmouseover="Product1Info()" /></div> 
<img src ="product2.jpg" height="300px" width="200px" 
border="5" style="border-color:red;" onmouseover="Product2Info()" /></div> 
<img src ="product3.jpg" height="300px" width="200px" 
border="5" style="border-color:black;" onmouseover="Product3Info()" /></div> 

</body> 
</html> 
+1

Вы не можете делать то, что вы пытаетесь сделать с native alert boxes - см. http://stackoverflow.com/questions/463368/javascript-close-alert-box –

+0

Вы можете попытаться сделать что-то еще, а затем предупреждение, например, как абсолютный div с 'visibility: hidden ', который JS изменяет на «видимость: видимый» и onmouseout обратно на скрытый. –

ответ

0

Вы не можете делать то, что вы пытаетесь сделать с родными коробками оповещения - см. this пост.

Создайте собственное окно оповещения (например, из элементов div) или используйте библиотеку, такую ​​как bootstrap (например, this link). Затем ваш onmouseover отобразит это «предупреждение», и onmouseout закроет это настраиваемое поле оповещения.

Например, если поле персонализированного оповещения имеет ID = «Изготовленная предупреждение», onmouseout уволит функцию, которая делает что-то вроде этого:

document.getElementById("custom-alert").style.display = 'none'; 
+0

Роджер, что CB. Спасибо за Ваш ответ. Можно ли изменить код так, чтобы информация отображалась в onmouseover как текст на веб-странице, а не в поле предупреждения. И если это возможно, будет ли onmouseout работать? Все, что я пытаюсь сделать, это то, что указатель мыши, когда он идет в пределах bounderies, показывает этот текст, а когда выходит из boundery, текст исчезает ??? –

+0

Конечно, установите div, где должен отображаться текст, и придать тексту атрибут id (например, id = "text-div"). Затем onmouseover вызовите функцию, которая записывается как (начало после стрелки) ------> document.getElementById («text-div»). InnerHTML = «Летний продукт! В продаже до Дня труда за 9,99 доллара»; и другую функцию (или использовать другой аргумент функции), чтобы затем, onmouseout ------> document.getElementById ("text-div"). innerHTML = ""; это один из способов сделать это. –

+0

Получил CB и спасибо. –

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