I am just starting out with JavaScript and facing some challenges.
Currently, I'm struggling to develop a Mouseover and mouseout script.
Here is my ASPX code:
<div>
<div id="div_img" style="height: 300px; width: 300px; border: solid 1px black; position: absolute;
visibility: hidden;">
<img src="" id="img_tool" />
</div>
</div>
<script type="text/javascript" language="javascript">
function ShowToolTip(con) {
console.log(getOffset(con).left + '-' + getOffset(con).top);
document.getElementById("div_img").style.visibility = "visible";
document.getElementById("img_tool").src = con.src;
document.getElementById("div_img").style.left = getOffset(con).left - 300 + 'px';
document.getElementById("div_img").style.top = getOffset(con).top - 300 + 'px';
document.getElementById("div_img").style.zIndex = "0";
console.log(document.getElementById("div_img").style.left +'-'+document.getElementById("div_img").style.top)
}
function hideToolTip() {
document.getElementById("div_img").style.visibility = "hidden";
}
function getOffset( el ) {
var _x = 0;
var _y = 0;
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
_x += el.offsetLeft - el.scrollLeft;
_y += el.offsetTop - el.scrollTop;
el = el.offsetParent;
}
return { top: _y, left: _x };
}
</script>
As for my C# code behind:
if ((e.Row.RowType.ToString() != "Header") && (e.Row.RowType.ToString() != "Footer"))
{
ImageButton ib = (ImageButton)e.Row.Cells[3].Controls[0];
ib.Attributes.Add("onmouseover", "ShowToolTip(this);");
ib.Attributes.Add("onmouseout", "hideToolTip();");
I would greatly appreciate any guidance on what steps to take next. Thank you in advance.