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

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

由于

Answer 1

使用/为您的网址添加前缀以指明相对路径：

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

Answer 2

使用/开始您的亲戚网址。这将从站点的根目录开始，而不是从当前位置开始。

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

例如，如果您称为“root”的网址为http://www.somesite.com/some/sub/site，那么您的相对网址必须为/some/sub/site...。如果您只是使用/...，我们将转到http://www.somesite.com/...而不是http://www.somesite.com/some/sub/site/...。

另一种选择，取决于您的文件夹设置，将使用..上升一级。

例如，如果您有一个页面.../CMR/pages/something.aspx，并且在该页面中您希望指向.../CMR/Images/someimg，那么您可以使用../Images/someimg。 ..会让你升级一级。

Answer 3

试试这个：

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

Answer 4

尝试在Images / Calendar32x32.png。

之前写下“〜/”

Answer 5

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

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

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

使用Javascript的相对URL

5 个答案: