Tooltipps dynamisch mit Javascript erstellen

Jack tha Ripper · 27. Juli 2003

habe hier(http://www.webmasterpro.de/content_tip-5424.php) das tutorial gefunden.

wie man daraus entnehmen kann, erscheint ein kleines dynamisches fenster, wenn man (wie bei mir eingestellt)über ein bild fährt. So nun will ich aber nicht das ein text angezeigt wird, sondern ein grösseres bild:

PHP:

<a href="#" onMouseOver="drs('einfache Hilfe rechts.'); return true;" onMouseOut="nd(); return true;">Hilfe rechts</a>

so da wo jetzt "einfache Hilfe rechts" steht, drot gibt man den text ein der erscheinen soll. Wie mach ich das jetzt mit Bildern ??
<img>...</img> klappt leider nit

danke schonmal... Jack

Andreas Gaisbauer · 27. Juli 2003

Hallo,

jetzt nur für den "drs" - das andere sollte analog laufen. Also schauen wir mal wie das Script abläuft:

1) Aufruf:

PHP:

<a href="#" onMouseOver="drs('einfache Hilfe rechts.'); return true;" onMouseOut="nd(); return true;">Hilfe rechts</a>

es wird also die Funktion "drs()" aufgerufen. Als Parameter den Text der erscheinen soll.

2) Die Funktion drs:

PHP:

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

Die Funktion ruft lediglich eine andere Funktion "dts" auf und gibt dieser eine Zahl, und den Text mit...

3) Die Funktion dts:

PHP:

function dts(d,text) { 
txt = "[...] <TR><TD><FONT FACE=\"Arial,Helvetica\" COLOR=\""+textcolor+"\" SIZE=\"-2\">"+text+"</FONT></TD></TR> [...]" 
layerWrite(txt); 
dir = d; 
disp(); 
}

In der zweiten Zeile wird der Text ("+text+") eingefügt. Hier muss die Ännderung erfolgen. Wir löschen "FONT FACE=\"Arial,Helvetica\" COLOR=\""+textcolor+"\" SIZE=\"-2\">"+text+"</FONT>" und ersetzten es mit "<img src="+text+">" und erhalten die geänderte Funktion:

PHP:

function dts(d,text) {
txt = "[...]TR><TD><img src="+text+"></TD></TR>[...]"
layerWrite(txt);
dir = d;
disp();
}

Das wars dann eigentlich auch schon. Der Aufruf sieht jetzt so aus:

PHP:

<a href="#" onMouseOver="drs('dein.jpg'); return true;" onMouseOut="nd(); return true;">Bild rechts</a>

ciao

Jack tha Ripper · 27. Juli 2003

danke dir für die schnelle antwort crono, bye

Jack tha Ripper · 27. Juli 2003

gibt es denn ne mölichkeit, dass der titel und dfas bild angezeigt werden ??

Andreas Gaisbauer · 28. Juli 2003

Natürlich, dazu müssen wir die Funktion ein bisschen umschreiben.
Hier jeweils gleich die "End"-Fassung der Funktionen:

Aufruf:

PHP:

<a href="#" onMouseOver="drs('dein.jpg','Dein Text'); return true;" onMouseOut="nd(); return true;">Hilfe mit Bild rechts</a>

Funktion DRS:

PHP:

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

Funktion DTS:

PHP:

function dts(d,bild,text) {
txt = "[...]<TR><TD>"+text+"</TD></TR><TR><TD><img src='"+bild+"'></TD></TR>[...]"
layerWrite(txt);
dir = d;
disp();
}

sollte funktionieren...

bye

Jack tha Ripper · 30. Juli 2003

hmmm so sieht der quelltext jetzt bei mir aus:

PHP:

<SCRIPT language=JavaScript>
<!--

if (typeof fcolor == 'undefined') { var fcolor = "#D6D3C6";}
if (typeof backcolor == 'undefined') { var backcolor = "#B5AAA5";}
if (typeof textcolor == 'undefined') { var textcolor = "#000000";}
if (typeof capcolor == 'undefined') { var capcolor = "#FFFFFF";}
if (typeof closecolor == 'undefined') { var closecolor = "#9999FF";}
if (typeof width == 'undefined') { var width = "80";}
if (typeof border == 'undefined') { var border = "2";}
if (typeof offsetx == 'undefined') { var offsetx = 10;}
if (typeof offsety == 'undefined') { var offsety = -100;}

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 drs(bild,text) {
        dts(1,bild,text);
}
function nd() {
        if ( cnt >= 1 ) { sw = 0 };
        if ( (ns4) || (ie4) ) {
                if ( sw == 0 ) {
                        snow = 0;
                        hideObject(over);
                } else {
                        cnt++;
                }
        }
}
function dts(d,bild,text) {
txt = "[...]<TR><TD>"+text+"</TD></TR><TR><TD><img src='"+bild+"'></TD></TR>[...]"
layerWrite(txt);
dir = d;
disp();
}
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><img src="+text+"></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
}
//--->

PHP:

<area shape="poly" coords="83,14,21,28,38,109,99,96" onMouseOver="drs('Paul.jpg','Dein Text'); return true;" onMouseOut="nd(); return true;">

aber titel wird nit angezeigt, gehe gerade selber mal durch...

Andreas Gaisbauer · 30. Juli 2003

Hallo,

"[...]<TR><TD>"+text+"</TD></TR><TR><TD><img src='"+bild+"'></TD></TR>[...]"

die [...] stehen nur für rausgkürzten Text. Die Komplette dts sollte so aussehen:

PHP:

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><tr><td>><img src='"+bild+"'></td></tr></TABLE></TD></TR></TABLE>" 
layerWrite(txt); 
dir = d; 
disp(); 
}

Außerdem hast du vergessen die Funktion "drs()" anzupassen:

PHP:

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

teste das bitte mal, und gib mir dann bescheid ob´s geklappt hat, vielleicht hab ich auch was übersehen...

ciao

Jack tha Ripper · 31. Juli 2003

so siehts jetzt bei mir aus...

PHP:

<SCRIPT language=JavaScript>
<!--

if (typeof fcolor == 'undefined') { var fcolor = "#D6D3C6";}
if (typeof backcolor == 'undefined') { var backcolor = "#B5AAA5";}
if (typeof textcolor == 'undefined') { var textcolor = "#000000";}
if (typeof capcolor == 'undefined') { var capcolor = "#FFFFFF";}
if (typeof closecolor == 'undefined') { var closecolor = "#9999FF";}
if (typeof width == 'undefined') { var width = "80";}
if (typeof border == 'undefined') { var border = "2";}
if (typeof offsetx == 'undefined') { var offsetx = 10;}
if (typeof offsety == 'undefined') { var offsety = -100;}

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(bild,text) {
        dts(1,bild,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><tr><td>><img src='"+bild+"'></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>

PHP:

<area shape="poly" coords="83,14,21,28,38,109,99,96" onMouseOver="drs('Paul.jpg','Dein Text'); return true;" onMouseOut="nd(); return true;">

... und bei mir geht gar nichts mehr

Andreas Gaisbauer · 31. Juli 2003

-> Anhang

bye

Jack tha Ripper · 31. Juli 2003

1000 dank, du hast mir sehr viel zeit ersparrt

Tooltipps dynamisch mit Javascript erstellen

Jack tha Ripper

Gesperrt

Andreas Gaisbauer

Erfahrenes Mitglied

Jack tha Ripper

Gesperrt

Jack tha Ripper

Gesperrt

Andreas Gaisbauer

Erfahrenes Mitglied

Jack tha Ripper

Gesperrt

Andreas Gaisbauer

Erfahrenes Mitglied

Jack tha Ripper

Gesperrt

Andreas Gaisbauer

Erfahrenes Mitglied

Anhänge

Jack tha Ripper

Gesperrt

Neue Beiträge