Question

好的，所以我对网络开发相当新（但不是编程），并试图找出在用户控件内实现鼠标而不是图像交换的最佳方法。

我已经在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;
}

更改Web用户控件内的图像（以编程方式设置onmouseover）

0 个答案: