Thursday, August 21, 2008

Show Medium size image when we mouse over on thumbnail image of GridView

Show Medium size image when we mouse over on thumbnail image of GridView
and show some description
[asp:ImageButton ID="imgBtnPropertyImage" runat="server" AlternateText="Dummy text"
CommandName="DetailsOnNextPage" Height="72" Width="92" onmouseover="ShowImageDiv(this,event)"
onmouseout="HideImageDiv()" /]

javaScript for show div.

[div id="divImgOnMouseOver" style="display: none; position: absolute; left: 610px;
top: 600px; height: 400px; width: 100px;"]
[table]
[tr]
[td class="normalblk" height="10px" bgcolor="#adcf42"]
 
[/td]
[/tr]
[tr]
[td bgcolor="#adcf42"]
[asp:Image ID="imgPropid" runat="server" ImageUrl="" Height="90" Width="130" /]
[/td]
[/tr]
[tr]
[td height="10px" class="normalblk" bgcolor="white"]
[asp:Label ID="lblPropDescriptiond" runat="server" Text="" /]
[/td]
[/tr]
[tr]
[td class="normalblk" bgcolor="#adcf42"]
 
[/td]
[/tr]
[/table]
[/div]

[script language="javascript" type="text/javascript"]

function ShowImageDiv(c,e)
{


var str = c.id;
str = str.replace(/imgBtnPropertyImage/,'description');

var div = document.getElementById('divImgOnMouseOver');
div.style.display='block';

var scrollTop = window.pageYOffset || document.documentElement.scrollTop || 0;
var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || 0;

div.style.left = e.clientX + 50 +'px';
div.style.top = ((e.clientY + scrollTop) - 100) +'px';//e.clientY +'px';

var image = document.getElementById('ctl00_ContentPlaceHolder1_imgPropid');
var lblDes = document.getElementById('ctl00_ContentPlaceHolder1_lblPropDescriptiond');
lblDes.innerHTML = document.getElementById(str).value;
var path = c.src;
image.src=path;

return false;
}

function HideImageDiv()
{
document.getElementById('divImgOnMouseOver').style.display='none';

}

[/script]

2 comments:

Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.