|
A Great Pop Up Tool Tip Code:
Tip
Box
This is a text link tip box : This function should be used for ..... ....... ........ |
|
Below is the Code:
<script language = "Javascript">
<!--
/**
* DHTML tip boxes script. Courtesy of SmartWebby.com (http://www.smartwebby.com/dhtml/)
*/
// SHOW MENU
function showTipBox(layerName,imgName){
img = getImage(imgName);
TipBoxTop = getImagePageTop(img); // TIP BOX TOP POSITION
TipBoxLeft = getImagePageLeft(img); // TIP BOX LEFT POSITION
if (NS4 || IE4) {
if (timeOn != null) {
clearTimeout(timeOn)
hideLayer(onLayer)
}
if (NS4 || IE4) {
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="'+layerVis+'"');
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.top="'+TipBoxTop+'"');
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.left="'+TipBoxLeft+'"');
}
onLayer = layerName
}
}
window.onerror = null;
var bName = navigator.appName;
var bVer = parseInt(navigator.appVersion);
var NS4 = (bName == "Netscape" && bVer >= 4);
var IE4 = (bName == "Microsoft Internet Explorer" && bVer
>= 4);
var NS3 = (bName == "Netscape" && bVer < 4);
var IE3 = (bName == "Microsoft Internet Explorer" && bVer
< 4);
var menuActive = 0
var menuOn = 0
var onLayer
var timeOn = null // LAYER SWITCHING CODE
if (NS4 || IE4) {
if (navigator.appName == "Netscape"){
layerStyleRef="layer.";
layerRef="document.layers";
styleSwitch="";
layerVis="show";
layerHid="hide";
}else
{
layerStyleRef="layer.style.";
layerRef="document.all";
styleSwitch=".style";
layerVis="visible";
layerHid="hidden";
}
}// HIDE MENU
function hideLayer(layerName){
if (menuActive == 0) {
if (NS4 || IE4) {
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="'+layerHid+'"');
}
}
}// TIMER FOR TIP BOX MOUSE OUT
function linkTimer() {
timeOn = setTimeout("btnOut()",500)
}// MOUSE OUT
function btnOut(layerName) {
if (menuActive == 0) {
hideLayer(onLayer)
}
}// GET IMAGE
function getImage(name) {
if (NS4) {
return findImage(name, document);
}
if (IE4)
return eval('document.all.' + name);
return null;
}
function findImage(name, doc) {
var i, img;
for (i = 0; i < doc.images.length; i++)
if (doc.images[i].name == name)
return doc.images[i];
for (i = 0; i < doc.layers.length; i++)
if ((img = findImage(name, doc.layers[i].document)) != null) {
img.container = doc.layers[i];
return img;
}
return null;
}
function getImagePageLeft(img) {
var x, obj;
if (NS4) {
if (img.container != null)
return img.container.pageX + img.x;
else
return img.x;
}
if (IE4) {
x = 0;
obj = img;
while (obj.offsetParent != null) {
x += obj.offsetLeft;
obj = obj.offsetParent;
}
x += obj.offsetLeft;
return x;
}
return -1;
}
function getImagePageTop(img) {
var y, obj;
if (NS4) {
if (img.container != null)
return img.container.pageY + img.y;
else
return img.y;
}
if (IE4) {
y = 0;
obj = img;
while (obj.offsetParent != null) {
y += obj.offsetTop;
obj = obj.offsetParent;
}
y += obj.offsetTop;
return y;
}
return -1;
}
// -->
</script>
HTML:
<a href="#" onMouseOut="linkTimer()" onMouseOver="showTipBox('Delete','imgDel')"><font
class="font" color="#CC6600" face="Arial, Helvetica,
sans-serif" size="2">Tip
Box</font></a> <img src="/images/shim.gif" width="5"
height="5" border="0" name="imgDel">
<div id=Delete style="position: absolute; width: 228px; height: 33px;
z-index: 1; visibility: hidden">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#990000">
<table border=0 cellpadding="4" cellspacing="1"><tr>
<td bgcolor="#FFFFFF"><img src="/images/shim.gif"
width="2" height="2" border="0"><font face="Arial,
Helvetica, sans-serif" size="2" color="#000066">This
is a text link tip box : </font> <font face="Arial, Helvetica,
sans-serif" size="2">This<br> function should be used
for ..... ....... ........ </font></td>
</tr>
</table></td>
</tr>
</table>
</div>
|