与Javascript的相对URL
我有一个菜单，每个菜单项都有一张图片。这是一个项目中的一段代码：
<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项目，一个乔布斯项目和名为CRM...when的网站在本地机器上运行，如果我写/CRM/图像/Image.png，它工作得很好，但当发布它时，它不是work...if我写/图像/图像.png它不能在本地主机上工作，但当发布时它可以工作...我不知道路径，因为它将被部署到更多的客户端，每个客户端将有一个不同的path...but我找到了一个解决方案，下面是代码
谢谢
回答 5
Stack Overflow用户
发布于 2011-11-30 19:47:52
好了，我找到了一个解决方案来解决我的问题:新代码将如下所示：
<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>图片必须在同一文件夹中，在我的情况下，它们总是这样，但我想每个人都把它们放在相同的folder...so中应该没有问题，谢谢你的帮助
Stack Overflow用户
发布于 2011-11-29 22:47:31
在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');">Stack Overflow用户
发布于 2011-11-29 22:48:23
相对urls以/开头。这将从站点的根目录开始，而不是从当前位置开始。
编辑:根据评论，如果你引用的" root“不是你网站的根，那么你需要在你的相对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。..会让你更上一层楼。
https://stackoverflow.com/questions/8312700
复制相似问题
腾讯云开发者
