使用Javascript的相对URL_Javascript_Asp.net

使用Javascript的相对URL

javascript asp.net

使用Javascript的相对URL,javascript,asp.net,Javascript,Asp.net,我有一个菜单，每个菜单项都有一张图片。这是来自一个项目的一段代码： <script type="text/javascript">  </script> <%@ Control

我有一个菜单，每个菜单项都有一张图片。这是来自一个项目的一段代码：

<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类来解决这个问题

稍后编辑：该解决方案由一个BL项目、一个Jobs项目和一个名为CRM的网站组成……当在本地机器上运行时，如果我写/CRM/Images/Image.png，它工作正常，但是当发布时它不起作用…如果我写/Images/Image.png，它在本地主机上不起作用，但在发布时它起作用…我不知道路径，因为它将部署到更多客户端，每个客户端都有不同的路径…但我找到了解决方案，代码更低

谢谢

在您的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');">

尝试在Images/Calendar32x32.png之前写“~/”。

使用

启动您的相对URL。这将从站点的根开始，而不是从当前位置开始

编辑：根据评论，如果您所指的“根”不是站点的根，那么您需要在相对URL中包含子站点的路径

例如，如果您称为“根”的URL是

http://www.somesite.com/some/sub/site

，则您的相对URL必须是

/some/sub/site…

。如果您只使用

/…

，您将被带到

http://www.somesite.com/...

而不是

http://www.somesite.com/some/sub/site/...

根据文件夹设置，另一种选择是使用

。

上一级

例如，如果您有一个页面

../CMR/pages/something.aspx

，并且希望在该页面中指向

../CMR/Images/someimg

，则可以使用

。/Images/someimg

。

。

将使您提高一级。

尝试以下方法：

<link href="<%=request.getContextPath()%>/css/styles.css" rel="stylesheet" type="text/css">

好的，我找到了解决问题的解决方案：新代码如下所示：

<script type="text/javascript">        
<!--
function changeImage(element, toReplace, withReplace) {
    var str = document.getElementById(element).src;
    document.getElementById(element).src = str.replace(toReplace, withReplace)
}
// -->

图片必须在同一个文件夹中，在我的情况下，它们总是在同一个文件夹中，但我想每个人都把它们放在同一个文件夹中…所以应该没有问题

不过谢谢你的帮助

是的，我试过了，没用…@bokkie，你的控制台有错误吗？这是在JS中指定相对路径的正确方法。不，我没有得到任何错误…但是使用“/”悬停的图像消失这并不能解决我的问题…下面的答案+注释可以找到问题的底部，我只需要找到一个solution@bokkie，恭敬地说，它确实回答了您最初的问题。你问过如何在JS中指定相对路径——我的答案就是这样。您似乎已经在使用注释的过程中添加了需求和附加信息。显然，这并不是回答问题的最佳方式。我的答案回答了你原来的问题。我也试过了，但没用。。。据我所知，Javascript不知道如何解释“~”？如果你给我们举一个应用程序URL的例子，也许会有所帮助。这是可行的，可能你不是URL的根，而是一个子站点？CRM\Admin\Admin.aspx CRM\Admin\otherfiles CRM\Images\.png Images CRM\Default.aspx CRM\other.aspx files…应用程序在Default.aspx中启动…因此当我在那里时，我会看到正确的图像…还有悬停，但是，当我通过按菜单上的Admin按钮进入CRM\Admin\Admin.aspx时，悬停不再起作用…希望您理解我的意思，否则请让我知道。。。。。。。。。。。。。。。CRM是三个项目之一，但这与我们的情况无关。我不同意这一点。如果您的URL是

http://www.something.com/CRM/...

那么您的相对URL需要是

/CMR/…

是根目录（没有CRM）。是的，你是对的，我想编辑我的回复，但为时已晚：）。。。所以我有两个项目，一个是BL，一个是Jobs，第三个是我们正在讨论的网站…所以当我在代码中编写路径/CRM/Images/Image.png时，它工作得很好…我想如果我离开它/Images/Image.png，当我在客户端发布它时它会工作的…事情是，如何使两者都起作用？答案根据您的评论更新为一些附加信息/想法。您也可以将标记与url一起使用，这将成为相对url的基本url。例如，

，然后所有的相对URL都可以正常工作（确保所有的相对URL都以不带斜杠（/）的开头）

<%@ 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', 'Calendar24x24.png', 'Calendar32x32.png');"
        onmouseout="changeImage('sideBar_Menu1_Image7', 'Calendar32x32.png', 'Calendar24x24.png');">
        <div class="divImage">
            <asp:Image ID="Image7" runat="server" ImageUrl="~/Images/Calendar24x24.png" />
        </div>
        <div style="float: left; padding-top: 3px;">
            <asp:Label ID="Label6" runat="server" Text="CALENDAR" meta:resourcekey="Label6Resource1"></asp:Label>
        </div>
        <div style="clear: both;">
        </div>
    </a></li>