JavaScript Tutorial von Thomas Barmetler

Tool-Tip #1

Beim Überfahren des Link mit der Maus wird in einem kleinen PopUp direkt am Mauszeiger ein kurzer Hilfetext eingeblendet.

.....

Hallo, ich bin eine Pop-Up Hilfe

Diesen Code nach dem </TITLE> Tag in SCRIPT-Tags einschliessen:

<!-- Verstecke nachfolgendes vor aelteren Browsern
//Autor des Skripts: Lennart Steinke, www.steinke.net
//Dieses Skript stammt vom JavaScript Einführungskurs
//von Thomas Barmetler: ***** www.barmetler.de *****
//Bitte   entfernen   Sie   diesen   Vermerk   nicht  !

var mx=0;
var my=0;
isNetscape = false;
function watch_mouse(e){
  if (isNetscape){
    mx = e.x;
    my = e.y;
  }
  else{
    mx = window.event.x;
    my = window.event.y;
  }
}

function ShowBubble(text){
  if (isNetscape){
    with (document.bubble.document){
      open();
      write("<span class='BubbleClass'>" + text +"</span>");
      close();
    }
    document.bubble.left = mx;
    document.bubble.top  = my +10;
    document.bubble.visibility = "SHOW";
  }
  else{
    bubble.style.left = mx;
    bubble.style.top  = my +10;
    document.all.bubble.innerHTML = "<table border=0><tr><td><span class='BubbleClass'>" + text +"</span></td></tr></table>";
    bubble.style.visibility = "visible";
  }
}

function HideBubble(){
  if (isNetscape){
    document.bubble.visibility = "HIDE";
  }
  else{
    bubble.style.visibility = "hidden";
  }
}

function init(){
  if (navigator.appName =="Netscape") {
    isNetscape = true;
  }
  BrowserVar = parseFloat(navigator.appVersion);
  if (BrowserVar < 4){
    return;
  }
  if (isNetscape){
    document.captureEvents(Event.MOUSEMOVE);
  }
  document.onmousemove = watch_mouse;
  HideBubble();
}
// beende das Versteckspiel -->

So muss ein Link aussehen wo der Tool-Tip erscheinen soll:

<a href="http://www.barmetler.de" ONMOUSEOVER="ShowBubble('Hier geht es <br> zur Homepage des Autors ...')" onmouseout ="HideBubble()"> ich bin eine Pop-Up Hilfe</a>