Relative image-path in js-file and Masterpages_问答_开发者

Relative image-path in js-file and Masterpages

开发者 https://www.devze.com 2023-02-19 03:11 出处：网络

Situation: I\'m using a jQuery Menu in my Masterpage. This masterpage is used for several pages in the root directory of the webapplication. Now i have a page in a sub-directory and all the image-, st

Situation:

I'm using a jQuery Menu in my Masterpage. This masterpage is used for several pages in the root directory of the webapplication. Now i have a page in a sub-directory and all the image-, stlyesheet and javascript-files paths are invalid there. I solved it almost by using servercontrols, tilde(~) and adding scriptreferences to the ScriptManager as you can see here:

    <link runat="server" href="~/styles/Master.css" rel="stylesheet" type="text/css" /> 
    <link runat="server" rel="shortcut icon" href="~/images/favicon.ico" />
    <link runat="server" rel="stylesheet" type="text/css" href="~/styles/ddsmoothmenu.css" />
    <link runat="server" rel="stylesheet" type="text/css" href="~/styles/ddsmoothmenu-v.css" />
    <link runat="server" rel="stylesheet" type="text/css" href="~/jQuery/css/smoothness/jquery-ui-1.8.10.custom.css" />
</head>
<body>
    <form id="form1" runat="server">
        <asp:ToolkitScriptManager AllowCustomErrorsRedirect="true"  EnablePartialRendering="true" ID="ToolkitScriptManager1" AsyncPostBackTimeout="300" EnableScriptGlobalization="True" CombineScripts="true" runat="server">
            <Scripts>
                <asp:ScriptReference Path="~/jQuery/js/jquery-1.5.1.min.js" />
                <asp:ScriptReference Path="~/jQuery/js/jquery-ui-1.8.10.custom.min.js" />
                <asp:ScriptReference Path="~/jQuery/js/jPrint.js" />
                <asp:ScriptReference Path="~/jQuery/js/ddsmoothmenu.js" />
                <asp:ScriptReference Path="~/jQuery/js/nav.js" />
                <asp:ScriptReference Path="~/scripts/CommonFunctions.js" />
            </Scripts>
        </asp:ToolkitScriptManager>

But i have one problem left:

In one js-file two images of the menu are referenced by a relative path and either it开发者_开发技巧's wrong on the pages in the root directory or in the page(s) in the sub-directories:

var ddsmoothmenu={
//Specify full URL to down and right arrow images (23 is padding-right added to top level LIs with drop downs):
arrowimages: { down: ['downarrowclass', './images/down.gif', 23], right: ['rightarrowclass', './images/right.gif'] },
transition: {overtime:300, outtime:300}, //duration of slide in/ out animation, in milliseconds
shadow: {enable:true, offsetx:5, offsety:5}, //enable shadow?
showhidedelay: {showdelay: 100, hidedelay: 200}, //set delay in milliseconds before sub menus appear and disappear, respectively

I could use absolute paths, but that would work only on the productive system and not on the development systems. Is there no other way to handle this?

Thank you in advance.

Try using relative paths to the domain. Like '/images/down.gif'

Use CSS backgrounds instead of images. That way all the image paths are relative to the STYLESHEET not the PAGE.