5 Replies Latest reply on Jan 20, 2009 9:00 AM by jcbluesman

    Which behavior do I use to simulate tabbed navigation

    jcbluesman
      Hi,

      Which behavior do I use to simulate tabbed navigation? I have three tabs, and I'd like a different state to appear (in an sliced area below the tabs) depending on which tab I've clicked. Clicked is the key word because the behaviors I've tried swap the images on rollover, which isn't what I'm looking for.

      And on a related question, when do I attached behaviors to a hotspot vs. a slice? I think this may be part of my problem.

      Much thanks.
        • 1. Re: Which behavior do I use to simulate tabbed navigation
          Level 7
          jcbluesman wrote:
          > Hi,
          >
          > Which behavior do I use to simulate tabbed navigation? I have three tabs, and
          > I'd like a different state to appear (in an sliced area below the tabs)
          > depending on which tab I've clicked. Clicked is the key word because the
          > behaviors I've tried swap the images on rollover, which isn't what I'm looking
          > for.
          >
          > And on a related question, when do I attached behaviors to a hotspot vs. a
          > slice? I think this may be part of my problem.

          Here's an old way of doing them in FW.

          http://www.playingwithfire.com/tool_tips/tabs.html

          Note that the best way to do them is in Dreamweaver, like this:

          http://www.projectseven.com/tutorials/css/qtabs/index.htm


          --
          Linda Rathgeber - Adobe Community Expert
          http://www.adobe.com/communities/experts/members/8.html
          --------------------------------------------------------------
          • 2. Re: Which behavior do I use to simulate tabbed navigation
            jcbluesman Level 1
            Thanks Linda, but I've followed these directions and it's still not behaving properly. Can you take a look at my file?

            PNG file

            The income monitoring page is the page with the tabs. If you preview it in a browser you get the 'hand' cursor when you hover over the tabs, but they don't function. In fact, the same is true with the buttons above the tabs. If I click on Growth Equivalent is does correctly go to that page, but then nothing else works. I've run into this kind of things before and can't figure out why it does this.

            Thanks,
            Jim


            • 3. Re: Which behavior do I use to simulate tabbed   navigation
              Level 7
              jcbluesman wrote:
              > Thanks Linda, but I've followed these directions and it's still not behaving
              > properly. Can you take a look at my file?

              I'm not seeing any changes to the images on frame 2. You'll need a
              separate frame for each tab state.
              >
              > http://idisk.mac.com/jconstant-Public/deimos.png
              >
              > The income monitoring page is the page with the tabs. If you preview it in a
              > browser you get the 'hand' cursor when you hover over the tabs, but they don't
              > function. In fact, the same is true with the buttons above the tabs. If I click
              > on Growth Equivalent is does correctly go to that page, but then nothing else
              > works. I've run into this kind of things before and can't figure out why it
              > does this.
              >
              > Thanks,

              Hi Jim,

              What you are trying to do is much too complicated for Fireworks. The
              HTML Fireworks generates is very limited, and meant to be used for
              producing mockups rather than actual Web pages.

              Note that each tab state must be on a separate FRAME, and the slice (not
              hotspots) must be linked to them.

              The FW help files are full of information on how to create interactive
              elements. Have a look at the Slices, Rollovers, and Hotspots section.

              --
              Linda Rathgeber - Adobe Community Expert
              http://www.adobe.com/communities/experts/members/8.html
              --------------------------------------------------------------
              • 4. Re: Which behavior do I use to simulate tabbed   navigation
                jcbluesman Level 1
                Hi Linda, thanks for the reply. I've responded below:

                quote:

                Originally posted by: Newsgroup User
                jcbluesman wrote:
                > Thanks Linda, but I've followed these directions and it's still not behaving
                > properly. Can you take a look at my file?

                >I'm not seeing any changes to the images on frame 2. You'll need a
                >separate frame for each tab state.

                You might be looked for changes in the tab images and I haven't even bothered with states for the tabs yet. I'm just trying to get the large slice to swap images when I click on one of the tabs right above it. For example, click on the Data Grid tab, I see the grid slice, click on the Graphs tab, I see the graphs slice. I've renamed the slices to make it clearer and have uploaded the newest file if you want to take a look.
                >
                > http://idisk.mac.com/jconstant-Public/deimos.png
                >
                > The income monitoring page is the page with the tabs. If you preview it in a
                > browser you get the 'hand' cursor when you hover over the tabs, but they don't
                > function. In fact, the same is true with the buttons above the tabs. If I click
                > on Growth Equivalent is does correctly go to that page, but then nothing else
                > works. I've run into this kind of things before and can't figure out why it
                > does this.
                >
                > Thanks,

                Hi Jim,

                >What you are trying to do is much too complicated for Fireworks. The
                >HTML Fireworks generates is very limited, and meant to be used for
                >producing mockups rather than actual Web pages.

                >Note that each tab state must be on a separate FRAME, and the slice (not
                >hotspots) must be linked to them.

                I'm a little surprised you think what I'm trying to do is too complicated for FW. This is just a simple prototype for a web application - I'm not trying to build a real web site in FW. If it can't handle what I'm trying to do then I'm not sure I understand what FW is for. I'm afraid I may have given you the wrong impression of what I'm trying to do here. Image swaps is about the most complicated thing I'm trying to do.

                >The FW help files are full of information on how to create interactive
                >elements. Have a look at the Slices, Rollovers, and Hotspots section.

                I'll take a look and see what I can find in the help files again but if anything I've said here clears things up and you can take a look again, that would be great.

                Thanks,
                Jim

                --
                Linda Rathgeber - Adobe Community Expert
                http://www.adobe.com/communities/experts/members/8.html
                --------------------------------------------------------------



                • 5. Re: Which behavior do I use to simulate tabbed navigation
                  jcbluesman Level 1
                  Well, I was able to figure out what the problem was myself after much trial and error.

                  In the Swap Image dialog box (Behaviors panel > double-click the behavior) I had selected the slice that was over the tab instead of the target slice that is over the bottom part of the page. Once I chose the correct target slice, everything worked.