Hier mal eins das ich geschrieben habe.. sicher nicht perfekt, aber immerhin.
Es bewegt sich nicht mit der Maus mit wie auf der Beispielsseite, sondern ist nur wie ein Tooltip, der aber sofort erscheint, andere Farben hat, und auch HTML beeinhalten kann.
Getestet auf Mozilla 1, IE 6/win und Opera 7. Im N4 wirds net funktionieren.
Hab das nur schnell aus der Seite rauskopiert, sag wenns Probleme gibt.
<script type="text/javascript">
function kastl_her(wasdrin) {
if (document.getElementById) {
pop = document.getElementById('popupinfo');
//screen width
if (document.all) { var breite = document.body.clientWidth; var hoehe = document.body.clientHeight; }
else { var breite = window.innerWidth; var hoehe = window.innerHeight; }
if (document.all) {
var ieBox = document.compatMode != "CSS1Compat";
var cont = ieBox ? document.body : document.documentElement;
mouseY += cont.scrollTop;
}
var coordx = mouseX + 10;
var coordy = mouseY + 10;
if((coordx + pop.offsetWidth) > breite) { coordx = breite - pop.offsetWidth - 10; }
pop.style.left= coordx + 'px'; pop.style.top= coordy + 'px';
pop.innerHTML=wasdrin;
pop.style.display='block';
}
}
function saveMouseCoords (e) {
if (window.Event) { // Netscape
mouseX = e.pageX; mouseY = e.pageY;
} else { // MSIE
mouseX = window.event.clientX; mouseY = window.event.clientY;
}
}
if (document.captureEvents) {
document.captureEvents (Event.MOUSEMOVE);
document.onmousemove = saveMouseCoords;
}
function kastl_weg() {
if(document.getElementById) {
document.getElementById('popupinfo').style.display='none';
document.getElementById('popupinfo').innerHTML='';
}
}
</script>
... </head> ...
<!-- das hier ist ganz wichtig -->
<div id="popupinfo" style="position:absolute;display:none;width:300px;color:#000;background-color:#648CE3;border:1px solid #9eb9f2;padding:5px;"></div>
<!-- und so zeigst du es an -->
<a href="javascript:void(0)" onmouseover="kastl_her('Hier der zu erscheinende <b>Popup-Text!</b>')" onmouseout="kastl_weg()">Maus mich over!</a>
- - - -
Nachtrag: Farben/Linien und so stellst du im style-Attribut vom Popup-div unten ein. Wenn das von Tooltip zu Tooltip verschieden sein soll, machst du folgendes:
...
function kastl_her(wasdrin
, textfarbe, hgfarbe, linienfarbe) {
...
pop.style.left= coordx + 'px'; pop.style.top= coordy + 'px';
pop.style.color= textfarbe; pop.style.backgroundColor= hgfarbe; pop.style.borderColor= linienfarbe;
...
<a href="javascript:void(0)" onmouseover="kastl_her('Hier der zu erscheinende <b>Popup-Text!</b>'
, '#000000', '#FF0000','#000000')" onmouseout="kastl_weg()">Maus mich over!</a>
