Cool Mouse Over Effects

Ever wanted to show a popup information window when the mouse rolls over an image, a grid cell, a hyper link or any other UI control? In this article we display a table (window) when the user rolls over an ASP.NET server-side control. The window to display is contained in a "div" tag. The content of the "div" tag may be changed at runtime using the javascript "innerHtml" property. These will be described later. First, We need to define a style for the "div" tag. The style could be defined within the html HEAD tags as follows: <STYLE><br />#rollover { position: absolute; left: 0; top: 0; Z-INDEX: 101;}<br /> </STYLE><br /> Above position:absolute is necessary. The position of the <div> tag will change as we move the mouse over different controls. position:absolute position  insures the div will be positioned at the new location. Next we define two javascript functions for showing and hiding the div: <br /><script language="javascript"><br /> function showimage(info)<br /> {<br /> var xpos;<br /> var z = document.all.rollover.style;<br /> xpos = window.event.x + (64-((window.event.x-39)%64)); <br /><br /> z.pixelLeft = xpos; <br /> z.pixelTop = window.event.y;<br /><br /> rollover.innerHTML = "<table class='CineCritBody' border=1 bordercolor='green'><tr><td nowrap class='CineCritHeader'>"+unescape(info)+"</td></tr></table>";<br /> z.visibility="visible"<br /> }<br /> <br /> function hideimage()<br /> {<br /> var image0;<br /> image0 = document.getElementById('rollover');<br /> if (image0)<br /> image0.style.visibility="hidden";<br /> <br /> }<br /></script> <br /> Above the showimage() function will be called on the onmouseover event. window.event.x and window.event.y specify the location of the mouse during the onmouseover event. The coordinates of the "div" will be set using the x, y mouse location. To the mouse x location we simply add extra space so that the window will be displayed a bit to the right of our control. The content of the "div" is changed using the innerHTML attribute as follows: rollover.innerHTML = "<table class='CineCritBody' border=1 bordercolor='green'><tr><td nowrap class='CineCritHeader'>"+unescape(info)+"</td></tr></table>";<br /> Next, In the .ASPX file define your rollover div tag: <DIV ID="rollover"></DIV><br /> Next, we need to program our asp.net server side control to respond to javascript client-side events. This would be done on the server side. For example in C#: <br /> MyServerControl1.Attributes.Add("onmouseover", "showimage('"+strtitle +"')");<br /> MyServerControl1.Attributes.Add("onmouseout", "hideimage()"); <br /> <br /> Above we program our server control, MyServerControl1, to respond to the client-side onmouseover and onmouseout events. To the showimage function we pass strTitle which is the text we want to display in the window. The info is displayed using innerHTML attribute as described above. Copyright @ Isaac Levy, Los Angeles, CA (Author's Email: RisingDeepStar@yahoo.com)