Sign in
 
HomeLearnLibraryForums
Microsoft Expression >
> 
> 
Get Interactive Buttons to Show Current Page

Answered Get Interactive Buttons to Show Current Page

  • Thursday, November 22, 2012 10:30 PM
     
     
    Sign In to Vote
    0

    I built a simple vertical menu using ineteractive buttons. I swapped in my own custom images to replace the generated ones and everything works great.

    However, when I click a link (like "About" to go to my About page) the page loads fine, but I want the menu item "About" to be highlighted to show that's the current page. Currrently all the menu items look the same. I have created a 3rd image for each button that I'd like to show as the default image if the user is on that specific page.

    Any way to easily do this?

     

All Replies

  • Thursday, November 22, 2012 11:56 PM
     
     Answered
    Sign In to Vote
    0

    Since you can't set the "current page" as an option the short answer is it can't be done.  As in this tutorial, http://www.expression-tutorials.com/tutorials/creating-interactive-buttons the only button states are original, mouse-hover and mouse-click. 

    Interactive Buttons are from Frontpage days (superseded by EW at least 6 years (if not longer) ago and really only included in EW for backward compatibility for those sites that had IB's implemented in FP.    The IB 'wizard' hasn't changed from FP times and not likely to in future.  As you have discovered, the IB's are limited by what they can do.

    Today,the standard is CSS.  Menus can be created easily and quickly and there plenty of tutorials on doing these, including with images if required.  Here's the Google results for CSS menus to get you started with a few mentioning the current page status you want. 

    Please note that a little CSS and HTML knowledge (the more the better) is required to use EW effectively.  More tutorials can be found in the FAQ/Start Here page.

    Andrew M


    http://www.murraywebs.com

    "Nothing spoils numbers faster than arithmetic!"
    -- Peppermint Patty (Peanuts, Charles M. Schulz)



    • Edited by AndrewOZ1 Friday, November 23, 2012 12:13 AM
    • Edited by AndrewOZ1 Friday, November 23, 2012 12:14 AM
    • Edited by AndrewOZ1 Friday, November 23, 2012 12:17 AM
    • Marked As Answer by EricBurnby Monday, November 26, 2012 4:36 AM
    •  
     
  • Friday, November 23, 2012 5:13 AM
     
     Answered
    Sign In to Vote
    0
    Please note that a little CSS and HTML knowledge (the more the better) is required to use EW effectively

    In line with what Andrew said, what you want to accomplish is easily doable, IF you know something about HTML and CSS, and not at all doable using standard Interactive Buttons as implemented in EW. This is because the images are created, named, and stored by EW when you create them in its interface. Which image is displayed at any given time is then controlled by the archaic FP swapimage scripting, over which you have no control.

    For single-level menus of the type created using Interactive Buttons, the same thing can easily be accomplished using the :link, :hover, and :active pseudo-selectors and standard CSS, and your own custom images. You can then add page-specific CSS to each page to accomplish your objective. To do so, on each page you would assign a class to the menu item for that page. For purposes of illustration call it ".currentPage." In your embedded CSS (style block in the <head>), style the class like so...

    .currentPage {
      background-image: url("images/yourCustomButton.jpg");
    }

    Since the button for each page will presumably have the name of that page on it, you will have to provide a unique image for each page, and that is why the CSS must be embedded and not external. If, instead, you use a list-based CSS menu with the menu text on a common background image, you could have a single custom background image and move that selector to your external style sheet. Of course, this will not work if you are using a DWT, since having navigation be common across all pages is one of the primary objectives of using a DWT, and having a class assigned to different menu items on each page is inconsistent with that, since the menu would have to be editable, and could not be propagated.

    IOW, yes, it can be done. However, it does require a passing familiarity with HTML/CSS to effect. And it won't work at all with EW's Interactive buttons, unless you have some pretty good javascript chops to write your own scripting, in which case... well, why in the world are you using Interactive Buttons to begin with?

    cheers,
    scott

    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    • Marked As Answer by EricBurnby Monday, November 26, 2012 4:36 AM
    •  
     
  • Monday, November 26, 2012 4:34 AM
     
     
    Sign In to Vote
    0

    Thanks, that's what I thought. Been awhile since I used Expression and sort of "assumed" that since it's HTML5 and CSS3 compliant that everything it generated on its own would also be, instead of still retaining some of the "old stuff".

    I searched and found tons of CSS menus online, but they all seem to recommend the "body ID tag" method, which won't work with a DWT. I found this thread in these forums and followed it instead:

    Display Active page in Navigation

    I did have to manually add the following code to each page I created based off the template:

    <!-- #BeginEditable "doctitle" -->
    <title>about</title>

    <style type="text/css">
    a#about {  
        background-color: #004d6b;
        color: #8cdafc; 
    }
    </style>

    <!-- #EndEditable -->

    Works great putting it after the page title and updating the DWT works as intended on all pages based off it.

     
  • Monday, November 26, 2012 5:12 AM
     
     
    Sign In to Vote
    0

    Excellent! Glad you got it sorted, and thanks for reminding me of that discussion. It's been about three and a half years now since we had that back and forth, and I had forgotten where it was. Your method will work just fine as long as the "hooks" (ids or classes) exist for each menu item to  which to apply page-specific styling. Those are added in the DWT, to propagate to attached pages.

    FWIW, some of us create separate editable regions in the <head> for page-local scripts and CSS. Others dump everything into the <doctitle> editable region. Up to you how you handle it, although it's generally good to be consistent.  ;-)

    cheers,
    scott

    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.