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:
Post a Comment