Question

How do you add a mouseover javascript function to an asp.net menu item when the menu items are created dynamically? Doesn’t allow you to add .attributes function.

[Javasript]

<script type="text/javascript">
    function ChangeProjectImage(obj) {
        var ctrl = document.getElementById(obj.id);
        ...code...
    }
</script>

[HTML – Menu Control]

<asp:Menu ID="Menu1" runat="server" Orientation="Vertical" Font-Names="Verdana" Font-Size="12px"
        CssClass="Menu">
</asp:Menu>

[CodeBehind – Add menu items dynamically]

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Me.IsPostBack Then

    Else
        Dim dt As DataTable = Session("dt")

        For Each dr As DataRow In dt.Rows
            Dim mi As New MenuItem(dr(0), dr(1), "images\folder_03.png")
            Menu1.Items.Add(mi)
        Next

    End If

Answer 1

I ended up using a datagrid control.

HTML

<div style="clear: left; padding-right: 5px;">
      <asp:GridView ID="GridView1" runat="server" ShowHeader="False" GridLines="None"  BorderStyle="None" CssClass="MyGridView">
          <Columns>
              <asp:ImageField>
                  <ItemStyle Height="16px" Width="16px" />
              </asp:ImageField>
          </Columns>
      </asp:GridView>
 </div>

Code Behind

 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Me.IsPostBack Then

    Else
        ...code to fill datagrid

        For Each gr As GridViewRow In GridView1.Rows
            ...code
            gr.Attributes.Add("onmouseover", "ChangeProjectImage(""productimages/" & gr.Cells(2).Text & """,""" & gr.Cells(3).Text & """)")
            gr.Attributes.Add("onmouseout", "ChangeProjectImage(""images/display2.png"",""140"")")
        Next        
     End If

End Sub

JavaScript

  function ChangeProjectImage(imgpath, resizeheight) {
     var img1 = document.getElementById"MainContent_LeftTopTabContainer_ThumbTabPanel_Image2")
     img1.style.height = resizeheight
     img1.src = imgpath;
  }