5 Replies Latest reply on Nov 12, 2007 1:59 PM by abeall

    overlapping layers/hotspots?

    greencode75 Level 1
      I'm looking at creating a photo gallery and here's what I'd like to do. 9 thumbnails of photos in a 3x3 grid all sitting next to each other. When you click on one of the thumbnails the thumbnail layer would be replaced by the relevant photo. Then by clicking anywhere on the photo would then reload the thumbnail layer.

      Now, is this possible to do? Any help would be much appreciated as I've just attempted this and cannot get to have the hotspots on separate layers.
        • 1. overlapping layers/hotspots?
          abeall Level 3
          In order to create that behavior in Fireworks you might have to separate it into multiple pages. Slices on the same page cannot overlap very easily (there are some tricks, but I'm not sure they would work for you in this case.)

          So basically, on Page 1 you would have the 3x3, each would contain a hotspot. Then you'd create 9 focus pages, and each hotpot on page 1 would link to those 9 other pages.

          Best practice, however, would be to create this stuff by hand in HTML/CSS/JavaScript. There's also a popular already-made script called "Lightbox" that might work great for you here:
          • 2. Re: overlapping layers/hotspots?
            greencode75 Level 1
            I didn't really want to have to create that many pages as I thought there could be some way of doing it with layers, frames etc in fireworks. Also, I've looked at Lightbox before and it's okay but doesn't look very integrated with your design - it's basically like having a pop-up window but without the pop-up window.
            • 3. Re: overlapping layers/hotspots?
              abeall Level 3
              Well, I thought lightbox was pretty well integrated, it keeps you from having to change pages at least. But maybe I don't fully understand what you are trying to do -- can I see the mockups?

              Back to Fireworks, I don't think there is a way to "reveal a layer" without having to write some HTML/JS by hand. Fireworks isn't really supposed to be a HTML production application, it's HTML is more designed for quick throw-away prototypes so clients can get a feel for how the site will work before you actually build it in Dreamweaver or by hand.
              • 4. Re: overlapping layers/hotspots?
                greencode75 Level 1
                I've added a quick mock up here: http://www.alangreen.co.uk/dev/thumbs/ If you click on the image that says STOP you will see what I'm trying to do but without the use of creating extra pages (like in this example). You can then click on the large image to take you back to the series of thumbnails.
                • 5. Re: overlapping layers/hotspots?
                  abeall Level 3
                  Well unfortunately I don't think I have better answer than:
                  1) If you want to do it in Fireworks, you'll have to use multiple pages.
                  2) Or you can do it fairly easily using DHTML (aka HTML+JavaScript+CSS). Just export all the images and put them in a div absolutely positioned above the thumbnails, then use JavaScript to toggle the visibility of them.