0

好的，所以我对 Web 开发（但不是编程）相当陌生，并且正在尝试找出在用户控件内实现鼠标悬停图像交换的最佳方法。

我已经在 SO 上尝试了几种类似问题的解决方案，但我的问题似乎是用户控件所独有的。我有一个（用户控件）NavigationNenu，上面有 4 个（用户控件）NavigationItems，本质上 NavigationItem 是这样的：

<div class="div_navImage">
    <asp:Image ID="navImage" runat="server" ImageUrl="<%this.DefaultImageUrl %>" CssClass="image_navImage" />
    <div id="divIconText" runat="server"/> 
 </div>

后面有这段代码：

Private ReadOnly Property NavImageElementId As String
    Get
        Return navImage.GetUniqueIDRelativeTo(Me.Parent.Parent).ToString().Replace("$"c, "_"c)
    End Get
End Property

<PersistenceMode(PersistenceMode.InnerProperty)>
Public Property DefaultImageUrl As String

<PersistenceMode(PersistenceMode.InnerProperty)>
Public Property HoverImageUrl As String

<PersistenceMode(PersistenceMode.InnerProperty)>
Public Property IconText As String

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

    navImage.Attributes.Add("onmouseover", "updateImageToHover(" + NavImageElementId + ")")
    navImage.Attributes.Add("onmouseout", "updateImageToDefault(" + NavImageElementId + ")")
    navImage.ImageUrl = "~\" & DefaultImageUrl
    divIconText.InnerText = IconText

End Sub

和导航菜单的html：

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="NavigationMenu.ascx.vb" Inherits="[internal stuff]" %>
<%@ Register Src="~/UserControls/Common/NavigationItem.ascx" TagName="navItem" TagPrefix="ucNavItem" %>

<ucNavItem:navItem ID="home" DefaultImageUrl="Resources/home_default.png" HoverImageUrl="Resources/home_hover.png" IconText="home" runat="server" />
<ucNavItem:navItem ID="ideas" DefaultImageUrl="Resources/ideas_default.png" HoverImageUrl="Resources/ideas_hover.png" IconText="ideas" runat="server" />
<ucNavItem:navItem ID="data" DefaultImageUrl="Resources/data_default.png" HoverImageUrl="Resources/data_hover.png" IconText="data" runat="server" />
<ucNavItem:navItem ID="solutions" DefaultImageUrl="Resources/solutions_default.png" HoverImageUrl="Resources/solutions_hover.png" IconText="solutions" runat="server" />

javascript有点波动，我现在真的没有工作副本，但到目前为止我能达到的最好结果是鼠标悬停在图标上会变成正确的图像，但只有最后一项导航菜单（即，当鼠标悬停时，第 1 项将变为第 4 项的悬停图标），所以感觉像是某种范围或实例问题（尽管我不完全确定这些问题存在于 asp. net/JS/html 土地）。

那么，在使用 JS 和重复的用户控件时，是否需要做一些不同的事情？我应该以其他方式来实现我想要实现的目标吗？我也尝试了一些 jquery，但是我使用过的示例并没有真正做任何事情，所以我可能在那里设置了一些不正确的东西。

有什么建议可以为我指明正确的方向吗？

提前致谢。

编辑：

忘了指出 - 我没有在页面加载中进行简单交换的原因：navImage.Attributes.Add("onmouseover", "updateImageToHover(" + NavImageElementId + ")")

是因为我希望图像在文本滚动时也发生变化，并且在我实现 JS 交换之后，我也会将解决方案应用于文本（但适用于外部 div 的解决方案将是最受欢迎的出色地）。

编辑2：

产生不良结果的 JS：

 function updateImageToHover(fullName) {
    var hoverImageUrl =  '<%= HoverImageUrl%>';
    var navImage = document.getElementById(fullName.id);
    navImage.src = hoverImageUrl;
}
4

0 回答 0