Image from DB as ToolTip in GridView(IE only)
In ASPX
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head id=”Head1″ runat=”server”>
<title>Untitled Page</title>
<script type=”text/javascript”>
<!–
var browserName, browserVersion, isInternetExplorer, theDiv, myPath;
var tempX = 0;
var tempY = 0;
var bFlag = false;
function GetBrowser()
{
browserName=navigator.appName;
browserVersion=parseInt(navigator.appVersion)
isInternetExplorer = (browserName == “Microsoft Internet Explorer”) ? true : false;
}
function DisplayToolTip(row,path)
{
bFlag = true;
myPath = path;
// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;
}
function HideToolTip()
{
bFlag = false;
if (browserVersion >= 4)
{
theDiv.style.visibility = “hidden”;
theDiv.innerHTML =”";
}
}
function getMouseXY(e)
{
if (isInternetExplorer)
{
// grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
}
else
{
// grab the x-y pos.s if browser is NS
tempX = e.pageX
tempY = e.pageY
}
// catch possible negative values in NS4
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
if (browserVersion >= 4 && bFlag)
{
theDiv =document.getElementById(“picdiv”);
theDiv.innerHTML = ‘<img src=’ + myPath + ‘ height=”30px” width=”30px”/>’;
theDiv.style.top = tempY + ‘px’;
theDiv.style.left = tempX + ‘px’;
theDiv.style.visibility = “visible”;
}
}
window.onresize=GetBrowser;
//–>
</script>
</head>
<body onload=”GetBrowser();”>
<form id=”form1″ runat=”server”>
<div>
<div id=”picdiv” style=”position: absolute; visibility: hidden; width:30px”>
</div>
<table style=”margin-left:auto;margin-right:auto;”>
<tr>
<td>
<asp:GridView ID=”GridView1″ runat=”server”
OnRowDataBound=”GridView1_RowDataBound”>
</asp:GridView>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
In ASPX.CS
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
bind();
}
private void bind()
{
DataTable table = new DataTable();
table.Columns.Add(“booktitle”);
table.Columns.Add(“tooltip”);
DataRow dr = table.NewRow();
dr["booktitle"] = “aaaaa”;
dr["tooltip"] = “AJAX.gif”;
table.Rows.Add(dr);
dr = table.NewRow();
dr["booktitle"] = “sheldon”;
dr["tooltip"] = “Image/sheldon.jpg”;
table.Rows.Add(dr);
dr = table.NewRow();
dr["booktitle"] = “archer”;
dr["tooltip"] = “Image/archer.jpg”;
table.Rows.Add(dr);
dr = table.NewRow();
dr["booktitle"] = “click”;
dr["tooltip"] = “Image/click.jpg”;
table.Rows.Add(dr);
this.GridView1.DataSource = table;
GridView1.DataBind();
}
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
DataRowView drv = ((DataRowView)e.Row.DataItem);
string path = drv["tooltip"].ToString();
e.Row.Attributes.Add(“onmouseover”, “DisplayToolTip(this,’” + path + “‘)”);
e.Row.Attributes.Add(“onmouseout”, “HideToolTip()”);
}
}
