8 Replies Latest reply on Nov 24, 2008 10:29 AM by Deaf Web Designer

    creating links between Fireworks images

    ms-in-NC
      I need to create a simple prototype with links between images that I can test with users. I have created the images and added some behaviors within the image. When I view these in a browser they work well. Now I want to link 4 separate image back and forth (image that each image is a tab) so the users can click back and forth. When I do this using a hotspot for the place that the user clicks on and add the behavior of swapping the whole screen slice with the new image it works very strangely and shows me a page with 4 images. Also, the linking only seems to go one way. So if I have a link to tab 2 it might take me there but when I click on the link of the send tab and want to come back to tab 1, the link doesn't work.

      I have spend way too much time trying out different things and I desperately need help now.

      Thanks
        • 1. Re: creating links between Fireworks images
          Level 7
          ms-in-NC wrote:
          > I need to create a simple prototype with links between images that I can test
          > with users. I have created the images and added some behaviors within the
          > image. When I view these in a browser they work well. Now I want to link 4
          > separate image back and forth (image that each image is a tab) so the users can
          > click back and forth. When I do this using a hotspot for the place that the
          > user clicks on and add the behavior of swapping the whole screen slice with the
          > new image it works very strangely and shows me a page with 4 images. Also, the
          > linking only seems to go one way. So if I have a link to tab 2 it might take me
          > there but when I click on the link of the send tab and want to come back to tab
          > 1, the link doesn't work.
          >
          > I have spend way too much time trying out different things and I desperately
          > need help now.

          Can you upload your PNG file to your website so we can have a look at it?

          --
          Linda Rathgeber - Adobe Community Expert
          http://www.adobe.com/communities/experts/members/8.html
          --------------------------------------------------------------
          • 2. Re: creating links between Fireworks images
            Dave Hogue Level 2
            MS,

            Is this what you are trying to do?

            http://www.enormicorp.com/tab_sample.htm

            The sample FW PNG file can be downloaded from here, too.

            Dave
            • 3. Re: creating links between Fireworks images
              ms-in-NC Level 1
              Yes it is. How can I do this in Fireworks. I have tried creating a hotspot and then adding the behavior of switching the image. However, I can go from the first image to the next but clicking on the link to go back to tab 1 never works.
              • 4. Re: creating links between Fireworks images
                Level 7
                Don't do it in FW. Do it in DW.

                --
                Murray --- ICQ 71997575
                Adobe Community Expert
                (If you *MUST* email me, don't LAUGH when you do so!)
                ==================
                http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                ==================


                "ms-in-NC" <webforumsuser@macromedia.com> wrote in message
                news:gga231$d0f$1@forums.macromedia.com...
                > Yes it is. How can I do this in Fireworks. I have tried creating a hotspot
                > and
                > then adding the behavior of switching the image. However, I can go from
                > the
                > first image to the next but clicking on the link to go back to tab 1 never
                > works.
                >

                • 5. Re: creating links between Fireworks images
                  Dave Hogue Level 2
                  Murray is right - if you want clean code and something a bit more robust, then you use Dreamweaver to code the desired behavior.

                  However, since you wrote that you wanted a quick prototype, I thought you meant you just wanted to show someone a sample of the behavior/interaction that is simulated but not production-ready code. The link in my first post was done entirely in Fireworks just to show how to simulate the behavior for a prototype. You can download the original Fireworks PNG file from that link and take a closer look at the file to see how the behaviors were added and how frames/states were used.

                  Notice that each "tab" actually has five (yes, 5) behaviors associated with it, because you need to swap the slice containing the image as well as the slices for each tab (4 tabs + 1 image = 5 swap image behaviors per tab) - this allows you to use frames to have selected states for each tab, and clicking on any tab will then set it's selected state and set the unselected states for every other tab. Kinda kludgy, but it works.

                  Let me know if you have trouble making sense of the source PNG.

                  Dave
                  • 6. Re: creating links between Fireworks images
                    Level 1
                    ms-in-NC,

                    If I may chime in and offer a quick insight and discussion related to Fireworks' native file called 'source' PNG. Some might wonder why the term used "source" PNG. Some people got themselves confused about the difference between source PNG used in Fireworks document, and "exported" PNG file used for Internet medium. Such the difference, hopefully will help better understanding for some people.

                    Just thought that quick information about the difference between source PNG working with or in Fireworks app itself and 'exported' PNG file from Fireworks app.

                    Hopefully that helps with some clarification.

                    Cheers, Brian
                    • 7. Re: creating links between Fireworks images
                      ms-in-NC Level 1
                      Thanks I will try to do that.

                      I really only want a very simple prototype linking a few images. I don't really care about clean code!

                      Do the files then have to saved in a particular format for this to work?
                      • 8. creating links between Fireworks images
                        Level 1
                        ms-in-NC,

                        Ok, but please bear that in back of your mind, if you have "clean" HTML source which means less behaviour problem in some particular browsers. In the case of browsers all over the platforms, types of different browsers, some do perform some strange behaviour problem - if you are not careful in having HTML done set up as it should be.

                        It *IS* always a wise idea for you to perform a thorough testing on different browsers all across the platform, whether it is on Macintosh or Windows (plus conducting a thorough tests on variety legacy of Windows version because there are many Window users still use old Windows such as 98 or even 95).

                        If you run into some issue related to browser's behaviour problem, best if you seek some further help at Dreamweaver forum (general forum, that is). Trust me on that one, because I am sure that Murray and many other talented Dw participants would be very happy to offer some insight or feedback. To put this way, know and understand HTML and CSS is a requirement in designing and developing website. I think that is suffice to say right now, because it is technically off-the-topic to discuss further related to HTML/CSS in Fireworks forum, though.

                        Hope that helps and good luck with your project! :D
                        Cheers, Brian
                        quote:

                        Originally posted by: ms-in-NC
                        Thanks I will try to do that.

                        I really only want a very simple prototype linking a few images. I don't really care about clean code!

                        Do the files then have to saved in a particular format for this to work?