Relative URL with Javascript

Relative URL with Javascript

本文关键字：Javascript with URL Relative      更新时间：2023-09-26

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

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

使用/启动相对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">

尝试在Images/Calendar32x32.png前写入"~/"

好的，我找到了一个解决我问题的方法:新代码看起来像这样:

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


<%@ 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>

图片必须在同一个文件夹，在我的情况下，他们总是在，但我想每个人都把他们放在同一个文件夹…所以应该不会有问题谢谢你的帮助

相关文章：