I’ve been seeing many members in the forums asking how to display a large copy of the image on mouseover. Some of them are displaying the image in a Repeater, GridView or DataList control. I didn’t find any direct solution that shows the scenario they wanted so I thought of writing this post to demonstrate how to go about it. I know there are lot of ways of doing/implementing a solution for this scenario and this is just one them. In this example I’m going to use the DataList control for displaying the data along with the images.
To get started let’s go a head and set-up the HTML mark-up. Just for the simplicity of this demo, I’ve just set up the mark-up this way:
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:DataList ID="DataList1" runat="server" RepeatColumns="2" RepeatDirection="Vertical">
<ItemTemplate>
<table>
<tr>
<td><asp:Image ID="imgProduct" runat="server" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "ProductImage") %>' style="width:100px; height:100px;" /></td>
<td>
<asp:Label ID="lblProduct" Text='<%# DataBinder.Eval(Container.DataItem, "ProductName") %>' runat="server" />
<br />
<asp:Label ID="lblPrice" Text='<%# DataBinder.Eval(Container.DataItem, "Price") %>' runat="server" />
<br />
<asp:TextBox ID="txtQty" runat="server"></asp:TextBox>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</asp:Content>
As you can see there’s really no fancy about the mark-up above. It just contain a DataList control with Image, TextBox and Label controls defined within it. You also notice that each control are binded with the fields that we want to display. Now let’s go ahead and populate the DataList with a sample data. Here’s the code behind part below:
using System;
using System.Data;
namespace WebAppDemo {
public partial class Repeater : System.Web.UI.Page {
private DataTable GetSampleData() {
//NOTE: THIS IS JUST FOR DEMO
//If you are working with database
//You can query your actual data and fill it to the DataTable
DataTable dt = new DataTable();
DataRow dr = null;
//Create DataTable columns
dt.Columns.Add(new DataColumn("ID", typeof(string)));
dt.Columns.Add(new DataColumn("ProductImage", typeof(string)));
dt.Columns.Add(new DataColumn("ProductName", typeof(string)));
dt.Columns.Add(new DataColumn("Price", typeof(string)));
//Create Row for each columns
dr = dt.NewRow();
dr["ID"] = 1;
dr["ProductName"] = "Product 1";
dr["ProductImage"] = "~/Images/Image1.jpg";
dr["Price"] = "100";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["ID"] = 2;
dr["ProductName"] = "Product 2";
dr["ProductImage"] = "~/Images/Image2.jpg";
dr["Price"] = "200";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["ID"] = 3;
dr["ProductName"] = "Product 3";
dr["ProductImage"] = "~/Images/Image3.jpg";
dr["Price"] = "50";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["ID"] = 3;
dr["ProductName"] = "Product 4";
dr["ProductImage"] = "~/Images/Image4.jpg";
dr["Price"] = "500";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["ID"] = 3;
dr["ProductName"] = "Product 5";
dr["ProductImage"] = "~/Images/Image5.jpg";
dr["Price"] = "70";
dt.Rows.Add(dr);
return dt;
}
protected void Page_Load(object sender, EventArgs e) {
if (!IsPostBack) {
DataList1.DataSource = GetSampleData();
DataList1.DataBind();
}
}
}
}
Running the code will display something like this in the page:
Now that we already have our data in placed let’s proceed implementing the mouseover functionality with jQuery. To start using jQuery then register the following script at the very top of the <head> section of the page or if you are using master page then add it the very top of the content head section.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script>
As you can see I'm using Google AJAX API CDN to host the jQuery file for some reasons. You can also download the jQuery here and host it in your server if you'd like. Now add the following mark-up at the top your DataList.
<span id="coord"></span>
<div id="divImageDisplay" style="position:absolute;">
</div>
The divImageDisplay is where we display the large copy of the Image when we hover on each image from the DataList. We will then display the coordinate values in the label to see the top and left value. Okay here's the full script below for the mouseover functionality:
<script type="text/javascript">
function getTop(e) {
var offset = e.offsetTop;
if (e.offsetParent != null) offset += getTop(e.offsetParent);
return offset;
}
function getLeft(e) {
var offset = e.offsetLeft;
if (e.offsetParent != null) offset += getLeft(e.offsetParent);
return offset;
}
function hideDivImageDisplay() {
$('#divImageDisplay').html();
}
function showDivImageDisplay(img) {
var grid = $('#<%=DataList1.ClientID %>');
var leftPos = getLeft(img) + 80;
var topPos = getTop(img) + 20;
$('#divImageDisplay').offset({ top: topPos, left: leftPos })
$('#divImageDisplay').html("<img src='" + img.src + "' width='300px' height='300px'/>");
//print the coordinates
$('#coord').text('Image ID: ' + img.id + ' left: ' + leftPos + ' top: ' + topPos);
}
</script>
The getTop() function gets the top position coordinate value of the hovered image. The getLeft() function gets the left position coordinate value. The hideDivImageDisplay() function will hide the div by clearing out the elements within it using the .html() jQuery function. The showDivImageDisplay() function is where we set the position of the divImageDisplay to display below each image from the DataList.
Now let’s put it all together. Here’s the full ASPX mark-up below:
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script type="text/javascript">
function getTop(e) {
var offset = e.offsetTop;
if (e.offsetParent != null) offset += getTop(e.offsetParent);
return offset;
}
function getLeft(e) {
var offset = e.offsetLeft;
if (e.offsetParent != null) offset += getLeft(e.offsetParent);
return offset;
}
function hideDivImageDisplay() {
$('#divImageDisplay').html();
}
function showDivImageDisplay(img) {
var grid = $('#<%=DataList1.ClientID %>');
var leftPos = getLeft(img) + 80;
var topPos = getTop(img) + 20;
$('#divImageDisplay').offset({ top: topPos, left: leftPos })
$('#divImageDisplay').html("<img src='" + img.src + "' width='300px' height='300px'/>");
//print the coordinates
$('#coord').text('Image ID: ' + img.id + ' left: ' + leftPos + ' top: ' + topPos);
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<span id="coord"></span>
<div id="divImageDisplay" style="position:absolute;">
</div>
<asp:DataList ID="DataList1" runat="server" RepeatColumns="2" RepeatDirection="Vertical">
<ItemTemplate>
<table>
<tr>
<td><asp:Image ID="imgProduct" runat="server" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "ProductImage") %>' style="width:100px; height:100px;" onmouseover="showDivImageDisplay(this);" onmouseout="hideDivImageDisplay();" /></td>
<td>
<asp:Label ID="lblProduct" Text='<%# DataBinder.Eval(Container.DataItem, "ProductName") %>' runat="server" />
<br />
<asp:Label ID="lblPrice" Text='<%# DataBinder.Eval(Container.DataItem, "Price") %>' runat="server" />
<br />
<asp:TextBox ID="txtQty" runat="server"></asp:TextBox>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</asp:Content>
Here’s the output below when running the page:
That’s it! I hope someone find this post useful!