✔ mouseover Infobox

forsterm

forsterm

Erfahrenes Mitglied
Habe folgendes Problem.

Ich möchte wenn man mit der Maus über einen Link fährt neben dem Link eine Infobox anzeigen. Hab dazu auch schon ein Javascript gefunden,

HTML: 
<BODY>
<DIV id=overDiv style="POSITION: absolute"></DIV>
<SCRIPT language=JavaScript>
<!--
if (typeof fcolor == 'undefined') { var fcolor = "#EBEBEB";}//Hintergrund
if (typeof backcolor == 'undefined') { var backcolor = "#000000";}//Rahmen
if (typeof textcolor == 'undefined') { var textcolor = "green";}//Text
if (typeof capcolor == 'undefined') { var capcolor = "";}
if (typeof closecolor == 'undefined') { var closecolor = "";}
if (typeof width == 'undefined') { var width = "180";}
if (typeof border == 'undefined') { var border = "1";}
if (typeof offsetx == 'undefined') { var offsetx = 10;}
if (typeof offsety == 'undefined') { var offsety = 10;}
ns4 = (document.layers)? true:false
ie4 = (document.all)? true: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.overDiv
if (ie4) over = overDiv.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=\"-2\">"+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><SPAN ID=\"PTT\"><B><FONT COLOR=\""+capcolor+"\">"+title+"</FONT></B></SPAN></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();
}
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 (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.overDiv.document
				lyr.write(txt)
				lyr.close()
		}
		else if (ie4) document.all["overDiv"].innerHTML = txt
if (tr) { }
}
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
}
//--->
</SCRIPT>
</BODY>

wenn ich nun über folgenden Link fahre,

HTML: 
<a onmouseover="drs('Text'); return true;" onmouseout="nd(); return true;" href="sdfsdf">Link</a>

wird solange die Maus über dem Link ist eine Infobox mit dem Inhalt Text ausgegeben.
Wenn ich jetzt aber weiter nach unten scrolle, wir die Infobox nicht mehr neben dem Link angezeigt sondern weiter oben.

Wie muss ich es nun anstellen bzw. wie muss das Script geändert werden, damit die Infobox immer neben dem Link angezeigt wird?

Vielen Dank schon mal im voraus

Ps: Ich weiß das es zu diesem Thema sehr viele Beiträge (auch auf tutorials.de) gibt, aber ich hab leider nigends was passendes gefunden.
 

Anhänge

  • mouseover_infobox.zip
    1,4 KB · Aufrufe: 42
Zuletzt bearbeitet:
Kann mir den niemand Helfen? :(

Ich möchte doch bloß, dass die Infobox die sich öffnet wenn man über einen Link fährt immer neben dem Link steht.

Für einen Profi dürfte das doch kein Problem sein.

Für mich leider schon, da ich mich in Javascript überhaupt nicht aus kenne.

Bin um jeden Lösungsvorschlag dankbar!
 
Zuletzt bearbeitet:
Hallo....

Das pushen von Beiträgen ist nicht nötig und nicht erwünscht.

Das ist das 2te mal diese Woche, dass jemand genau dieses Skript postet.
Beim ersten mal war meine Antwort, dass dieses Skript so ziemlich in keinem aktuellen Browser läuft, da es uralt ist. Da es genug gute und funktioniertende Tooltip-Skripte gibt, wäre es daher überflüssig, dieses Skript anzupassen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück