Interactive buttons.....


  • I'm new to Expressions Web 4, and am having issues figuring out how to make the interactive buttons clear. On most professional web pages you don't see the interactive buttons, just the words, and that's what I'm aiming for.. I've been messing around with the buttons and can't seem to figure out how to make it to where viewers will only see the words until they scroll over the button... what should i do?
    Friday, May 20, 2011 2:34 PM

All replies

  • Easy answer: Don't use the interactive buttons. They are old and clunky and javascript-laden. The menus you are probably seeing on progessional pages are all done with CSS and an unordered list.

    Open an EW website template and you can see how they are done by looking at the page code and the style sheet. Also, go to to see all the ways you can do sharp looking menus with nothing more than CSS and an unordered list.

    And take the tutorials in the Forum FAQ. That's the kind of stuff that's covered.

    "If I had asked my customers what they wanted, they would have said a faster horse." Henry Ford
    Friday, May 20, 2011 2:50 PM
  • You can get the tabs to have rounded corners using a method called sprites that are positioned by CSS as well.  IIRC the interactive button was one of the ohh aahhh features of FP and that it got really crazy when you found out that each button had it's own 4 images to account for.  It seemed like a good idea at the time but positioning could be awkward and with all those images it was easy to mess things up.  Turns out that simpler was better.


    MIKE E

    "It's like déjà vu all over again." — Yogi Berra
    Friday, May 20, 2011 3:36 PM
  • And, if you haven't already done so, read the "FAQ - Start Here" post not only for the list of tutorials and references in the Resources section, but for the link in the first paragraph, to an article explaining what you need to know to use EW.

    Friday, May 20, 2011 3:58 PM
  • Use plan text links with a background image on mouse over using the css pseudo class a:hover. There are tutorials on simple css based menus over at in the tutorials section under CSS and it is also discussed in the Basic Website video that walk you through creating a simple website with rollover menu in Expression Web. Get the asset file and work along with it to understand it best.

    Free Expression Web Tutorials
    For an Expression Web forum with without the posting issues try
    Friday, May 20, 2011 4:01 PM
  • Mike,

    When FrontPage first came out there was no such thing as CSS 2, CSS sprites or any of the stuff we take for granted today. The very first FP interactive buttons use Java - that's right Java not JavaScript because at the time Java was being touted as the best cross platform approach to web interactivity. Unfortunately, Java did not fulfil its promise and has become more of a fringe player on the web. However the introduction of CSS & the improvements in JavaScript have more than made up for it. <g>

    FP moved from Java used in the pre 2000 versions to JavaScript which was at the time considered to be the best cross browser method can't really be faulted for its era. Fortunately, that era has passed and for simple interactions like rollovers CSS with pseudo classes is much easier.

    I would never recommend css sprites to someone who is not comfortable with CSS and it would appear from the question asked that our poster is a beginner. FWIW, I don't really think css sprites are the right direction here anyway. A simple background image on :hover is a clean and simple solution. Just set the line-height of the link text to the same height as the image and the width on the a element with text-align: center to the width of the background image. Simple and effective without requiring the overhead of sprites or their compleixity.

    Free Expression Web Tutorials
    For an Expression Web forum with without the posting issues try
    Friday, May 20, 2011 4:08 PM