[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

Why the callback onMouseOut() is called?

Posted on 2000-02-01
8
Medium Priority
?
340 Views
Last Modified: 2012-06-21
Dear All,
I'm doing a little javascript to have some popup text appearing when the user passes the mouse cursor over a portion of text. The problem I experience is that the onMouseOut() callback is called non-stop even if the mouse cursor does not leave the portion of text.
Any idea?
Regards
Stephane/Stockholm


Here is the html source code:
<HTML>

<HEAD>

<SCRIPT LANGUAGE="javascript" SRC="../lib/browser.js"></SCRIPT>
<SCRIPT LANGUAGE="javascript" SRC="../lib/mouseEvents.js"></SCRIPT>
<SCRIPT LANGUAGE="Javascript" SRC="../lib/element.js"></SCRIPT>
<SCRIPT LANGUAGE="Javascript" SRC="over.js"></SCRIPT>

</HEAD>

<BODY>

<script language="JavaScript">
<!--
var bgcolor = "#ffcc00";
var bdcolor = "#000000";
var textcolor = "#000000";
var titlecolor = "#ffffff";
var width = "100";
var border = "5";
// -->
</script>

<A HREF="over.html" onMouseOver="popup('A popup.');" onMouseOut="popupOff();">A popup</A>
<BR><BR>
<A HREF="over.html" onMouseOver="titledPopup('A popup.','The title');" onMouseOut="popupOff();">A titled popup</A>

</BODY>

</HTML>


Here is the javascript source code:

// Runs the function at loading time
onLoad = initOver();

// Main initializer
function initOver() {
  // Initialize the mouse event manager
  initMouseEvent();

  // Create the popup object
  over = new docElement(window, "over", "", 400, 50);
  over.output();

  // Set the colors and positions
  if (typeof bgcolor == 'undefined') { bgcolor = "#CCCCFF";}
  if (typeof bdcolor == 'undefined') { bdcolor = "#333399";}
  if (typeof textcolor == 'undefined') { textcolor = "#000000";}
  if (typeof titlecolor == 'undefined') { titlecolor = "#FFFFFF";}
  if (typeof width == 'undefined') { width = "200";}
  if (typeof border == 'undefined') { border = "1";}

  // Set the flag variable
  shown = false;
  }

// Display a popup text
function popup(text) {
  var txt = "<TABLE WIDTH="+width+" BORDER=0 CELLPADDING="+border+" CELLSPACING=0 BGCOLOR=\""+bdcolor+"\"><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=\""+bgcolor+"\"><TR><TD><FONT FACE=\"Arial,Helvetica\" COLOR=\""+textcolor+"\" SIZE=\"-2\">"+text+"</FONT></TD></TR></TABLE></TD></TR></TABLE>"
  show(txt);
  }

// Display a popup text with a title
function titledPopup(text, title) {
  var txt = "<TABLE WIDTH="+width+" BORDER=0 CELLPADDING="+border+" CELLSPACING=0 BGCOLOR=\""+bdcolor+"\"><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD><SPAN ID=\"PTT\"><B><FONT COLOR=\""+titlecolor+"\">"+title+"</FONT></B></SPAN></TD></TR></TABLE><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=\""+bgcolor+"\"><TR><TD><SPAN ID=\"PST\"><FONT COLOR=\""+textcolor+"\">"+text+"</FONT><SPAN></TD></TR></TABLE></TD></TR></TABLE>"
  show(txt);
  }

// Manage the mouse moves
function mouseMove(e) {
  mousePos(e);
  over.moveTo(mouseX - (width / 2), mouseY);
  return true;
  }

// Close the popup
function popupOff() {
alert("Nooooo....");
  hide();
  }

// Show the popup
function show(txt) {
  if (shown == false) {
    over.setBody(txt);
    over.moveTo(mouseX - (width / 2), mouseY);
    over.show();
    shown = true;
    }
  }

// Hide the popup
function hide() {
  if (shown == true) {
    over.hide();
    shown = false;
    }
  }

// Called if mouse button is pressed
function mouseDown(e) {
  }

// Called if mouse button is released
function mouseUp(e) {
  }

0
Comment
Question by:stephaneeybert
  • 4
  • 3
8 Comments
 
LVL 4

Expert Comment

by:jbrugman
ID: 2481579
for now i should try:

onMouseOver="popup('A popup.');return true;" onMouseOut="popupOff();return true;"

I'm not sure what you exactly mean though.

Justus
0
 

Author Comment

by:stephaneeybert
ID: 2481695
I tried that but it didn't work. Same with "return false".
What I mean is, the onMouseOver should be called once, when the mouse enters the text area, and the onMouseOut should be called once, when the mouse leaves the text area. But the two are called non stop when I run the mouse within the text area. The text area is the portion of the page that contains the link.
In my two examples, it is:
"A popup" and "A titled popup".
 
0
 

Author Comment

by:stephaneeybert
ID: 2481886
I have put all the source code, that is, the html part, and the javascript part.
I suggest you save the html part in a file, and the javascript part inanother file. To run it, I also include here the libraries I'm using.

The first file is browser.js...

// Functions attached to the browsers

// Check if NS4 browser
function ns4Browser() {
  return(nsBrowser());
  }

// Check if NS browser
function nsBrowser() {
  return((document.layers) ? true : false);
  }

// Check if IE4 browser
function ie4Browser() {
  if (ieBrowser()) {
    if (navigator.userAgent.indexOf('MSIE 4')>0) {
      return(true);
      } else {
      return(false);
      }
    } else {
      return(false);
    }
  }

// Check if IE browser
function ieBrowser() {
  return((document.all) ? true : false);
  }

// Check if IE5 browser
function ie5Browser() {
  if (ieBrowser()) {
    if (navigator.userAgent.indexOf('MSIE 5')>0) {
      return(true);
      } else {
      return(false);
      }
    } else {
      return(false);
    }
  }

// Check if MAC browser
function macBrowser() {
  return(navigator.appVersion.indexOf("Mac") != -1);
  }

// Check if Dynamic HTML browser
function dhtmlBrowser() {
  return(ns4Browser() || (ie4Browser() && !macBrowser()));
  }

// Check if the browser supports images swapping (IE3 does not)
function imageSwapBrowser (InString) {
  if (document.images) {
    return(true);
    } else {
    return(false);
    }
  }

// Return an object from an html id
function idToObject(id) {
  if (ie4Browser()) {
    return(document.all[id].style);
    } else if(ns4Browser()) {
    return(document.layers[id]);
    }
  }

// Return an object from an html id
function idToObject2(id) {
  // First we initialize all the variables.
  var object,ss,sr,i,j;
  // This chunk handles the IE portion of the checkIn code.
  if (ie4Browser()) {
  var mylayers=new Array();
    if((document.all[id].style.position != 'absolute') && (document.all[id].style.position != 'relative')){
      for (ss=0 ; ss < document.styleSheets.length; ss++) {
        for (sr=0 ; sr < document.styleSheets(ss).rules.length; sr++) {
          if (document.styleSheets(ss).rules(sr).selectorText == '#' + id) {
            object = document.styleSheets(ss).rules(sr).style;
            break;
            }
          }
        }
      } else {
      object = document.all[id].style;
      }
    } else if(ns4Browser()) {
    var mylayers = new Array();
    with (document) {
      for (i=0; i<layers.length; i++) mylayers[i]=layers[i]; {
        for (i=0; i<mylayers.length; i++) {
          if (mylayers[i].document && mylayers[i].document.layers) {
            for (j=0; j<mylayers[i].document.layers.length; j++) {
              mylayers[mylayers.length] = mylayers[i].document.layers[j];
              }
            if(mylayers[i].name == id){
              object = mylayers[i];
              }
            }
          }
        }
      }
    }
  return(object);
  }

// Show an object
function showObject(object) {
  if (ns4Browser()) {
    object.visibility = "show";
    } else if (ie4Browser()) {
    object.visibility = "visible";
    }
  }

// Hide an object
function hideObject(object) {
  if (ns4Browser()) {
    object.visibility = "hide";
    } else if (ie4Browser()) {
    object.visibility = "hidden";
    }
  }

// Move an object
function moveObjectTo(object, x, y) {
  object.left = x;
  object.top = y;
  }

// Move an object
function moveObjectBy(object, x, y) {
  object.left = obj.left + x;
  object.top = obj.top + y;
  }

// Set the html body for an object
function setObjectBody(object, body) {
  if (ie4Browser()) {
    document.all.object.innerHTML = body;
    } else if (ns4Browser()) {
    with (document.layers[object]) {
      open();
      writeln(body);
      close();
      }
    }
  }



The second file is mouseEvents.js...

// Functions to manage the mouse and associated events

// Initializes the mouse events
function initMouseEvent() {
  // Specify the function callback names to the event manager
  document.onmousemove = mouseMove
  document.onmousedown = mouseDown;
  document.onmouseup = mouseUp;
  if (nsBrowser()) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP | Event.MOUSEDRAG)

  // Reset the mouse position
  mouseX = 0;
  mouseY = 0;
  }

// Get the position of the mouse
function mousePos(e) {
  var x, y;
  if (nsBrowser()) {
    x = e.pageX;
    y = e.pageY;
    x = x + window.pageXOffset;
    y = y + window.pageYOffset;
    } else if (ieBrowser()) {
    x = e.x;
    y = e.y;
    x = x + document.body.scrollLeft;
    y = y + document.body.scrollTop;
    }

  // Check the mouse position against the inner border of the window
  if (x < window.innerWidth && y < window.innerHeight) {
    mouseX = x;
    mouseY = y;
    }
  }

// Checks if the position of the mouse is inside an object
function mouseInObject(e, obj) {
  mousePos(e);
  if (mouseX >= obj.left && mouseX <= (obj.left + obj.document.width) && mouseY >= obj.top && mouseY <= (obj.top + obj.document.height)) {
    return(true);
    } else {
    return(false);
    }
  }




The third file is element.js...

// Functions to manage the document elements

// Constructor for an element
function docElement(window, id, body, left, top) {
  // Remember some arguments for later use
  this.window = window;
  this.id = id;
  this.body = body;
  // Write a CSSP style sheet for the element
  var doc = window.document;
  doc.writeln('<STYLE TYPE="text/css">');
  doc.writeln('#' + id + ' {');
  doc.writeln('  position:absolute;');
  if (left) {
    doc.writeln('  left:' + left + ';');
    }
  if (top) {
    doc.writeln('  top:' + top + ';');
    }
  doc.writeln('  }');
  doc.writeln('</STYLE>');
  }

// Functions of a docElement - NS version
if (nsBrowser()) {
/////////////////////// NETSCAPE BROWSER /////////////////////////////////////////

  // Output the element
  // This function must be called first, to create the element tags in the html page
  docElement.prototype.output = function () {
    var doc = this.window.document;
    // Output the element within a <DIV> tag
    doc.writeln('<DIV ID="' + this.id + '">');
    doc.writeln(this.body);
    doc.writeln("</DIV>");
    // Save a reference to the layer of the element
    this.layer = doc[this.id];
  }

  // Show the element
  docElement.prototype.show = function(x, y) {
    this.layer.visibility = "show";
    }

  // Hide the element
  docElement.prototype.hide = function(x, y) {
    this.layer.visibility = "hide";
    }

  // Move the element
  docElement.prototype.moveTo = function(x, y) {
    this.layer.moveTo(x, y);
    }

  // Move the element
  docElement.prototype.moveBy = function(x, y) {
    this.layer.moveBy(x, y);
    }


  // Set the stacking order of the element
  docElement.prototype.setStackingOrder = function(z) {
    this.layer.zIndex = z;
    }

  // Set the background color of the element
  docElement.prototype.setBgColor = function(color) {
    this.layer.bgColor = color;
    }

  // Set the background image of the element
  docElement.prototype.setBgImage = function(image) {
    this.layer.background.src = image;
    }

  // Change the content of the html body of the element
  docElement.prototype.setBody = function() {
    for (var i = 0; i < arguments.length; i++) {
      this.layer.document.writeln(arguments[i]);
      }
    this.layer.document.close();
    }

  // Get the left position of the element
  docElement.prototype.getLeft = function() {
    return (this.layer.left);
    }

  // Get the top position of the element
  docElement.prototype.getTop = function() {
    return (this.layer.top);
    }

  // Get the width of the element
  docElement.prototype.getWidth = function() {
    return (this.layer.width);
    }

  // Get the height of the element
  docElement.prototype.getHeight = function() {
    return (this.layer.height);
    }

  // Get the stacking order of the element
  docElement.prototype.getStackingOrder = function() {
    return (this.layer.zIndex);
    }

  // Get the visibility (Returns true/false) of the element
  docElement.prototype.isVisible = function() {
    return (this.layer.visibility == "show");
    }

/////////////////////// MICROSOFT BROWSER /////////////////////////////////////////
  } else if (ieBrowser()) {

  // Output the element
  // This function must be called first, to create the element tags in the html page
  docElement.prototype.output = function () {
    var doc = this.window.document;
    // Output the element within a <DIV> tag
    doc.writeln('<DIV ID="' + this.id + '">');
    doc.writeln(this.body);
    doc.writeln("</DIV>");
    // Save a reference to the layer of the element
    this.element = doc.all[this.id];
    this.style = this.element.style;
  }

  // Show the element
  docElement.prototype.show = function(x, y) {
    this.style.visibility = "visible";
    }

  // Hide the element
  docElement.prototype.hide = function(x, y) {
    this.style.visibility = "hidden";
    }

  // Move the element
  docElement.prototype.moveTo = function(x, y) {
    this.style.pixelLeft = x;
    this.style.pixelTop = y;
    }

  // Move the element
  docElement.prototype.moveBy = function(x, y) {
    this.style.pixelLeft += x;
    this.style.pixelTop += y;
    }

  // Set the stacking order of the element
  docElement.prototype.setStackingOrder = function(z) {
    this.style.zIndex = z;
    }

  // Set the background color of the element
  docElement.prototype.setBgColor = function(color) {
    this.style.backgroundColor = color;
    }

  // Set the background image of the element
  docElement.prototype.setBgImage = function(image) {
    this.style.backgroundImage = image;
    }
  // Change the content of the html body of the element
  docElement.prototype.setBody = function() {
    var body = "";
    for (var i = 0; i < arguments.length; i++) {
      body += arguments[i] + "\n";
      }
    this.element.innerHTML = body;
    }

  // Get the left position of the element
  docElement.prototype.getLeft = function() {
    return (this.style.pixelLeft);
    }

  // Get the top position of the element
  docElement.prototype.getTop = function() {
    return (this.style.pixelTop);
    }

  // Get the width of the element
  docElement.prototype.getWidth = function() {
    return (this.style.width);
    }

  // Get the height of the element
  docElement.prototype.getHeight = function() {
    return (this.style.height);
    }

  // Get the stacking order of the element
  docElement.prototype.getStackingOrder = function() {
    return (this.style.zIndex);
    }

  // Get the visibility (Returns true/false) of the element
  docElement.prototype.isVisible = function() {
    return (this.style.visibility == "visible");
    }

  }

0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
LVL 8

Accepted Solution

by:
jbirk earned 200 total points
ID: 2482141
I believe the problem is that the window which is poping up is coming underneath the mouse.  This means that every time the mouse does that it's left the link, which removes the popup, which uncovers the link and pops it up again.

So the solution is to move the popup below the mouse so it doesn't enter it.

If you need this text to be links or something where the mouse needs to enter the popup, then the onmouseout event needs to change.  It'll have to be sure that the mouse is not over the tooltip before closing the popup.

-Josh
0
 

Author Comment

by:stephaneeybert
ID: 2482393
Thanks Josh. But can I ask you for a little more clarification?
You're saying the problem is that the popup "is coming underneath the mouse".
You then suggest to have "the popup below the mouse".
I'm trying to picture a difference between the two options. And how can I make the popup to appear below the mouse?
Again, thanks.
Stephane
0
 
LVL 8

Expert Comment

by:jbirk
ID: 2482704
Sorry about being unclear.  When the popup is created, offset it's y coordinate by about 10 pixels so that the popup window appears 10 pixels below the mouse cursor.  This should fix the problem.

-Josh
0
 

Author Comment

by:stephaneeybert
ID: 2485232
Thanks so much my friend.
0
 
LVL 8

Expert Comment

by:jbirk
ID: 2485831
You're very much welcome!
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

608 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question