How we can enlarge image on mouse over dynamically in asp.net

Enlarge image on mouse over dynamically in asp.net
1.1 KiB
707 Downloads
Details

After lot of exercise we find very simple way to use bubble tooltip with different controls in Asp.net.
For this post we are using Datalist control that bind the image and data from database. By default when page open the thumb image will display on page you can adjust the thumb image size by fix the image (height width) or re size the image at the time of uploading the image.
 

JavaScript:

We use “bubble-tooltip.js” file to show tooltip image. you can download this javascript file from top of the page by [Download button].
A small Css is below that work with bubble tool tip you can modify the design bubble according to you requirement.
 

CSS:

.bubble_tooltip{
	position:absolute;
	display:none;
	margin:-300px 0 0 100px;
}
.bubble_tooltip .bubble_top{
 
	background-repeat:no-repeat;
	height:4px;	
}
.bubble_tooltip .bubble_middle{
	text-align:center;
}
.bubble_tooltip .bubble_middle span{
	position:relative;
	top:-8px;
	color:#0f6978;
	font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
	font-size:13px;
	text-align:left
}
.bubble_tooltip .bubble_bottom{
	position:relative;
 
}

 
Use the below code in Itemtemplate of datalist:

<table width="100%" border="0" cellspacing="5" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top">
<div id="" class="bubble_tooltip">"&gt;
<div class="bubble_top"><img id="imgzoom" alt="" width="300" height="300" /></div>
<div class="bubble_middle"></div>
<div class="bubble_bottom"></div>
</div>
<a id="" onmouseover="showToolTip(event,'','bubble_tooltip&lt;%#Eval(" href="#">');return false" onmouseout="hideToolTip('bubble_tooltip')"&gt; <img id="menuimage" alt="" width="40" height="40" border="0" /> </a></td>
</tr>
</tbody>
</table>

 
We are using two image control with in DataList control One is for thumb image and one for bubble image.

Now we write some code on Code to assign the Image path to Image controls(menuimage, imgzoom).
 

Code:

protected void DataList1_ItemDataBound(object sender, DataListItemEventArgs e)
    {
        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
        {
            DataRowView drview = (DataRowView)e.Item.DataItem;
            HtmlImage menuimage = (HtmlImage)e.Item.FindControl("menuimage");
            HtmlImage imgzoom = (HtmlImage)e.Item.FindControl("imgzoom");
  menuimage.Src = " images/" + drview["Images"].ToString();
imgzoom.Src = "images/" + drview["Images"].ToString();
}
}

 

The “Images” is folder that contains the image that we want to display in DataList. You can modify the path according to your Image folder.

Output:

large image on mouse over

Author: Pavan

I am asp.net developer have good knowledge of Asp.net ver 05,08,10 and good hand in sql server.Proficient in Object Oriented Programming and javascript, jQuery. Achievements - Integrate Spotfire, appnexus API ASP.net with sql server. Hobbies - Blogging ,Games, Movies ,Teaching,Keeping myself update with new technologies