ò Making Rollovers

Creating Rollovers in Adobe: ImageReady 7.0

Creating rollovers in ImageReady is very simple to do, and is similar to making animations in the sence that you hide and show layers to make your rollover.

First make your layers in Photoshop (or ImageReady) then open the layered version.

Make sure you have the following palettes open: ROLLOVERS & SLICE & LAYERS. Goto WINDOW|ROLLOVERS (show Rollovers) & WINDOWS|SLICE (show Slice) & WINDOW|LAYERS (show layers) to show the 3 palettes.

Then on the ROLLOVERS palette there is a button near the bottom that looks like a page curled up (Create Rollover State). Click on that to make a new rollover state. Typically you will only use the first 2 states plus the original. If you only want a rollover and not a changing image when you click too, then only click the Create Rollover State button once.

On the ROLLOVER palette you will see some layers. The first is the original picture, the next is the beginning of the rollover states. The first of the rollovers states in when you don't have the mouse over the image. The next will be the Over State, and the next (if you choose to have this) will be the Down State. Click on the first of the rollovers states and select the layers that you wish to show. Then click on the next state (the Over State) and hide or show layers that you wish to show when the mouse is over the image, and then (if you choose to have a Down State) click on the Down State and show or hide layers for the Down State.

If you accidentally made too many states then click on the state you don't want and then click on the trash can icon on the ROLLOVER palette and delete the state.

Lastly, click on the Up State or the layer on the ROLLOVER palette with the arrow beside it, then goto the SLICE palette and name the image, and add your URL.

[color red]NOTE![/color] Always use [color red]http://[/color] before your URL.

You can also specify the TARGET for the URL too in the SLICE palette.

Then when you are finished right click on the canvas and goto PREVIEW IN|(select your browser) or goto FILE|PREVIEW IN|(select your browser) and your browser will appear and you can test to see if you made your rollover correctly. If you have made it correctly then copy the HTML code you see below it and paste that into your HTML document. ImageReady will automatically make new images for each state and will put them in C:\WINDOWS\temp\ImageReady\ and then will put it into a Target Preview folder. Goto which ever folder that is and find your images and copy them to your folder with your HTML files.


NATE

[img http://www.mainframe-webdesign.com/tt/mainframe.gif]
http://www.mainframe-webdesign.com