Relative URL with Javascript

Question

I have a menu, and each menu item has an image. This is a piece of code from one element:

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

When I launch my application, when I load images in the menu in the root folder, but when I go somewhere else, they will no longer load. Is there any way to do this with js? I would not want so many css classes to start to do now to solve the problem.

LATER CHANGE: the solution consists of the BL project, the Jobs project and a website called CRM ... when it runs on the local machine, it works fine if I write /CRM/Images/Image.png, but it doesn’t work when publishing ... if I write /Images/Image.png, it does not work on localhost, but it works when publishing ... I will not know the path, since it will be deployed to more clients, each of them will have a different path. .. but I found a solution and below code

thanks

Answer 1

Ok, I found a solution that solves my problem: the new code would look like this:

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

Images should be in the same folder, in my case they are always there, but I suppose everyone puts them in the same folder ... so there should be no problems Thanks for the help though

Answer 2

URL prefix with / to indicate relative path:

 /Images/Calendar32x32.png ^ Add slash 

Corrected Code:

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

Start your relative URLs with / . This will start from the root of the site, not from the current location.

EDIT: Based on the comments, if the “root” you are linking to is not the root of your site, then you need to specify the path to your sub-site in your relative URL.

For example, if your URL, which you call "root", is http://www.somesite.com/some/sub/site , then your relative URLs should be /some/sub/site... If you just use /... , you will go to http://www.somesite.com/... instead of http://www.somesite.com/some/sub/site/...

---

Another alternative, depending on your folder’s settings, would be to use .. to go one level.

For example, if you have a page .../CMR/pages/something.aspx and inside this page you want to point to .../CMR/Images/someimg , you can use ../Images/someimg . .. takes you one level up.

Answer 4

Try the following:

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

Answer 5

try writing "~ /" before Images / Calendar32x32.png.