3 Replies Latest reply on Dec 10, 2008 6:58 PM by pixlor

    slicing and roll over effects

      I am trying to create a roll over image effect that is giving me a hard time. I have a picture of apple pie, with 6 slices. I wanted to have a pop up window display with the ingredients for each slice a person rolled the mouse over.
      (6 different slices making one whole pie apple, blueberry, cherry, etc you get the idea). When I tried this in image ready, I had the slices cut up, but the pop up window was larger than the actual slice, so only a portion of the info displayed. Is there a way I can create a slice and have the roll over effect or pop up window display larger than the hotspot slice? Its kinda hard to describe, but I think you can understand what Im trying to do. The ingredients list is much larger then the pie slice hotspot.

      I cannot get my brain around how to make this happen. I know theres a way, I just dont know how.

      Thanks for any advice on this.
        • 1. Re: slicing and roll over effects
          pixlor Level 4
          A rollover replaces one image with another. You can do a standard rollover, replacing the image your mouse rolls over or a disjoint rollover, where you replace a different image.

          A pop-up generally requires a click and is done in JavaScript. In the pop-up window, you can specify whether or not you have scroll bars.

          You might also check into setting overlapping divs and changing the visibility of the layers depending on mouse movement, but...that's probably going to require you to code the JavaScript by hand.

          Anyway, what is it you want? A rollover image or a pop-up window?

          • 2. Re: slicing and roll over effects
            dellvostro Level 1
            Hi Lorraine,

            Id like a rollover effect, but the ingrediants list is larger than the pie slice that will trigger the event. The pie slice is roughly 1/6 of pie image, and the rollover effect will be 1/2 to 2/3 pie size.
            • 3. Re: slicing and roll over effects
              pixlor Level 4
              Then, I'd recommend you arrange your design so you have what's called a a disjoint or remote rollover. In this case, you might have your pie off to the side of a blank area (really an image). As you move your mouse over the hotspots on the pie, the contents of the blank area change to the ingredient lists.

              If you want the ingredients to replace your pie image, you'll have to make your pie image larger.

              Both types of rollovers are easily done in Dreamweaver. Do you have that?