DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets has posted 5883 posts at DZone. View Full User Profile

Www.webscriptexpert.com - Java - Image Based Tool Tips

12.10.2006
| 4878 views |
  • submit to reddit
        // 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.



<!-- TWO STEPS TO INSTALL IMAGE TOOL TIPS:

1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->

<HEAD>

<style type="text/css">
<!--
#toolTipBox {
display: none;
padding: 5;
font-size: 12px;
border: black solid 1px;
font-family: verdana;
position: absolute;
background-color: #ffd038;
color: 000000;
}
-->
</style>

<script type="text/javascript">
<!--
Created by: Saul Salvatierra :: http://myarea.com.sapo.pt
with help from Ultimater :: http://ultimiacian.tripod.com */

var theObj="";

function toolTip(text,me) {
theObj=me;
theObj.onmousemove=updatePos;
document.getElementById('toolTipBox').innerHTML=text;
document.getElementById('toolTipBox').style.display="block";
window.onscroll=updatePos;
}

function updatePos() {
var ev=arguments[0]?arguments[0]:event;
var x=ev.clientX;
var y=ev.clientY;
diffX=24;
diffY=0;
document.getElementById('toolTipBox').style.top = y-2+diffY+document.body.scrollTop+ "px";
document.getElementById('toolTipBox').style.left = x-2+diffX+document.body.scrollLeft+"px";
theObj.onmouseout=hideMe;
}
function hideMe() {
document.getElementById('toolTipBox').style.display="none";
}
-->
</script>
</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document -->

<BODY>

<div align="center">
<span id="toolTipBox" width="200"></span>
<img src="yourImage.jpg" width="237" height="197" border="0" onmouseover="toolTip('Place your tool tip here',this)">
</div>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://www.webscriptexpert.com">Web Script Expert </a></font>
</center><p>

    

Comments

Snippets Manager replied on Fri, 2006/12/08 - 12:58pm

I think it should go to javascript not to java :)