JavaScript code - onmouseout event rids of alert box activated by onmouseover event

Question

Please bear with me. I am new and self-learning programming with JavaScript. I'd like to know the correct code for the onmouseout event that works in concert with the onmouseover event in this program. The end result would be to get hide the alert box on the html page when the mouse leaves the area of action for the onmouseover event:

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

You can't do what you are trying to do with native alert boxes - see http://stackoverflow.com/questions/463368/javascript-close-alert-box — The One and Only ChemistryBlob, Aug 08 '16 at 21:06
You could try to do something else then an alert, like for example an absolute div with `visibility: hidden` which the JS changes to `visibility: visible` and onmouseout back to hidden. — Remco van Os, Aug 08 '16 at 21:11

score 0 · Accepted Answer · edited May 23 '17 at 12:08

0

You can't do what you are trying to do with native alert boxes - see this post.

Either build your own alert box (e.g. from div elements) or use a library such as bootstrap (for example this link). Your onmouseover would then display this "alert" box, and the onmouseout would then close this custom alert box.

For example, if the custom alert box has id = "custom-alert", onmouseout would fire a function that does something like this:

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

edited May 23 '17 at 12:08

Community

1
1

answered Aug 08 '16 at 21:11

The One and Only ChemistryBlob

7,864
10
36
69

Roger that CB. Thanks for your answer. Is it an option to modify the code so that the information shows on onmouseover as text on the web page, instead of an alert box. And if this is feasible, would the onmouseout would work? All I am trying to do is that the pointer of the mouse when it goes within bounderies shows this text and when exits the boundery the text dissapear??? – C. Legoas Aug 10 '16 at 16:08
Sure, set a div where the text should display and give the text an id attribute (e.g. id="text-div"). Then onmouseover, call a function which writes as (start after arrow) ------> document.getElementById("text-div").innerHTML = "Summer Product! On sale until Labor Day for $9.99."; and a different function (or use a different function argument) to then, onmouseout ------> document.getElementById("text-div").innerHTML = ""; this is one way to do this. – The One and Only ChemistryBlob Aug 10 '16 at 16:15

JavaScript code - onmouseout event rids of alert box activated by onmouseover event

1 Answers1