You can do the following by:
1. Inject Javascript function on mousehover & mouseout of the link in a grid row.
2. Using JavaScript, show a div that contains the needed details(image here) when you hover your mouseover that row
3. Using JavaScript, hide the div onmouseout.
For injecting JS, you need to use
RowDataBound
of GridView, something like:
protected void GridView_RowDataBound(Object sender, GridViewRowEventArgs e)
{
DataControlRowType rtype = e.Row.RowType;
if (rtype == DataControlRowType.DataRow && rtype != DataControlRowType.Footer
&& rtype != DataControlRowType.Separator && rtype != DataControlRowType.Header
&& rtype != DataControlRowType.Pager)
{
e.Row.Attributes.Add("onmouseover", "ShowDiv(this);");
e.Row.Attributes.Add("onmouseover", "HideDiv(this);");
}
}
Show the div
onmouseover
event of the grid cell, and
Hide the div
onmoustout
event of the grid cell.
Try!