1 Reply Latest reply on May 8, 2009 7:03 PM by pixlor

    Complicated Rollover with Overlapping Slices


      I am new to Fireworks and website design but I am trying to create my first website for my graphic design business.  It's going great with the exception of this one element ... I have an illustration of a tree with several branches (see pdf attachment).  I'd like each branch to have a separate rollover effect so that the individual branch will glow and some text will appear.  Once clicked, it will navigate to another page.  I set the file up with a polygon slice over each branch and placed the glowing branches and text on State 2.  Even though I used a polygon slice the program still sees it as a rectangle, placing a rectangle box around each polygon slice which makes the slices overlap, causing some obvious problems.  I'm wondering if I should place each branch in a separate state or use hotspots.  Can someone tell me how to make this effect work without overlapping slices?

        • 1. Re: Complicated Rollover with Overlapping Slices
          pixlor Level 4

          The polygon tool is for hotspots for an image map. In an image map, areas of a single image are defined as active. Generally, the image used for an image map is not swapped out. You could swap out the whole thing, but if the image is large, then download time may cause performance issues.


          When you want to do rollovers, then you need to make images that can be swapped out. The images must be rectangular and they must fit together like a puzzle. The boundaries in your attachment won't do that. Puzzle pieces must share boundaries, they cannot overlap.  In addition, the design you have would make a very complex puzzle!


          The way you need to slice your design (make your puzzle) is more like this:


          You'll note that it won't work out - simply - as you have it designed. Some things you can do are

          • Tweak the design of your tree
          • Put the glow along only parts of the branches, not the whole branch
          • Make some of your rollovers also have a disjoint rollover, where two (or three) images change when you roll over one.
          • Use Flash
          • Do some complicated stuff with CSS (but as you're new to Web design I don't think you want to start there)


          Good luck!