2016-08-08 7 views
0

Bitte tragen Sie mit mir. Ich bin eine neue und selbstlernende Programmierung mit JavaScript. Ich würde gerne den richtigen Code für das Ereignis onmouseout wissen, das mit dem Ereignis onmouseover in diesem Programm zusammenarbeitet. Das Endergebnis wäre, um das Benachrichtigungsfeld auf der HTML-Seite zu erhalten verstecken, wenn die Maus den Bereich der Aktion für das Ereignis onMouseOver verlässt:JavaScript-Code - onmouseout Ereignis-RIDs der Alarm-Box aktiviert durch OnMouseOver-Ereignis

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

Sie können nicht tun, was Sie versuchen, mit dem zu tun native alert boxes - siehe http://stackoverflow.com/questions/463368/javascript-close-alert-box –

+0

Sie könnten versuchen, etwas anderes als eine Warnung zu tun, wie zum Beispiel ein absolutes div mit 'visibility: hidden', welches die JS wechselt zu 'visibility: visible' und onmouseout zurück zu hidden. –

Antwort

0

Sie können nicht tun, was Sie versuchen, mit nativer Alertbox zu tun - siehe this Post.

Erstellen Sie entweder eine eigene Warnmeldung (z. B. aus div-Elementen) oder verwenden Sie eine Bibliothek wie Bootstrap (z. B. this link). Ihr onmouseover würde dann diese "Warnung" Box anzeigen, und die onmouseout würde dann diese benutzerdefinierte Warnmeldung schließen.

Zum Beispiel, wenn die benutzerdefinierte Warnmeldung id = „custom-Alarm“ hat, würde Onmouseout eine Funktion ausgelöst, die so etwas wie dies funktioniert:

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

Roger das CB. Danke für deine Antwort. Ist es eine Option, den Code so zu ändern, dass die Information onmouseover als Text auf der Webseite angezeigt wird, anstatt als Warnung. Und wenn das machbar wäre, würde das onmouseout funktionieren? Alles was ich versuche zu tun ist, dass der Mauszeiger, wenn er innerhalb von Grenzen geht, diesen Text zeigt und wenn er die Grenze verlässt, verschwindet der Text ??? –

+0

Sicher, legen Sie ein Div, wo der Text angezeigt werden soll und geben Sie dem Text ein ID-Attribut (z. B. ID = "Text-Div"). Rufen Sie dann eine Funktion auf, die schreibt als (Start nach Pfeil) ------> document.getElementById ("text-div"). InnerHTML = "Sommerprodukt! Bis zum Tag der Arbeit für 9,99 $."; und eine andere Funktion (oder ein anderes Funktionsargument verwenden), um dann onmouseout ------> document.getElementById ("text-div"). innerHTML = ""; Dies ist eine Möglichkeit, dies zu tun. –

+0

Habe es CB und danke. –