Re: trouble with rollover buttons on master page

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)


Keith G Hicks wrote:
asp.net 2.0

Iv'e spent the last 3 or 4 hours trying to get this to work. I'm simply
trying to get rollover buttons to work on my master page.

1. The master page is in the root. "Website1"
2. The images for the buttons are in a subfolder off the root
("Website1\RolloverButtonsImages")
3. There are some pages that user the master that are in subfolders such ase
"Website1\LoggedInUsers"

The above is important because I believe that master pages is part of what's
goofing this up.

I have been using some rollover button code that uses this sort of code:

<a href="Default.aspx" onmouseover="setOverImg('1','');"
onmouseout="setOutImg('1','');" target=""> <img
src="RolloverButtonsImages/button1up.png" border="0" id="button1" vspace="1"
hspace="1"></a>

On my development machine, the only way I was able to get the images to work
properly was to hard code the roote into the paths like this:

<a href="/MySite1/Default.aspx" onmouseover="setOverImg('1','');"
onmouseout="setOutImg('1','');" target=""> <img
src="/MySite1/RolloverButtonsImages/button1up.png" border="0" id="button1"
vspace="1" hspace="1"></a>

That seemed to work ok. But when I moved it to a remote production server
things sort of fell apart and I kind of understand why. So someone told me
that it's probably not a good idea to use the "a href with an img in it"
type of layout for this because the whole ~ for the root can confuse a href
I guess. I'm new at a lot fo this so I guess maybe that's possible. And I
understand the reason NOT to hard code the root into things but that was the
only way i could get thigns to work at all before.

Pretty much EVERYTHING I find online suggests the simplest way to do this is
to instead use asp:imagebutton like this:

<asp:ImageButton ID="ImageButton1" runat="server"
ImageUrl="~/RolloverButtonsImages/button1up.png"
PostBackUrl="~/Default.aspx" /><br />

and putting some code like this in the Page_Load event:

ImageButton1.Attributes.Add("OnMouseOver",
"this.src='~/RolloverButtonsImages/button1over.png'")
ImageButton1.Attributes.Add("OnMouseOut",
"this.src='~/RolloverButtonsImages/button1up.png'")

Well that didn't work either. The image button markup itself does what I
expect. The image button shows up and when I click it it goes to my default
page regardless of where I am in the site. But the code above that's
supposed to change the image causes screwy behavior. When I mouse over the
image button, the image vanishes and it's replaced by the text "submit
query" on the page. I also tried putting If Not Page.IsPostback around the
above and that didn't help.

I tried all of this and it works on his site but it does NOT work for me on
master page layout I'm dealing with: http://aspalliance.com/317

What seems like should be pretty simple has turned into a nightmare for me.
Could someone give me some clear instructions on the best way to do this
considering all that I've said above? (master pages, subfolders, etc.)? I
need this to work so that the buttons link to the correct url no matter
where I am in the directory tree and so that they also display the correct
images no matter which page is running. Again, I think a big part of the
problem is that the buttons are on the MASTER page. There's got to be a
simple way to deal with this. i just haven't found it. I really don't care
if they're link buttons, image buttons, href's with html buttons or what as
long as it works and works consistently.

Thanks in advance,

Keith


.

Loading