trouble with rollover buttons on master page

Discussion in 'ASP .Net' started by Keith G Hicks, Mar 27, 2008.

  1. 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
     
    Keith G Hicks, Mar 27, 2008
    #1
    1. Advertising

  2. Keith G Hicks

    bruce barker Guest

    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
    >
    >
     
    bruce barker, Mar 27, 2008
    #2
    1. Advertising

  3. 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, Mar 27, 2008
    #3
  4. 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



    "Keith G Hicks" <> wrote in message
    news:...
    > 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, Mar 27, 2008
    #4
  5. 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
     
    Keith G Hicks, Mar 28, 2008
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. dave

    rollover buttons

    dave, May 12, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    1,419
  2. Doug McCann
    Replies:
    1
    Views:
    1,079
    William Brogden
    Aug 5, 2004
  3. Leythos
    Replies:
    4
    Views:
    3,613
    Leythos
    Mar 30, 2005
  4. Doug
    Replies:
    2
    Views:
    423
  5. Jim Van Abbema

    Identical rollover buttons on same page

    Jim Van Abbema, Nov 30, 2005, in forum: Javascript
    Replies:
    1
    Views:
    129
    Thomas 'PointedEars' Lahn
    Nov 30, 2005
Loading...

Share This Page