Write below code in .aspx page in head tag
<script language="javascript">
function
ShowPic(Image)
{
Image = "ved/Uploads/"
+ Image;
//Image – need to
pass your image folder location
document.getElementById('ShowEnlarge').style.display = 'block';
document.getElementById('ShowEnlarge').src = Image;
}
function
HidePic()
{
document.getElementById('ShowEnlarge').style.display = 'none';
}
script>
Write below code in
tag
<div>
<asp:Image ID="img1" runat="server"
Height="100"
Width="120"
/><br />
<asp:Image ID="img2" runat="server"
Height="100"
Width="120"
/><br />
<asp:Image ID="img3" runat="server"
Height="100"
Width="120"
/><br />
<asp:Image ID="img4" runat="server"
Height="100"
Width="120"
/><br />
<asp:Image ID="img5" runat="server"
Height="100"
Width="120"
/><br />
div>
<div>
<img name="ShowEnlarge"
id="ShowEnlarge"
src=""
style="display:none;"
width="450"
height="350">
div>
Wrtite below code to bind images on runtime mouse
over and out effects
protected void GetImages()
{
DataTable
dtImges = objDAL.getDataTable("SELECT TOP 5
ImageName FROM Images");
int i =
1;
if
(dtImges.Rows.Count > 0)
{
foreach
(DataRow drImage in
dtImges.Rows)
{
string
imgName = drImage["ImageName"].ToString();
string
strImageControl = "img" +
(i).ToString();
Image
img = (Image)Page.FindControl(strImageControl);
img.ImageUrl = "~/ved/Uploads/" + imgName;
img.Attributes.Add("onmouseover", "ShowPic('"
+ imgName + "');");
img.Attributes.Add("onmouseout", "HidePic();");
i++;
}
}
}
I am sure this is very simplest way to bind dynmaic effect on
runtime images.
Think simple be great.
Comments