Question

我是JavaScript新手，我遇到了一些问题。

我的任务是创建一个Mouseover和mouseout脚本，我遇到了一些困难，

我的aspx代码是

<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>

我在c＃后面的代码是

 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();");

我不知道下一步是什么..请帮忙

Answer 1

您可以直接将这些事件添加到aspx中的img_tool：

<img src="" id="img_tool" onmouseover="ShowToolTip(this);" onmouseout="hideToolTip();" />

另外，如果要在后面的代码中访问控件（Web控件或html元素），则必须添加属性runat="server"：

<img src="" id="img_tool" runat="server"/>

Answer 2

尝试这样的事情

if ((e.Row.RowType.ToString() != "Header") && (e.Row.RowType.ToString() != "Footer"))
  {
  ImageButton ib = (ImageButton)e.Row.Cells[3].Controls[0];
  ib.Attributes.Add("onmouseover", string.Format("ShowToolTip('{0}');", ib.ClientId));
  ib.Attributes.Add("onmouseout", string.Format("hideToolTip('{0}');", ib.ClientId));
  }


    <script type="text/javascript" language="javascript">

  function ShowToolTip(con) {
    var element = document.getElementById(con);
    console.log(getOffset(con).left + '-' + getOffset(con).top);
    document.getElementById("div_img").style.visibility = "visible";
    document.getElementById("img_tool").src = element.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;
    var element = document.getElementById(el);
    while (element && !isNaN(element.offsetLeft) && !isNaN(element.offsetTop)) {
      _x += element.offsetLeft - element.scrollLeft;
      _y += element.offsetTop - element.scrollTop;
      element = element.offsetParent;
    }
    return { top: _y, left: _x };
  }

</script>

asp.net和javascript请指教

2 个答案: