자바 스크립트가있는 상대 URL

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 프로젝트, 작업 프로젝트 및 CRM이라는 웹 사이트로 구성됩니다. 로컬 시스템에서 실행될 때 /CRM/Images/Image.png를 작성하면 올바르게 작동하지만, 그러나 게시 될 때 deos는 작동하지 않습니다 ... /Images/Image.png를 작성하면 로컬 호스트에서 작동하지 않지만 게시 될 때 작동합니다 ... 더 많은 클라이언트에게 배포 될 경로를 알지 못합니다. 그들 각각은 다른 경로를해야합니다 ...하지만 코드를

감사

을 해결책을 발견하고 낮은 가지고 /와 URL은 상대 경로를 나타내는

Answer 1

좋아, 나는 내 문제를 해결하는 솔루션을 발견 : 새 코드는 다음과 같이 표시됩니다

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

이미지는 같은 폴더에 있어야합니다. 내 경우에는 항상 그렇습니다.하지만 모든 사람들이 같은 폴더 ...그래서 문제가 있어서는 안됩니다 도움을 주셔서 감사합니다

Answer 2

접두사 :

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

시도가 쓰는 "~ /"이미지 전/Calendar32x32.png.

Answer 4

상대 URL을 /으로 시작하십시오. 이것은 현재 위치가 아닌 사이트 루트에서 시작됩니다.

편집 : 귀하가 언급하는 "루트"가 귀하의 사이트 루트가 아닌 경우 댓글을 기반으로 귀하의 상대 URL에 귀하의 하위 사이트 경로를 포함시켜야합니다.

예를 들어, "루트"로 언급 한 URL이 http://www.somesite.com/some/sub/site 인 경우 상대 URL은 /some/sub/site...이되어야합니다. /...을 단순히 사용하는 경우대신 http://www.somesite.com/...이 표시됩니다.

---

또 다른 대안은, 폴더 설정에 따라, 한 단계 위로 이동 ..을 사용하는 것입니다.

예를 들어 .../CMR/pages/something.aspx 페이지가 있고 .../CMR/Images/someimg을 가리키고 싶은 페이지의 경우 ../Images/someimg을 사용할 수 있습니다. ..을 누르면 한 단계 올라갑니다.

Answer 5

이 시도 :

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