Monday, August 6, 2012

Tool Tip Js


Tool Tip Js 

You could create tool tips using java scripts bellow is the code to create above tool tip images.




<head>

<script type="text/javascript">


     var tip=new Array
           tip[0]='Zoom Tool:-Zoom your Images<br /> upto 2000px!'
           tip[1]='Crop Images:-crop your Images<br /> 200*200 scale!'
           tip[2]='Text Tool:-Type the text you need!'
       
         
     function showtip(current,e,num)
        {
         if (document.layers)
            {
             theString="<DIV CLASS='ttip'>"+tip[num]+"</DIV>"
             document.tooltip.document.write(theString)
             document.tooltip.document.close()
             document.tooltip.left=e.pageX+14+'px'
             document.tooltip.top=e.pageY+2+'px'
             document.tooltip.visibility="show"
            }
         else
           {
            if(document.getElementById)
              {
               elm=document.getElementById("tooltip")
               elml=current
               elm.innerHTML=tip[num]
               elm.style.height=elml.style.height
               elm.style.top=parseInt(elml.offsetTop+elml.offsetHeight)+'px'
               elm.style.left=parseInt(elml.offsetLeft+elml.offsetWidth+10)+'px'
               elm.style.visibility = "visible"
              }
           }
        }
function hidetip(){
if (document.layers)
   {
    document.tooltip.visibility="hidden"
   }
else
  {
   if(document.getElementById)
     {
      elm.style.visibility="hidden"
     }
  }
}
</script>
</head>
<body>
<table bgcolor=#000000>
<div id="tooltip" style="position:absolute;visibility:hidden;border:1px solid black;font-size:12px;layer-background-color:#efe07e;background-color:#efe07e;padding:1px"></div>
<tr bgcolor=#ffffff><td><img src="mag.jpg" onMouseover="showtip(this,event,'0')" onMouseOut="hidetip()"></td>
<td></tr>
<tr bgcolor=#ffffff><td><img src="crop.jpg" onMouseover="showtip(this,event,'1')" onMouseOut="hidetip()"></td>
<td></tr>
<tr bgcolor=#ffffff><td><img src="test.jpg" onMouseover="showtip(this,event,'2')" onMouseOut="hidetip()"></td>
</tr>
</table>
</body>
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)