MouseOver on TD
-
hi all please check the below code. the alert is working fine in onload. but how can i do the same when i mouse over to the particular <td>. please help me on this. <HTML> <HEAD> <script> var objBody; var objDiv; var anchorText; var objLink; var newChild; var allTds = new Array(); window.onload=function(){ var tds=document.getElementsByTagName('td'); for (var s=0;s<tds.length ;s++) { allTds[s]=document.getElementsByTagName('td')[s]; alert(allTds[s].firstChild.nodeName); } for ( var i = 0; i < tds.length; i++ ) { tds[i].onmouseover = function() { this.style.border = "1px solid #000"; }; tds[i].onmouseout = function() { this.style.border = "1px none"; return true; }; } } </script> </HEAD> <BODY> <table width="400" border="0" cellspacing="0" cellpadding="0" align="center"> <tr><td><img src="images/thumb1.jpg" height="120" width="120" border="0"></td><td>Dummy Copy Dummy Copy Dummy Copy Dummy Copy Dummy Copy Dummy Copy Dummy Copy Dummy Copy Dummy Copy Dummy Copy</td></tr> <tr><td colspan="2">Dummy Copy Dummy Copy Dummy Copy Dummy Copy Dummy Copy Dummy Copy Dummy Copy Dummy Copy Dummy Copy Dummy Copy</td></tr> </table> </BODY> </HTML>
-
hi all please check the below code. the alert is working fine in onload. but how can i do the same when i mouse over to the particular <td>. please help me on this. <HTML> <HEAD> <script> var objBody; var objDiv; var anchorText; var objLink; var newChild; var allTds = new Array(); window.onload=function(){ var tds=document.getElementsByTagName('td'); for (var s=0;s<tds.length ;s++) { allTds[s]=document.getElementsByTagName('td')[s]; alert(allTds[s].firstChild.nodeName); } for ( var i = 0; i < tds.length; i++ ) { tds[i].onmouseover = function() { this.style.border = "1px solid #000"; }; tds[i].onmouseout = function() { this.style.border = "1px none"; return true; }; } } </script> </HEAD> <BODY> <table width="400" border="0" cellspacing="0" cellpadding="0" align="center"> <tr><td><img src="images/thumb1.jpg" height="120" width="120" border="0"></td><td>Dummy Copy Dummy Copy Dummy Copy Dummy Copy Dummy Copy Dummy Copy Dummy Copy Dummy Copy Dummy Copy Dummy Copy</td></tr> <tr><td colspan="2">Dummy Copy Dummy Copy Dummy Copy Dummy Copy Dummy Copy Dummy Copy Dummy Copy Dummy Copy Dummy Copy Dummy Copy</td></tr> </table> </BODY> </HTML>
You would call the Javascript function via the OnMouseOver event from the table cell itself-
<td OnMouseOver='function()'>Dummy Copy</td>
Try that out. Good luck! Ranjit Viswakumar Professional Services Specialist rviswakumar@hostmysite.com HostMySite.com[^]