DZone Snippets: tool tip code http://snippets.dzone.com/posts Tue, 19 Aug 2008 21:44:52 GMT DZone Snippets: tool tip code www.webscriptexpert.com - Java - Image based tool tips http://snippets.dzone.com/posts/show/3124 // This script creates 'tool tips' for images. Use as much text as you want. Formatting is controlled through the use of style sheets. The text will resize, according to the screen width and placement of the cursor. <br /> <br /><code> <br /> <br /> <br /><!-- TWO STEPS TO INSTALL IMAGE TOOL TIPS: <br /> <br />1. Copy the coding into the HEAD of your HTML document <br />2. Add the last code into the BODY of your HTML document --> <br /> <br /><!-- STEP ONE: Paste this code into the HEAD of your HTML document --> <br /> <br /><HEAD> <br /> <br /><style type="text/css"> <br /><!-- <br />#toolTipBox { <br />display: none; <br />padding: 5; <br />font-size: 12px; <br />border: black solid 1px; <br />font-family: verdana; <br />position: absolute; <br />background-color: #ffd038; <br />color: 000000; <br />} <br />--> <br /></style> <br /> <br /><script type="text/javascript"> <br /><!-- <br />Created by: Saul Salvatierra :: http://myarea.com.sapo.pt <br />with help from Ultimater :: http://ultimiacian.tripod.com */ <br /> <br />var theObj=""; <br /> <br />function toolTip(text,me) { <br />theObj=me; <br />theObj.onmousemove=updatePos; <br />document.getElementById('toolTipBox').innerHTML=text; <br />document.getElementById('toolTipBox').style.display="block"; <br />window.onscroll=updatePos; <br />} <br /> <br />function updatePos() { <br />var ev=arguments[0]?arguments[0]:event; <br />var x=ev.clientX; <br />var y=ev.clientY; <br />diffX=24; <br />diffY=0; <br />document.getElementById('toolTipBox').style.top = y-2+diffY+document.body.scrollTop+ "px"; <br />document.getElementById('toolTipBox').style.left = x-2+diffX+document.body.scrollLeft+"px"; <br />theObj.onmouseout=hideMe; <br />} <br />function hideMe() { <br />document.getElementById('toolTipBox').style.display="none"; <br />} <br />--> <br /></script> <br /></HEAD> <br /> <br /><!-- STEP TWO: Copy this code into the BODY of your HTML document --> <br /> <br /><BODY> <br /> <br /><div align="center"> <br /><span id="toolTipBox" width="200"></span> <br /><img src="yourImage.jpg" width="237" height="197" border="0" onmouseover="toolTip('Place your tool tip here',this)"> <br /></div> <br /> <br /><p><center> <br /><font face="arial, helvetica" size"-2">Free JavaScripts provided<br> <br />by <a href="http://www.webscriptexpert.com">Web Script Expert </a></font> <br /></center><p> <br /> <br /></code> Mon, 11 Dec 2006 03:55:11 GMT http://snippets.dzone.com/posts/show/3124 webscriptexpert (r)