hallo community!
ich hab da ein (vermutlich eher kleineres) problem mit einem javascript-tooltip. der verwendete code stammt nicht von mir, ich bin da fast gänzlich unwissend. das script ist für mich leider zu komplex, ich blick da nicht so recht durch - was wohl schuld daran ist dass ich den fehler nicht selbst seh.
folgendes:
ich hab das script bekommen und jetzt schon ne ganze weile verwendet, funktioniert bestens, wer will kann sich das ergebnis hier mal ansehen:
http://blog.plastick.org/klick.html
falls sinn und zweck nicht sofort einleuchten: das ist eine kleine linksammlung, beim überfahren eines links mit der maus (klingt brutaler als es ist...) sollte ein kleines fenster erscheinen mit einem kurzen kommentar zur verlinkten seite.
tja, und aktuell versuch ich mich dran die seite generell wein wenig umzukrempeln, möchte dieses script aber wieder verwenden. also hab ich mal alle relevanten inhalte, styles und natürlich das script selber ganz einfach mit copy&paste in die neue seite übertragen, mit diesem ergebnis:
http://plastick.org/klikk.php
-> warum ist mein "tooltip" plötzlich so weit vom mauszeiger entfernt?
das ist das hauptproblem, denn so kann ich das natürlich nicht lassen. ich häng gleich noch das script ran, eventuell sieht hier jemand auf anhieb wo es hakt?
und wo ich schonmal dabei bin - ich versteh wie gesagt nicht viel von javascript. ein paar gedanken mach ich mir ja aber doch dazu...
function logmessage (message) {
return;
var log_elem = logmessage.log_elem || document.getElementById("log");
logmessage.log_elem = log_elem;
var textnode = document.createTextNode(message);
var li_element = document.createElement("li");
li_element.appendChild(textnode);
log_elem.appendChild(li_element);
}
- so beginnt das script, und dieser teil ist für die funktion des "tooltips" selbst doch eigentlich unerheblich - oder täusche ich mich da? sieht jedenfalls so aus als wäre das und die folgenden auskommentierten zeilen, die auf logmessage() zugreifen, überflüssig...
document.write("<style type='text/css'>" +
".linkliste dd { margin:0; padding:0; position:absolute; left: -9000px; top:0; width: 0; overflow: hidden; }" +
"</style>");
- ist die css-angabe im header mittels document.write irgendwie wichtig? also... ists das für das script erforderlich? irgendwie? ansonsten würd ich das eben einfach in die css schreiben.
window.onload = function () {
tooltip.init();
};
var tooltip = new Object();
tooltip.current_dt = null;
tooltip.current_dd = null;
tooltip.init = function () {
var dl_elements = document.getElementsByTagName("dl");
for (var i = 0, dl_element, j = 0, dt_element; i < dl_elements.length; i++) {
dl_element = dl_elements[i];
if (dl_element.className != "linkliste") {
continue;
}
dl_element.onmousemove = tooltip.update;
dl_element.onmouseover = tooltip.show;
dl_element.onmouseout = tooltip.hide;
}
};
tooltip.show = function (e) {
if (tooltip.current_dd) {
tooltip.hide();
}
e = e || window.event;
var target = e.target || e.srcElement;
//logmessage("show target:" + target.nodeName + " handling:" + this.nodeName);
var node = target;
while (node.nodeName != "DT" && node != null) {
node = node.parentNode;
}
tooltip.current_dt = node;
if (tooltip.current_dt.corresponding_dd) {
tooltip.current_dd = tooltip.current_dt.corresponding_dd;
} else {
while (node.nodeName != "DD" && node != null) {
node = node.nextSibling;
}
tooltip.current_dd = tooltip.current_dt.corresponding_dd = node;
}
tooltip.current_dd.className = "visible";
};
tooltip.update = function (e) {
if (!tooltip.current_dd)
return;
e = e || window.event;
//logmessage("update target:" + e.srcElement.nodeName + " handling:" + this.nodeName);
if (e.pageX) {
tooltip.x = e.pageX;
tooltip.y = e.pageY;
} else if (document.documentElement && document.documentElement.scrollTop) {
tooltip.x = e.clientX + document.documentElement.scrollLeft;
tooltip.y = e.clientY + document.documentElement.scrollTop;
} else if (document.body) {
tooltip.x = e.clientX + document.body.scrollLeft;
tooltip.y = e.clientY + document.body.scrollTop;
}
tooltip.current_dd.style.left = (tooltip.x + 15) + "px";
tooltip.current_dd.style.top = (tooltip.y + 20) + "px";
};
tooltip.hide = function () {
//logmessage("mouseout");
tooltip.current_dd.className = "hidden";
tooltip.current_dd.style.left = "-9000px";
};
- vermutlich der hauptteil des scripts, für die funktion verantwortlich. ziemlich viel zeug für so ne simple funktion, aber dieses script wurde mir als stabil, solide und zukunftstauglich empfohlen, ich hab dem mal vertraut (und bin bisher gut damit gefahren).
eigentlich dachte ich dieser abschnitt recht weit unten:
tooltip.current_dd.style.left = (tooltip.x + 15) + "px";
tooltip.current_dd.style.top = (tooltip.y + 20) + "px";
... wäre für die position meines "tooltips" verantwortlich, aber wenn ich diese werte sehe und mir die position beim neuen beispiel ansehe... irgendwas läuft da schief.
ich vermute ja dass die erfassung von tooltip.x/tooltip.y irgendwie mißglückt, aber aus diesen if-else-bedingungen werd ich nicht schlau.
ja, genug der worte - kann/will mir da jemand unter die arme greifen? sieht jemand schon woran es liegt? wennnicht - wie krieg ich das hin?
grüße, schönen abend,
sebi