Ergebnis 1 bis 13 von 13
  1. #1
    muejan ist offline Grünschnabel
    registriert
    07-08-2003
    Beiträge
    3

    [JS] hier: tooltip für ie, ns, mozilla, opera

    Hi zusammen,

    da ich auf jswelt vergeblich nach einer Funktion für Tooltips gesucht habe, die auf ie, ns, mozilla und opera funktioniert, habe ich selbst eine programmiert und will die natürlich nicht vorenthalten.

    Ich habe auf IE 6, NS 7.01, Mozilla 1.3.1 und Opera 7.03 getestet und es müsste auch auf NS 4 und ab IE 4 funktionieren.

    Wäre nett, wenn ihr schreiben könntet, wo es noch Fehler gibt oder wo es funktioniert außer auf den getesteten.

    Viele Grüße
    Jan

    Hier das Skript:
    -----------------------------------------------------------------

    <html>
    <head>

    <script type="text/javascript">

    var ie, ns;
    var active = false;

    ie = document.all ? 1 : 0;
    ns4 = document.layers ? 1 : 0;
    nsplus = window.netscape ? 1 : 0;

    //alert("ie: "+ie+"\nns4: "+ns4+"\nnsplus: "+nsplus);

    function showTip(content) {
    active = true;
    document.getElementById("tooltip").innerHTML = "<p class='tooltip'>" + content + "</p>";
    document.getElementById("tooltip").style.visibility = "visible";
    }

    function hideTip() {
    active = false;
    document.getElementById("tooltip").style.visibility = "hidden";
    }

    function setTipPos(e) {

    if(active) {

    if(ie) {
    document.getElementById("tooltip").style.top = event.y + 5;
    document.getElementById("tooltip").style.left = event.x + 5;
    }

    if(ns4) {
    document.getElementById("tooltip").left = e.pageX + 5;
    document.getElementById("tooltip").top = e.pageY + 5;
    }

    if (nsplus) {
    document.getElementById("tooltip").style.left = e.pageX + 5;
    document.getElementById("tooltip").style.top = e.pageY + 5;
    }

    } else {
    if(ns4) {
    document.getElementById("tooltip").left = -100;
    document.getElementById("tooltip").top = -100;
    } else {
    document.getElementById("tooltip").style.top = -100;
    document.getElementById("tooltip").style.left = -100;
    }
    }
    }

    if(ns4 || nsplus) {
    document.onmousemove = setTipPos;
    }

    </script>

    </head>
    <body onmousemove="javascript:setTipPos();">

    <div id="tooltip" style="position: absolute; visibility: hidden; width: 100px; height: 100px; border: 1pt solid black; background-color: #CCCCCC;">
    <p class="tooltip">
    Dies ist mein Tiptext!
    </p>
    </div>

    <a href="#" onmouseover="javascript:showTip('Tiptext 1');" onmouseout="javascript:hideTip();">Link 1</a><br><br><br>
    <a href="#" onmouseover="javascript:showTip('Tiptext 2');" onmouseout="javascript:hideTip();">Link 2</a><br><br><br>
    <p onmouseover="javascript:showTip('Tiptext 3');" onmouseout="javascript:hideTip();">Das ganze funktioniert<br>nicht nur mit Links,<br> wie man an diesem Absatz<br>sieht</p>

    </body>
    </html>
    Geändert von muejan (07-08-2003 um 10:38 Uhr)

  2. #2
    muejan ist offline Grünschnabel
    registriert
    07-08-2003
    Beiträge
    3
    Eigentlich sollte das kein Skript-Check werden, ich wollte das Skript nur veröffentlichen, da es auf mehr Browser-Versionen funktioniert als die zahlreichen Tooltips auf jswelt. Aber ok...

    Noch was:
    Ich wollte wie verlangt dann wenigstens das [js] in den Betreff schreiben, aber das zeigt es nach dem Ändern in der Thread-Übersicht nicht an...
    Geändert von muejan (07-08-2003 um 10:39 Uhr)

  3. #3
    Avatar von womstar
    womstar ist offline Lounge-Member
    registriert
    22-07-2002
    Ort
    latente matrix
    Beiträge
    5.913
    ns4.7 geht leider nicht
    opera 5 geht leider nicht

    ns6 geht
    IE ist klar.

    ns4.7 kennt kein innerHTML und es sollte statt div -> layer verwendet werden. desweiteren ist getElementById doch ehr für die neueren browser, somit kannst du es eigentlich vergessen das das script auch für ältere browser läuft.

    if(ns4) {
    document.getElementById("tooltip").left = -100;
    document.getElementById("tooltip").top = -100;
    } else {


    diese zeile quatsch! wie gesagt ns4 kennt kein getElementById.
    so wäre es besser:
    document.tooltip.left = -100

    und es wäre für ältere browser besser wenn ein captureEvent gesetzt wird für onMouseMove.


    müssen wir da vielleicht noch etwas nachlesen?

  4. #4
    fragensteller ist offline Foren As
    registriert
    15-07-2003
    Ort
    Wilsum [Nordhorn]
    Beiträge
    87
    @ womstar

    du meintest sicher document.all.tooltip.left
    [Darkblue M] - Der Fragensteller

    meine JS-Scripts (ziemlich alt)

  5. #5
    Avatar von womstar
    womstar ist offline Lounge-Member
    registriert
    22-07-2002
    Ort
    latente matrix
    Beiträge
    5.913
    Originally posted by fragensteller
    @ womstar

    du meintest sicher document.all.tooltip.left

    ich denke ich weis was ich sage!

    ne frage an den fragesteller.
    für was steht all und welcher browser unterstütz all??

  6. #6
    Avatar von Albu
    Albu ist offline Foren-Gott
    registriert
    04-07-2001
    Beiträge
    13.501
    Originally posted by womstar
    für was steht all und welcher browser unterstütz all??
    Opera, wenn man ihn auf Identify as MSIE 6.0 stellt??
    1. Get people to play Space Taxi
    2. Sell real estates on neptun
    3. Profit!

    IE is not a browser, it is a scream.


    Outside of a dog, a book is man's best friend. Inside of a dog, it's too dark to read.

  7. #7
    Avatar von kasimir83
    kasimir83 ist offline Lounge-Member
    registriert
    30-03-2002
    Ort
    Dresden
    Beiträge
    5.879
    Original geschrieben von womstar
    ich denke ich weis was ich sage!

    ne frage an den fragesteller.
    für was steht all und welcher browser unterstütz all??
    Der Indernetzverplärrer und alle die sich für ihn ausgeben können bzw. diese lustige Eigenschaft kopiert haben?



    Die Haptik deiner Website ist scheiße.

    Ein Nutzer braucht das Root-Passwort so dringend wie Nitroglyzerin durchgeschüttelt werden muß.

  8. #8
    fragensteller ist offline Foren As
    registriert
    15-07-2003
    Ort
    Wilsum [Nordhorn]
    Beiträge
    87
    @womstar

    tut mir leid, wenn du dich jetzt angegriffen fühltest ... aber du meintest ja, dat funzt allet mit dem ie ... dann schreib dat doch mal so, wie du dat meintest ... wird sicherlich nich funktionieren ...
    [Darkblue M] - Der Fragensteller

    meine JS-Scripts (ziemlich alt)

  9. #9
    Avatar von womstar
    womstar ist offline Lounge-Member
    registriert
    22-07-2002
    Ort
    latente matrix
    Beiträge
    5.913
    also bitte junge les doch mal was ich geschreiben hab...

    diese zeile quatsch! wie gesagt ns4 kennt kein getElementById.
    so wäre es besser:
    document.tooltip.left = -100
    dann lese noch mal in deinem büchlein nach, wie man ns4 anspricht, voraussetzung für diese schreibweise sind layers (<layer>) und was anderes versteht und handelt ns4 nicht.

  10. #10
    Avatar von Albu
    Albu ist offline Foren-Gott
    registriert
    04-07-2001
    Beiträge
    13.501
    Originally posted by womstar
    ... voraussetzung für diese schreibweise sind layers (<layer>) und was anderes versteht und handelt ns4 nicht.
    [ergänz] oder <div> [/ergänz]
    1. Get people to play Space Taxi
    2. Sell real estates on neptun
    3. Profit!

    IE is not a browser, it is a scream.


    Outside of a dog, a book is man's best friend. Inside of a dog, it's too dark to read.

  11. #11
    Avatar von womstar
    womstar ist offline Lounge-Member
    registriert
    22-07-2002
    Ort
    latente matrix
    Beiträge
    5.913
    ja auch divs, aber im ns4.7 ist das handling in diesem fall mit layers optimal.

    Code:
    <html>
    <head>
    <meta name="generator" content="notepad">
    
    <script> 
    ns = navigator.userAgent.indexOf("Netscape")>-1;
    
    op = navigator.userAgent.indexOf("Opera")>-1;
    
    abstand = 20;
    
    tooltipp = function(txt,id,action) {
    
    	if(document.layers) {
    
    		with(document.layers[id]) {
    
    			document.open();
    			document.write(txt);
    			document.close();
    			visibility = (action=="hidden") ? action = "hide" : action = "show";
    		}
    
    	} else if(document.all) {
    		
    		document.all[id].innerHTML  = txt;
    		document.all[id].style.visibility = action;
    
    	} else if(document.getElementById) {
    
    		document.getElementById(id).innerHTML  = txt;
    		document.getElementById(id).style.visibility = action;
    	}
    };
    
    if(document.layers) document.captureEvents(Event.MOUSEMOVE);
    
    document.onmousemove = function(e) {
    
    	if(document.layers||ns) {
    
    		(document.layers) ? l = document.layers["tipp"] : l = document.getElementById("tipp").style;
    
    		l.left 		= e.pageX+abstand;
    		l.top  		= e.pageY;
    
    	} else if(document.all) {
    		
    		document.all["tipp"].style.left = event.x+abstand;
    		document.all["tipp"].style.top  = event.y;
    
    	} else if(document.getElementById) {
    
    		document.getElementById("tipp").style.left = (op) ? event.clientX+abstand : event.x+abstand;
    		document.getElementById("tipp").style.top  = (op) ? event.clientY : event.y;
    	}
    };
    
    (document.layers) ?
    document.write("<layer id=\"tipp\" bgcolor=ff0000 hidden></layer>") :
    document.write("<div id=\"tipp\" style=\"position:absolute;border:1px solid #000000;font:10px verdana;visibility:hidden\"></div>");
    
    </script> 
    </head>
    
    <body>
    <a href=# onmouseover="tooltipp('hallo','tipp','visible')" onmouseout="tooltipp('','tipp','hidden')">link</a>
    </body>
    </html>
    @fragesteller
    bei ns kannst du auch layers[] weg lassen und nur den id-namen schreiben, geht dann auch....

  12. #12
    fragensteller ist offline Foren As
    registriert
    15-07-2003
    Ort
    Wilsum [Nordhorn]
    Beiträge
    87
    ok, dann is ja allet kläre ... ich hab keinen netscape und spezialisiere mich nur auf den ie, da mich der ns irgendwie nich interessiert, da es davon eh keine neueren versionen geben wird ...

    deswegen muss man mir mal verzeihen, wenn ich etwas nur auf den ie beziehe ;-)
    [Darkblue M] - Der Fragensteller

    meine JS-Scripts (ziemlich alt)

  13. #13
    Avatar von Albu
    Albu ist offline Foren-Gott
    registriert
    04-07-2001
    Beiträge
    13.501
    Da der Original-Fragensteller explizit nach anderen Browsern gefragt hat und es ihm wichtig ist, daß möglichst viele Browser unterstützt werden, ist ein IE-only Halbwissen nicht sehr sachdienlich....
    1. Get people to play Space Taxi
    2. Sell real estates on neptun
    3. Profit!

    IE is not a browser, it is a scream.


    Outside of a dog, a book is man's best friend. Inside of a dog, it's too dark to read.

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •