Why the callback onMouseOut() is called?

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

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".
 

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");
    }

  }

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

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

Thanks so much my friend.

You're very much welcome!