Home >> Software Help >> ImageReady >> Rollovers from Slices

Creating Rollovers from your slices

Continued from How to Slice Your Layout in ImageReady

Once your layout has been sliced, you can create rollover graphics.

ONE ADVANTAGE of ImageReady over Fireworks: ImageReady makes it just as easy to create advanced rollovers (rollovers that change an image on the other side of the screen) as simple rollovers (rollovers that make a button turn a different color).

To create rollovers:

1. Select the slice you want to be a rollover. Use the slice selection tool to select your layer-based slice.

2. When your slice is selected, go to Window-->Show Rollover and the rollover box will pop up. Click the Create New Rollover State button (to the left of the garbage can).

3. The Over state will initially be identical to the Normal state. With the OVER state selected, you can either hide the off layer and reveal the on layer, or you can apply an effect by right clicking on the layer and choosing Layer Style. In this example, there is only one layer that has the About Mona text in it. To create the orange rollover, I applied the layer style Color Overlay and then chose orange.

IMPORTANT NOTE: In the Over State, any changes you make to other layers will be reflected in the rollover. If I accidentally hide the layer "New Projects" in the About Mona Over state, then when I preview the rollovers, not only will About Mona turn orange when I rollover it, but New Projects will disappear.

You can use this to create advanced rollover states where you could change any other element on the page with your rollover.

See this World Map Example

4. Once you have created all of your rollovers, preview them all to make sure they are working.

If the results are not what you expected, then select the slice of the rollover graphic that triggers the weird results and examine the rollover state. Look at the entire layout when the rollover state is selected and make sure that the right layers are either hidden or revealed.

5. When you're done and you are ready to export Go to File-->Save Optimized As

6. Examine the Output Settings

1st Screen: the way HTML code is written Click Next after changing Empty Cells
2nd Screen: background images Unless you have a separate image that will be the background image you can ignore this screen.
3rd Screen: File names of images If you don't spend some time experimenting here, you will find that ImageReady will name your images in ways that makes it very difficult to tell them apart. See an example
4th Screen By controling the names of your slices, you can control the file names of your images.

After you have gone through the Output settings, click OK and then Save.

An HTML file will have been created that you can test in a browser or open in Dreamweaver.

This is too good to be true!! What's the catch?

There are a couple of disadvantages:

1. The code ImageReady uses to write HTML is different from the code Dreamweaver uses to create HTML, which means that it is difficult to have ImageReady rollovers and Dreamweaver rollovers on the same page and have both kinds work.

2. Because the layout was completely automated, you have little control over the way the code was written and what your image files will be called. This makes it difficult to troubleshoot when something goes wrong.

How can I bring ImageReady rollovers into Dreamweaver?