使用Javascript的相对URL

Question

我有一个菜单,每个菜单项都有一张图片.这是一个代码来自一个项目:

<script type="text/javascript">        
    <!--
    function changeImage(element, hoverImage) {
        document.getElementById(element).src = hoverImage;
    }
    // -->
</script>
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Menu.ascx.cs" Inherits="UserControls_Menu" %>
<ul id="navmenu">
    <li><a id="default" runat="server" href="~/Default.aspx" 
        onmouseover="changeImage('sideBar_Menu1_Image7', 'Images/Calendar32x32.png');"
        onmouseout="changeImage('sideBar_Menu1_Image7', 'Images/Calendar24x24.png');">
        <table cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td style="height: 32px; width: 32px">
                    <asp:Image ID="Image7" runat="server" ImageUrl="~/Images/Calendar24x24.png" />
                </td>
                <td style="vertical-align: middle">
                    <asp:Label ID="Label6" runat="server" Text="CALENDAR" meta:resourcekey="Label6Resource1"></asp:Label>
                </td>
            </tr>
        </table>
    </a></li>

当我运行我的应用程序时,当我在根文件夹中时,菜单上的图像将加载,但是当我在其他地方时,它们将不再加载.有没有办法可以从js完成？我现在不想真正开始制作这么多css类来解决这个问题.

LATER EDIT:解决方案包括一个BL项目,一个Jobs项目和一个名为CRM的网站...当在本地机器上运行时,如果我写/CRM/Images/Image.png它可以正常工作,但是当它发布时它是deos不工作...如果我写/Images/Image.png它在本地主机上不起作用但它在发布时有效...我不会知道路径,因为它将被部署到更多的客户端,每个客户端都会有一条不同的路径...但我找到了一个解决方案,代码更低

谢谢

Answer 1

使用a前缀您的URL /以指示相对路径:

/Images/Calendar32x32.png
^ Add slash

更正代码:

<a id="default" runat="server" href="~/Default.aspx" 
  onmouseover="changeImage('sideBar_Menu1_Image7', '/Images/Calendar32x32.png');"
  onmouseout="changeImage('sideBar_Menu1_Image7', '/Images/Calendar24x24.png');">