DHTML-Tooltipp II

Dieser DHTML-Tooltipp funktioniert mit einer kleinen Grafik und sieht so aus wie eine eckige Sprechblase.
Es kann sowohl für Links als auch für normen Text verwendet werden. Hierfür muss der Text in einem <div>-Tag stehen.

Schrift, Farbe, Hintergrund u.s.w. sind direkt im Script einstellbar.

Wenn Du mit der Maus über die unten stehenden Texte fährst, siehst Du die Funktionsweise.

Diese Grafik wird benötigt. Für den Download: rechte Maustaste, dann speichern unter...

java24.net - DIE Javascript-Ressource

Hier kann normaler Text stehen, der nicht verlinkt ist
sondern lediglich zur Information dient.

Dieses Script läuft auf folgenden Browsern:
	Internet Explorer
	Mozilla Firefox
getestet jeweils mit der aktuellen Version

HTML-Einbindung
   <style type="text/css"> #dhtmltooltip{ position: absolute; font-family: verdana; font-size: 8pt; left: -300px; width: 150px; border: 1px solid black; padding: 2px; background-color: lightyellow; visibility: hidden; z-index: 100; /*Remove below line to remove shadow. Below line should always appear last within this CSS*/ filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135); } #dhtmlpointer{ position:absolute; left: -300px; z-index: 101; visibility: hidden; } </style>  <script type="text/javascript"> /*********************************************** * Cool DHTML tooltip script II- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ var offsetfromcursorX=12 //Customize x offset of tooltip var offsetfromcursorY=10 //Customize y offset of tooltip var offsetdivfrompointerX=10 //Customize x offset of tooltip DIV relative to pointer image var offsetdivfrompointerY=14 //Customize y offset of tooltip DIV relative to pointer image. Tip: Set it to (height_of_pointer_image-1). document.write('<div id="dhtmltooltip"></div>') //write out tooltip DIV document.write('<img id="dhtmlpointer" src="arrow2.gif">') //write out pointer image var ie=document.all var ns6=document.getElementById && !document.all var enabletip=false if (ie||ns6) var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : "" var pointerobj=document.all? document.all["dhtmlpointer"] : document.getElementById? document.getElementById("dhtmlpointer") : "" function ietruebody(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function ddrivetip(thetext, thewidth, thecolor){ if (ns6||ie){ if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px" if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor tipobj.innerHTML=thetext enabletip=true return false } } function positiontip(e){ if (enabletip){ var nondefaultpos=false var curX=(ns6)?e.pageX : event.x+ietruebody().scrollLeft; var curY=(ns6)?e.pageY : event.y+ietruebody().scrollTop; //Find out how close the mouse is to the corner of the window var winwidth=ie&&!window.opera? ietruebody().clientWidth : window.innerWidth-20 var winheight=ie&&!window.opera? ietruebody().clientHeight : window.innerHeight-20 var rightedge=ie&&!window.opera? winwidth-event.clientX-offsetfromcursorX : winwidth-e.clientX-offsetfromcursorX var bottomedge=ie&&!window.opera? winheight-event.clientY-offsetfromcursorY : winheight-e.clientY-offsetfromcursorY var leftedge=(offsetfromcursorX<0)? offsetfromcursorX*(-1) : -1000 //if the horizontal distance isn't enough to accomodate the width of the context menu if (rightedge<tipobj.offsetWidth){ //move the horizontal position of the menu to the left by it's width tipobj.style.left=curX-tipobj.offsetWidth+"px" nondefaultpos=true } else if (curX<leftedge) tipobj.style.left="5px" else{ //position the horizontal position of the menu where the mouse is positioned tipobj.style.left=curX+offsetfromcursorX-offsetdivfrompointerX+"px" pointerobj.style.left=curX+offsetfromcursorX+"px" } //same concept with the vertical position if (bottomedge<tipobj.offsetHeight){ tipobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+"px" nondefaultpos=true } else{ tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+"px" pointerobj.style.top=curY+offsetfromcursorY+"px" } tipobj.style.visibility="visible" if (!nondefaultpos) pointerobj.style.visibility="visible" else pointerobj.style.visibility="hidden" } } function hideddrivetip(){ if (ns6||ie){ enabletip=false tipobj.style.visibility="hidden" pointerobj.style.visibility="hidden" tipobj.style.left="-1000px" tipobj.style.backgroundColor='' tipobj.style.width='' } } document.onmousemove=positiontip </script> <a href="http://www.java24.net" onMouseover="ddrivetip('java24.net - DIE Javascript-Ressource<br>über 1.000 Scripte und Applets', 250)"; onMouseout="hideddrivetip()">java24.net - DIE Javascript-Ressource</a> <div onMouseover="ddrivetip('service.java24.net, die neue Serviceseite von java24.net.', 250)"; onMouseout="hideddrivetip()"> <p class="center">Hier kann normaler Text stehen, der nicht verlinkt ist<br>sondern lediglich zur Information dient.</div>

Hier kannst Du Dir das Javascript einfach per eMail zusenden lassen.

Mail:

Name:

Abo
Wenn Du den Newsletter beziehen möchtest, klicke bitte in das Feld "Abo"