	free hosting image hosting hosting reseller online album e-shop famous people

Link Tool Tip

Whenever your mouse passes over a particular link, a small tool tip box pops up beside the link.

And good news - this works in IE 5.x, NS 6.x and apparently NS 4.x as well!

Paste the code below in the head section of your page:

<STYLE> /* This is for Netscape 4.0+ browsers so that the border will display. If you want to modify the background color this is where you would do it for NS4.0+. To modify the color for IE and NS6 do so in the style tag in the div below */ .ttip {border:1px solid black;font-size:12px;layer-background-color:lightyellow;background-color:lightyellow} </STYLE> <script> //Script created by Jim Young (www.requestcode.com) //Submitted to Website Abstraction (http://wsabstract.com) //Visit http://wsabstract.com for this script //Set the tool tip message you want for each link here. var tip=new Array tip[0]=' Click on a button to send an email ' tip[1]=' Remove the IE dotted outline when an image link is clicked ' tip[2]=' 3-state image rollover using a single graphic! ' function showtip(current,e,num) { if (document.layers) // Netscape 4.0+ { theString="<DIV CLASS='ttip'>"+tip[num]+"</DIV>" document.tooltip.document.write(theString) document.tooltip.document.close() document.tooltip.left=e.pageX+14 document.tooltip.top=e.pageY+2 document.tooltip.visibility="show" } else { if(document.getElementById) // Netscape 6.0+ and Internet Explorer 5.0+ { elm=document.getElementById("tooltip") elml=current elm.innerHTML=tip[num] elm.style.height=elml.style.height elm.style.top=parseInt(elml.offsetTop+elml.offsetHeight) elm.style.left=parseInt(elml.offsetLeft+elml.offsetWidth+10) elm.style.visibility = "visible" } } } function hidetip(){ if (document.layers) // Netscape 4.0+ { document.tooltip.visibility="hidden" } else { if(document.getElementById) // Netscape 6.0+ and Internet Explorer 5.0+ { elm.style.visibility="hidden" } } } </script>

And this section in the body:

<div id="tooltip" style="position:absolute;visibility:hidden;border:1px solid yellow;font-size:12px;layer-background-color:white;background-color:white;padding:1px; font-family:arial; font-weight:normal; color:black"></div> <a href="emailbutton.html" onMouseover="showtip(this,event,'0')" onMouseOut="hidetip()">Email Button</a> <br> <a href="outline_eliminator.html" onMouseover="showtip(this,event,'1')" onMouseOut="hidetip()">Outline Eliminator</a> <br> <a href="triplerollover.html" onMouseover="showtip(this,event,'2')" onMouseOut="hidetip()">Triple Rollover</a>

How It Works

The tool tips are stored in an array, tip, which can be easily modified.

Extra tips can be included by adding more lines at the bottom of the array.

The function showtip writes the tip to the page when the mouse is over the corresponding link, using:

document.layers for NS 4.x

getElementById for IE 5.x and NS6.x

For IE 5 and NS 6, a DIV container is used as a placeholder for the tool tip:

<div id="tooltip"
style="position:absolute;visibility:hidden;border:1px solid yellow;
font-size:12px;layer-background-color:white;background-color:white;
padding:1px;font-family:arial; font-weight:normal; color:black">
</div>

For NS 4, a slightly different method is required:

.ttip {border:1px solid black;font-size:12px;
layer-background-color:lightyellow;background-color:lightyellow}

theString="<DIV CLASS='ttip'>"+tip[num]+"</DIV>"
document.tooltip.document.write(theString)
document.tooltip.document.close()
document.tooltip.left=e.pageX+14
document.tooltip.top=e.pageY+2
document.tooltip.visibility="show"

On mouseover of a link, 3 parameters are passed:

current - link element in question

e - the page position of the link (for setting xy offsets)

num - the index of the required tool tip

The remainder of the script simply writes the tool tip to the page.

The format of the tool tip box is determined by the style parameters.

The position of the box is determined by the preset xy offsets.

So, in short:

3 link parameters are passed to the function on mouseover

the required tool tip box layer is retrieved and made visible

the position of the box is determined by the xy offsets to the link's page position

on mouseout, the box layer is made invisible again

Try It Out

Email Button
Outline Eliminator
Triple Rollover