✔ JS-Tooltip an Mauszeiger koppeln (Script-Modifikation) ?!

FRitter · 12. November 2004

Hallo an alle!

Ich muss dringend das folgende Script in so fern modifizieren, dass das Tooltip jeweils an der aktuellen Mausposition angezeigt wird (es sollte dann noch per Quelltext per Pixel genauer angepasst werden können, wie weit es v.d. Cursur entfernt sein soll).

Bislang habe ich die rot markierte Y-Position jeweils verändert, um die Position auch bei länger zu scrollenden Sites richtig darzustellen - jetzt allerdings muss lt. Vorgabe das Tooltip ca 30 x pro Site angezeigt werden und also jeweils a.d. Mausposition...

Wer kann mir da helfen? Bislang führte jede Script-Modifikation ins "Chaos" - möchte allerdings dieses Script so beibehalten, da es bereits schon in viele Sites von uns integriert worden ist und soz. nur etwas modifiziert werden sollte.

Schonmal danke für die Einarbeitung in dieses Script und für eure Mühe !

PS: Ich muss leider so viel Quellcode hier nachfolgend posten, da das Script modifiziert werden soll...

Hier der in der jeweiligen HTML-Site integrierte Teil (vielleicht kann man schon dort per style-sheet die Position a.d. Maus koppeln i.V.m. JavaScript ?)

Code:

<div id=PopUpInfo style="POSITION: absolute; TOP: 0px; Z-INDEX: 30; LEFT: 0px">
</div>

Hier der eigentliche Code der JS-Datei:

Code:

if (typeof fcolor == 'undefined') { var fcolor = "#FFFFC0";}
if (typeof backcolor == 'undefined') { var backcolor = "#000000";}
if (typeof textcolor == 'undefined') { var textcolor = "#000000";}
if (typeof capcolor == 'undefined') { var capcolor = "#FFFFFF";}
if (typeof closecolor == 'undefined') { var closecolor = "#496CA0";}
if (typeof width == 'undefined') { var width = "300";}
if (typeof border == 'undefined') { var border = "1";}
if (typeof offsetx == 'undefined') { var offsetx = -350;}
if (typeof offsety == 'undefined') { var offsety = -75;}

ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false

if (ie4) {
	if (navigator.userAgent.indexOf('MSIE 5')>0) {
		ie5 = true;
	} else {
		ie5 = false; }
} else {
	ie5 = false;
}

var x = 0;
var y = 0;
var snow = 0;
var sw = 0;
var cnt = 0;
var dir = 1;
var tr = 1;
if ( (ns4) || (ie4) ) {
	if (ns4) over = document.PopUpInfo
	if (ie4) over = PopUpInfo.style
	document.onmousemove = mouseMove
	if (ns4) document.captureEvents(Event.MOUSEMOVE)
}

function drs(text) {
	dts(1,text);
}

function drc(text, title) {
	dtc(1,text,title);
}

function src(text,title) {
	stc(1,text,title);
}

function dls(text) {
	dts(0,text);
}

function dlc(text, title) {
	dtc(0,text,title);
}

function slc(text,title) {
	stc(0,text,title);
}

function dcs(text) {
	dts(2,text);
}

function dcc(text, title) {
	dtc(2,text,title);
}

function scc(text,title) {
	stc(2,text,title);
}

function nd() {
	if ( cnt >= 1 ) { sw = 0 };
	if ( (ns4) || (ie4) ) {
		if ( sw == 0 ) {
			snow = 0;
			hideObject(over);
		} else {
			cnt++;
		}
	}
}

function dts(d,text) {
	txt = "<TABLE WIDTH="+width+" BORDER=0 CELLPADDING="+border+" CELLSPACING=0 BGCOLOR=\""+backcolor+"\"><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=\""+fcolor+"\"><TR><TD><FONT FACE=\"Arial,Helvetica\" COLOR=\""+textcolor+"\" SIZE=\"1\">"+text+"</FONT></TD></TR></TABLE></TD></TR></TABLE>"
	layerWrite(txt);
	dir = d;
	disp();
}

function dtc(d,text, title) {
	txt = "<TABLE WIDTH="+width+" BORDER=0 CELLPADDING="+border+" CELLSPACING=0 BGCOLOR=\""+backcolor+"\"><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD height=20><SPAN ID=\"PTT\"><FONT COLOR=\""+capcolor+"\" class=ueberschrift>"+title+"</FONT></SPAN></TD></TR></TABLE><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=\""+fcolor+"\"><TR><TD><SPAN ID=\"PST\"><FONT COLOR=\""+textcolor+"\" class=small>"+text+"</FONT><SPAN></TD></TR></TABLE></TD></TR></TABLE>"
	layerWrite(txt);
	dir = d;
	disp();
}

function stc(d,text, title) {
	sw = 1;
	cnt = 0;
	txt = "<TABLE WIDTH="+width+" BORDER=0 CELLPADDING="+border+" CELLSPACING=0 BGCOLOR=\""+backcolor+"\"><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD><SPAN ID=\"PTT\"><B><FONT COLOR=\""+capcolor+"\">"+title+"</FONT></B></SPAN></TD><TD ALIGN=RIGHT><A HREF=\"/\" onMouseOver=\"cClick();\" ID=\"PCL\"><FONT COLOR=\""+closecolor+"\">Close</FONT></A></TD></TR></TABLE><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=\""+fcolor+"\"><TR><TD><SPAN ID=\"PST\"><FONT COLOR=\""+textcolor+"\">"+text+"</FONT><SPAN></TD></TR></TABLE></TD></TR></TABLE>"
	layerWrite(txt);
	dir = d;
	disp();
	snow = 0;
}

function disp() {
	if ( (ns4) || (ie4) ) {
		if (snow == 0) 	{
			if (dir == 2) { // Center
				moveTo(over,x+offsetx-(width/2),y+offsety);
			}
			if (dir == 1) { // Right
				moveTo(over,x+offsetx,y+offsety);
			}
			if (dir == 0) { // Left
				moveTo(over,x-offsetx-width,y+offsety);
			}
			showObject(over);
			snow = 1;
		}
	}
}

function mouseMove(e) {
	if (ns4) {x=e.pageX; y=e.pageY;}
	if (ie4) {x=event.x; y=event.y;}
	if (ie5) {x=event.x+document.body.scrollLeft; y=event.y+document.body.scrollTop;}
	if (snow) {
		if (dir == 2) { // Center
			moveTo(over,x+offsetx-(width/2),y+offsety);
		}
		if (dir == 1) { // Right
			moveTo(over,x+offsetx,y+offsety);
		}
		if (dir == 0) { // Left
			moveTo(over,x-offsetx-width,y+offsety);
		}
	}
}

function cClick() {
	hideObject(over);
	sw=0;
}

function layerWrite(txt) {
        if (ns4) {
                var lyr = document.PopUpInfo.document
                lyr.write(txt)
                lyr.close()
        }
        else if (ie4) document.all["PopUpInfo"].innerHTML = txt
		if (tr) { trk(); }
}

function showObject(obj) {
        if (ns4) obj.visibility = "show"
        else if (ie4) obj.visibility = "visible"
}

function hideObject(obj) {
        if (ns4) obj.visibility = "hide"
        else if (ie4) obj.visibility = "hidden"
}

function moveTo(obj,xL,yL) {
        obj.left = xL
        obj.top = yL
}

function trk() {
	if ( (ns4) || (ie4) ) {
			nt=new Image(32,32);
			bt=new Image(1,1);
			refnd=new Image(1,1);
			
	}
	tr = 0;
}

Und zu guter letzt der Link von dem aus das Tooltip angezeigt werden soll (ebenfalls HTML-Datei):

Code:

<span style='font:10.0px Arial; color:silver'>
<a onClick="window.location.href='.....'" onmouseover="drc('<div align=justify><font face=Arial size=-1>Beschreibungstext des Tooltips.....</div></font>','<CENTER><font face=Arial size=-1><b>Titel des Tooltips .....</font></b></font></center>'); return true;"
onmouseout="nd(); return true;">
</a>

Sven Mintel · 13. November 2004

Die Funktion moseMove() ermittelt da doch schon die Koordinaten.

Das Problem bei diesem Skript ist, dass es
a:nur für IE und Netscape4 konzipiert ist
b:nicht funktioniert...so wie es da steht

Das umzubauen ist unnütze Arbeit, da es genug funktionierender Varianten gibt.

Such dir ein Tooltipskript aus diesem Jahrtausend, ...auch hier im Forum dürftest du dabei fündig werden.

FRitter · 16. November 2004

Hallo zurück,

falls mir schon der Tipp gegeben wird, mir ein alternatives Script zu beschaffen, hätte ich doch gerne gewusst woher ? - Fakt ist, dass das Script bei mir erfolgreich im Einsatz ist (speziell b. Verwendung des IE5/6) und ich auch vom Layout leider noch kein Vergleichbares im Web gefunden habe...zudem ist es zwar im Umfang der Programmierung etwas aufwendiger geschrieben, aber dafür lassen sich auch viele Parameter schnell anpassen...

Soviel zu den Gründen, warum das Script angepasst werden MUSS und ich kein neues suche.

Sicherlich wird die Mauspos. mittels der Fkt. "moseMove()" ermittelt - aber es wäre auch schön, wenn jemand mit dieser Info weiterarbeiten könnte...

Selbst habe ich folgendes festgestellt:
Die Fkt. "moveTo" verschiebt am Ende den Output an die gewünschte Stelle - aber wie kann ich dort definieren, dass das Tooltip wirklich a.d. Mauspos. gekoppelt wird? Oder muss ich mit "ScrollBy/To" arbeiten?

Code:

function moveTo(obj,xL,yL) {
	obj.left = x-300; 	// obj.left = xL
	obj.top = y-180; 	// obj.top = yL
}

Wo sind denn hier die JS-Profis ?

FRitter · 16. November 2004

Und hier die Lösung (zusammengestellt - aber funktionsfähig):

Damit hat sich das Thema erledigt, danke !

Code:

if (typeof fcolor == 'undefined') { var fcolor = "#FFFFC0";}
if (typeof backcolor == 'undefined') { var backcolor = "#000000";}
if (typeof textcolor == 'undefined') { var textcolor = "#000000";}
if (typeof capcolor == 'undefined') { var capcolor = "#FFFFFF";}
if (typeof closecolor == 'undefined') { var closecolor = "#496CA0";}
if (typeof width == 'undefined') { var width = "300";}
if (typeof border == 'undefined') { var border = "1";}
if (typeof offsetx == 'undefined') { var offsetx = 0;}
if (typeof offsety == 'undefined') { var offsety = 0;}

ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
ns6 = document.getElementById && !document.all

if (ie4) {
	if (navigator.userAgent.indexOf('MSIE 5')>0) {
		ie5 = true;
	} else {
		ie5 = false; }
} else {
	ie5 = false;
}

var x = 0;
var y = 0;
var snow = 0;
var sw = 0;
var cnt = 0;
var dir = 1;
var tr = 1;
if ( (ns4) || (ie4) ) {
	if (ns4) over = document.PopUpInfo
	if (ie4) over = PopUpInfo.style
	document.onmousemove = mouseMove
	if (ns4) document.captureEvents(Event.MOUSEMOVE)
}

function drs(text) {
	dts(1,text);
}

function drc(text, title) {
	dtc(1,text,title);
}

function src(text,title) {
	stc(1,text,title);
}

function dls(text) {
	dts(0,text);
}

function dlc(text, title) {
	dtc(0,text,title);
}

function slc(text,title) {
	stc(0,text,title);
}

function dcs(text) {
	dts(2,text);
}

function dcc(text, title) {
	dtc(2,text,title);
}

function scc(text,title) {
	stc(2,text,title);
}

function nd() {
	if ( cnt >= 1 ) { sw = 0 };
	if ( (ns4) || (ie4) ) {
		if ( sw == 0 ) {
			snow = 0;
			hideObject(over);
		} else {
			cnt++;
		}
	}
}

function dts(d,text) {
	txt = "<TABLE WIDTH="+width+" BORDER=0 CELLPADDING="+border+" CELLSPACING=0 BGCOLOR=\""+backcolor+"\"><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=\""+fcolor+"\"><TR><TD><FONT FACE=\"Arial,Helvetica\" COLOR=\""+textcolor+"\" SIZE=\"1\">"+text+"</FONT></TD></TR></TABLE></TD></TR></TABLE>"
	layerWrite(txt);
	dir = d;
	disp();
}

function dtc(d,text, title) {
	txt = "<TABLE WIDTH="+width+" BORDER=0 CELLPADDING="+border+" CELLSPACING=0 BGCOLOR=\""+backcolor+"\"><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD height=20><SPAN ID=\"PTT\"><FONT COLOR=\""+capcolor+"\" class=ueberschrift>"+title+"</FONT></SPAN></TD></TR></TABLE><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=\""+fcolor+"\"><TR><TD><SPAN ID=\"PST\"><FONT COLOR=\""+textcolor+"\" class=small>"+text+"</FONT><SPAN></TD></TR></TABLE></TD></TR></TABLE>"
	layerWrite(txt);
	dir = d;
	disp();
}

function stc(d,text, title) {
	sw = 1;
	cnt = 0;
	txt = "<TABLE WIDTH="+width+" BORDER=0 CELLPADDING="+border+" CELLSPACING=0 BGCOLOR=\""+backcolor+"\"><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD><SPAN ID=\"PTT\"><B><FONT COLOR=\""+capcolor+"\">"+title+"</FONT></B></SPAN></TD><TD ALIGN=RIGHT><A HREF=\"/\" onMouseOver=\"cClick();\" ID=\"PCL\"><FONT COLOR=\""+closecolor+"\">Close</FONT></A></TD></TR></TABLE><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=\""+fcolor+"\"><TR><TD><SPAN ID=\"PST\"><FONT COLOR=\""+textcolor+"\">"+text+"</FONT><SPAN></TD></TR></TABLE></TD></TR></TABLE>"
	layerWrite(txt);
	dir = d;
	disp();
	snow = 0;
}

function mouseMove(e) {
        if ((ns4) || (ns6)) {x=e.pageX; y=e.pageY}
        if (ie4) {x=event.x+document.body.scrollLeft; y=event.y+document.body.scrollTop;}
        if (snow) {
                     moveTo(over,x+offsetx,y+offsety);
                  }
}

function disp() {
	if ( (ns4) || (ie4) ) {
		if (snow == 0) 	{
			if (dir == 2) { // Center
				moveTo(over,x+offsetx-(width/2),y+offsety);
			}
			if (dir == 1) { // Right
				moveTo(over,x+offsetx,y+offsety);
			}
			if (dir == 0) { // Left
				moveTo(over,x-offsetx-width,y+offsety);
			}
			showObject(over);
			snow = 1;
		}
	}
}

function cClick() {
	hideObject(over);
	sw=0;
}

function layerWrite(txt) {
        if (ns4) {
                var lyr = document.PopUpInfo.document
                lyr.write(txt)
                lyr.close()
        }
        else if (ie4) document.all["PopUpInfo"].innerHTML = txt
		if (tr) { trk(); }
}

function showObject(obj) {
        if (ns4) obj.visibility = "show"
        else if (ie4) obj.visibility = "visible"
}

function hideObject(obj) {
        if (ns4) obj.visibility = "hide"
        else if (ie4) obj.visibility = "hidden"
}

function moveTo(obj,xL,yL) {
	obj.left = x-300; 	// obj.left = xL
	obj.top = y-180; 	// obj.top = yL
}

function trk() {
	if ( (ns4) || (ie4) ) {
			nt=new Image(32,32);
			bt=new Image(1,1);
			refnd=new Image(1,1);
			
	}
	tr = 0;
}

Sven Mintel · 16. November 2004

Dein Skript funktioniert immer noch nicht in Browsern, welche nicht IE oder Netscape4 sind....also zu gut deutsch ist der einzige Browser, der in diesem Jahrtausend veröffentlicht wurde, und damit was anfangen kann, der IE6.

Ansonsten

falls mir schon der Tipp gegeben wird, mir ein alternatives Script zu beschaffen, hätte ich doch gerne gewusst woher

.....wie wäre es mit der Benutzung der Forensuche bzw.

....das Wort "Tooltip" in eine Suchmaske einzugeben sollte doch im Rahmen des Zumutbaren sein.

✔ JS-Tooltip an Mauszeiger koppeln (Script-Modifikation) ?!

FRitter

Erfahrenes Mitglied

Sven Mintel

Mitglied

FRitter

Erfahrenes Mitglied

FRitter

Erfahrenes Mitglied

Sven Mintel

Mitglied

Neue Beiträge