Jump to content

Information box appears on mouse over


HTMLweasel
 Share

Recommended Posts

U can use <div> for this. Check the example.

<html>	<head>  <script language = "Javascript"> 	 <!-- 	 // 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>	</head>	<body>  <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>	</body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...