• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

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

M

muejan

New member
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>
 
Zuletzt bearbeitet:
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 in den Betreff schreiben, aber das zeigt es nach dem Ändern in der Thread-Übersicht nicht an...
 
Zuletzt bearbeitet:
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? ;)
 
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??
Zum Vergrößern anklicken....

Der Indernetzverplärrer und alle die sich für ihn ausgeben können bzw. diese lustige Eigenschaft kopiert haben?
 
@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 ...
 
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
Zum Vergrößern anklicken....

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.
 
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....
 
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 ;-)
 
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....
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben