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

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

我已经尝试了几种解决类似问题的方法，但我的问题似乎是用户控件独有的。我有一个（用户控件）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

Private只读属性NavImageElementId作为字符串
得到
返回navImage.getUniquedRelativeTo（Me.Parent.Parent.ToString（）。替换（“$”c，“\u”c）
结束
端属性
公共属性DefaultImageUrl作为字符串
公共属性HoverImageUrl作为字符串
公共属性IconText作为字符串
受保护的子页加载（ByVal sender作为对象，ByVal e作为System.EventArgs）处理Me.Load
Add（“onmouseover”、“updateImageToHover”（+NavImageElementId+））
Add（“onmouseout”、“updateImageToDefault”（+NavImageElementId+））
navImage.ImageUrl=“~\”&DefaultImageUrl
divIconText.InnerText=IconText
端接头

以及导航菜单的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有点波动，我现在还没有一个可用的副本，但到目前为止，我能达到的最好效果是鼠标悬停在图标上，图标会变为正确的图像，但只有导航菜单中最后一项的图像（即鼠标悬停在项目4上时，项目1会变为悬停图标），因此，这感觉像是某种范围界定或实例问题（尽管我不完全确定asp.net/JS/HTMLLand中是否存在此类问题）

那么，在使用JS和重复用户控件时，是否需要做一些不同的事情？对于我试图实现的目标，是否还有其他方法可以实现？我也尝试了一些jquery，但是我使用的示例并没有真正做任何事情，所以我可能在那里设置了错误的东西

有什么建议给我指出正确的方向吗

提前谢谢

编辑：

忘记指出-我没有在页面加载中进行简单交换的原因是： Add（“onmouseover”、“updateImageToHover”（+NavImageElementId+））

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

编辑2：

产生不良结果的JS：

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

函数updateImageToHover（全名）{
var hoverImageUrl=''；
var navImage=document.getElementById（fullName.id）；
navImage.src=hoverImageUrl；
}

您是否需要与IE6等旧浏览器向后兼容？如果不是的话，看起来你可以在纯CSS中这样做，而根本不需要代码。这不是一个明确的目标，不。你可以在CSS中使用变量吗？我希望后面的vb代码能够存储URL。-另外，我刚刚在原来的问题中添加了底部部分。不知道这是否适用于您的情况，但我会让代码隐藏设置CSS类名，而不是图像URL。例如，让代码将控件的CSS类设置为“solutions”，并让“solutions”CSS类为普通和：hover伪类设置背景图像。将我使用的JS函数添加到原始问题中…我会胡乱处理这个想法。我认为唯一的障碍是在文本悬停时（以及图标悬停时）让图标改变。