Tooltip-Problem

Kurt Cobain

Kurt Cobain

Erfahrenes Mitglied
Tag Tag

hab mir da was gemacht:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>

<div id="d" style="border: 1px solid #000000; background: #C0C0C0 none repeat scroll 0%; position: absolute; z-index: 99; left: 267px; top: 263px;">
<span id="xcoord"></span><span id="ycoord"></span>
</div>

<img src="./pic.gif" width="100" height="200" style="position: absolute; top:200px;left:200px;z-index: 8;" id="d">

<script type="text/javascript" src="script.js"></script>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>
</html>

und script.js
HTML: 
var bH = false;
var bZ = false;
var showMode = false;




var headerHeight = 65;


if (document.all){}
else document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=mtrack;

function mtrack(e) {
        var lhs = (document.body.offsetWidth - 1000)/2;     //        var lhs = (document.body.offsetWidth - 1000)/2;
        var xcurs = 0;
        var ycurs = 0;

        if (navigator.appName == 'Netscape'){
                xcurs = e.pageX;
                ycurs = e.pageY;
//                showMode = false;
        } else {
                xcurs = event.clientX;
                ycurs = event.clientY;
        }

        var l_xcurs;
        var l_ycurs;

        if (navigator.appName == 'Netscape') {
                document.getElementById('d').style.left=xcurs + 10;
                document.getElementById('d').style.top=ycurs;
                l_xcurs = Math.ceil((xcurs - lhs)/10) + 1;
                l_ycurs = Math.ceil((ycurs - headerHeight)/10);
        } else {
                l_xcurs = Math.ceil((xcurs - lhs)/10) + 1;
                l_ycurs = Math.ceil((ycurs - headerHeight + document.body.scrollTop)/10);
                document.getElementById('d').style.top=ycurs + document.body.scrollTop - 5;
                document.getElementById('d').style.left=xcurs + 14 + document.body.scrollLeft;
        }



        if ((l_ycurs <= 0) || (l_ycurs > 100) || (l_xcurs <= 0) || (l_xcurs > 100)){
                document.getElementById('d').style.display = "none";
        } else {
                document.getElementById('d').style.display = "";
                if (showMode) {
                        document.getElementById('xcoord').innerHTML = "(" + l_xcurs + ",";
                        document.getElementById('ycoord').innerHTML = l_ycurs + ")";
                } else {
                        if (sTitle == "") {
                                document.getElementById('xcoord').innerHTML = "feld nummer";
                                        document.getElementById('xcoord').innerHTML += " (" + l_xcurs + ",";
                                        document.getElementById('ycoord').innerHTML = l_ycurs + ")";
                        } else {
                                document.getElementById('xcoord').innerHTML = sTitle;
                                document.getElementById('ycoord').innerHTML = "";
                        }
                }
        }

        if (!bZ) {
                return;
        }
        var x,y,x1,x2,y1,y2,dx=0,dy=0;
        fact=2;
        opp=100;

        x=event.x;
        y=event.y;

        dx=window.document.body.scrollLeft;
        dy=window.document.body.scrollTop;

        x1=-opp+(x+dx)*fact;        //left
        y1=-opp+(y+dy)*fact - (document.body.scrollTop*fact);        //top
        x2=+opp+(x+dx)*fact;        //right
        y2=+opp+(y+dy)*fact - (document.body.scrollTop*fact);        //bottom

        document.getElementById('een').style.left=(x+dx)*(1-fact);
        document.getElementById('een').style.top=(y+dy)*(1-fact) + document.body.scrollTop;
        document.getElementById('een').style.clip="rect(" +y1 +"px," +x2 +"px," +y2 +"px,"+x1 +"px)";

}

function h(iL, iT, iW, iH) {
        if (!bH) {return;}
        document.getElementById('f').style.left=iL - 1;
        document.getElementById('f').style.top=64+iT;
        document.getElementById('f').style.width=iW + 4;
        document.getElementById('f').style.height=iH + 4;
}

var sTitle="";
function d(o) {

        sTitle = o.title;
}
function e(o) {
        sTitle = "";
}




Jetzt hab ich da ja ein Bild reingemacht. Nun möchte ich, dass wenn man

über das Bild fährt nicht die Koordinatenangabe als Tooltip kommt, sondern ein Tooltip, dass ich dem Bild mitgebe.
so z.b.
HTML: 
<img src="./pic.gif" onmouseover="tooltip:('das ist ein bild')">


Kann mir da jemand helfen? Ich komm nicht weiter und bin selber nicht sehr gut in javascript.


Danke schonmal.

gruß ICH
 
Mein Tooltip-Script macht zwar nicht genau, was du willst, ist aber weniger Code und wenn du in den Quellcode schaust wirst du's sicher anpassen können.

Auch wenn nicht, dürfte es wohl deinen Ansprüchen genügen. Du musst ja nur zu jedem Bild ein div dieser Forum schreiben, dass dann als Tooltip fungiert:
HTML: 
<div id="Tooltip1" class="tooltip" style="background-color:lightgray">
    Ich bin der Tooltip 1<br />Ich kann bliebiges HTML beinhalten
</div>
Und es dann per onmouseover="showTooltip('Tooltip1',this)" im <img>-Tag dem jeweiligen Bild zuordnen.

Sorry, dass ich nicht auf das von dir gepostete eingehe, aber das ist mir einfach zu viel Code um mich da einzulesen und meins sieht dann doch sehr viel übersichtlicher aus.
 
Dann musst halt die Funktion leicht abändern:
Javascript: 
function showTooltip(strId,objSelf) {
    if (tooltips != 0) {
        if (tt) tt.style.display = "none";
        tt = document.getElementById(strId);
        tt.style.display = "block";
        objSelf.onmouseout = new Function('fx','tt.style.display = "none"');
    }
}
 
soll ich das was du da gepostet hst einfach zum code hinzufügen?

und muss das <img> dan die id="tt" haben?


danke schonmal
 
Dir ist klar, dass du bald mit Konsequenzen zu rechnen hast, wenn du weiterhin so flapsig mit den Regeln der deutschen Rechtschreibung umgehst, oder? Nicht, dass es mein Problem wäre, aber die Mods sehen das nicht so gerne und du wurdest gerade erst wieder von einem ermahnt...

Egal, schau dir einfach mal den Quellcode von meinem Script an, dann schau dir den von mir geposteten Code an und dann denk mal scharf nach welches Teil von ersterem letzerer wohl ersetzen wird.

Und nein, das <img> brauch keine Id, nur die Tooltipps...
 
Hallo con-f-use,

ich habe dein Script heute mal eingebaut, läuft super mit Firefox, aber beim Internet Explorer macht er hinter jedem Wort aus dem div-tag nen Zeilenumbruch.

Hast Du vielleicht ne Idee woran das liegen könnte ?

Greets SebM
 
Hallo,

das ist genau der selbe Code, der auf deiner Page steht. Das komische ist, nur wenn ich das auf meiner Seite integriere entsteht dieser Bug, wenn ich dann z.B. den selben Code dann in ne einzelne PHP Datei hau, dann funktioniert der Code auch. Komisch, komisch :/
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück