there are a couple things to understand.
1) the master page is a control on the page referencing it, so any
relative url's are relative to the page's location, not the master. (the
browser doesn't know anthing about master pages).
2) the ~/url command (borrowed from unix web servers) is implemented by
asp.net code. on page render any server control with a url property,
asp.net check if the url starts with a "~", if so deteremines the
relative path from the vdir and replaces the "~" with it.
therefore:
<img src="~/images/img.gif"> no translation done
<img src="~/images/img.gif" runat="server" /> translation will be done
so you need to add runat=server to your <a> and <img> to get the "~"
support. for javascript you are out of luck, you will need to write your
own, or use hidden images:
<img id="iRollOver1" src="~/rollover1.gif"
runat="server" style="display:none" />
then in javascript copy the src url. this has the advantage of
precaching the rollover images.
-- bruce (sqlwork.com)
OK. Thanks Bruce. Your explanation about the tilde and runat="server" helped
a lot. But I'm lost on the other end.
Given the code shown below, here's what happens. All the buttons show up
when loading the page. They show up with the "out" image which is of course
correct. When I click one of them it directs to the correct page. That's
fine so far. They also show up and click to the correct pages as expected
when I'm viewing a page that's in a subfolder. So far so good. But the
rollover doesn't do anything. I don't get the "over" image at any time. No
errors, no funny behavior, just no image change.
There are 3 things shown below.
1 - the contents of a javascript file that's supposed to change the
images.
2 - the contents of my masterpage head section.
3 - one of the button definitions.
Here's the contents of the javascript file (which was created by a button
generating tool). The file is named RolloverButtonsImagesMenuScript.js and
is in the root. Notice the first line is var buttonFolder =
"~/RolloverButtonsImages/"; with the tilde (I've tried it without the tilde
as well and other variations I could think of too). I know this code works
generally because when I had this running on my development machien I had
hard coded the root folder name into just about everything. But when I got
to the remote server, things fell apart and I realized that was a mistake.
So here I am.
/*############### js file code begins here ###################*/
/*** SET BUTTON'S FOLDER HERE ***/
var buttonFolder = "~/RolloverButtonsImages/";
/*** SET BUTTONS' FILENAMES HERE ***/
upSources = new
Array("button1up.png","button2up.png","button3up.png","button4up.png","butto
n5up.png","button6up.png","button7up.png","button8up.png","button9up.png","b
utton10up.png","button11up.png");
overSources = new
Array("button1over.png","button2over.png","button3over.png","button4over.png
","button5over.png","button6over.png","button7over.png","button8over.png","b
utton9over.png","button10over.png","button11over.png");
//*** NO MORE SETTINGS BEYOND THIS POINT ***//
totalButtons = upSources.length;
//*** MAIN BUTTONS FUNCTIONS ***//
// PRELOAD MAIN MENU BUTTON IMAGES
function preload() {
for ( x=0; x<totalButtons; x++ ) {
buttonUp = new Image();
buttonUp.src = buttonFolder + upSources[x];
buttonOver = new Image();
buttonOver.src = buttonFolder + overSources[x];
}
}
// SET MOUSEOVER BUTTON
function setOverImg(But, ID) {
document.getElementById('button' + But + ID).src = buttonFolder +
overSources[But-1];
}
// SET MOUSEOUT BUTTON
function setOutImg(But, ID) {
document.getElementById('button' + But + ID).src = buttonFolder +
upSources[But-1];
}
//preload();
/*############### js file code ends here ###################*/
In the HEAD section of my master page I have this:
<head runat="server">
<title>Untitled Page</title>
<script src="RolloverButtonsImagesMenuScript.js" language="javascript"
type="text/javascript"></script>
<link rel="SHORTCUT ICON" href="favicon.ico">
</head>
Finally, one of the buttons is defined in the master page markup as follows:
<a runat="server" href="~/Default.aspx" onmouseover="setOverImg('1','');"
onmouseout="setOutImg('1','');" target=""> <img runat="server"
src="~/RolloverButtonsImages/button1up.png" border="0" id="button1"
vspace="1" hspace="1"></a><br>
Hope you can help a little more.
Thanks,
Keith
Keith G Hicks - 28 Mar 2008 00:05 GMT
Well I figured something out. I'd still love to know why all the things
below don't work but here's what is more important now. If I use an
asp:Imagebutton and do this:
<asp:ImageButton
ID="ImageButton1"
runat="server"
ImageUrl="~/RolloverButtonsImages/button3up.png"
onmouseover="this.src='~/RolloverButtonsImages/button3over.png'"
onmouseout="this.src='~/RolloverButtonsImages/button3up.png'">
</asp:ImageButton>
I know why the above does not work. The tilde in the "this.src..." does not
get calculated in the page source. I did a view source and asp does not
resolve the tilde. I think I know why but I have no idea how to write the
above so that it DOES work. I tried several variations but got nowhere. If I
take out the tilde and hard code the root, it does work but then I'm back to
my original problem where I don't want to hard code the root.
Thanks,
Keith
> OK. Thanks Bruce. Your explanation about the tilde and runat="server" helped
> a lot. But I'm lost on the other end.
[quoted text clipped - 30 lines]
> /*** SET BUTTONS' FILENAMES HERE ***/
> upSources = new
Array("button1up.png","button2up.png","button3up.png","button4up.png","butto
n5up.png","button6up.png","button7up.png","button8up.png","button9up.png","b
> utton10up.png","button11up.png");
>
> overSources = new
Array("button1over.png","button2over.png","button3over.png","button4over.png
","button5over.png","button6over.png","button7over.png","button8over.png","b
> utton9over.png","button10over.png","button11over.png");
>
[quoted text clipped - 49 lines]
>
> Keith
Keith G Hicks - 28 Mar 2008 00:52 GMT
Well I solved this finally. Can't believe it was that hard and nobody said
anything about how to resovle the url based on ~ in the "this.src..." code.
So I changed everything to ImageButtons:
<asp:ImageButton
ID="imgbtnDefault"
runat="server"
CausesValidation="false"
ImageUrl="~/RolloverButtonsImages/button1up.png"
PostBackUrl="~/Default.aspx"
BorderColor="white"
BorderStyle="solid"
BorderWidth="1px">
</asp:ImageButton>
Then in my pages Page_Load event handler I have this:
imgbtnDefault.Attributes.Add("onMouseOver", "src='" &
ResolveUrl("~/RolloverButtonsImages/button1over.png").ToString() & "'")
imgbtnDefault.Attributes.Add("onMouseOut", "src='" &
ResolveUrl("~/RolloverButtonsImages/button1up.png").ToString() & "'")
Works like a peach no matter whether it's on my development machien or in
production remote server and also handles it regardless of what foler the
page I'm on is in.
My only qualm is that the pages "view source" now shows the actual folder
name for the root. Not sure if that's a security issue or not. I'd be
anxious to hear if it is or not.
Keith