ImageReady Rollover Lesson

September 24, 2002

About Rollovers       Creating Rollover States       Rollovers From Duplicate Layers       Rollovers from Layer Effects      Testing Your Rollovers      Secondary Rollovers      Other

About Rollovers

A rollover is a screen event that occurs when the mouse is moved over or clicks on an area of a Web page. ImageReady will help write the script to create the rollovers, just as it created the script for the Image Map that we used last week. However, instead of HTML, It utilizes Javascripting to do so. We will talk more about JavaScript later when we analyze the code automatically created by ImageReady.

Rollovers are like the VOICE of a web page, they identify key areas

You use the Rollover palette, in conjunction with the Layers palette, to add rollover effects to a Web page. You can display an animation as a rollover state, or you can create secondary rollovers in which moving a mouse over one area causes an image change in another area. ImageReady adds JavaScript code to the resulting HTML file to specify rollover states.

Note: When working with rollovers, it is important to preview images in a Web browser to ensure your document will function correctly for Web users. Also remember that image appearance will vary on different operating systems

There are THREE basic types of rollovers we will deal with, One which has:

  1. A change in an image area (color change or layer effect)
  2. The substitution of one image for another
  3. Text or a secondary graphic that appears in another area of the browser window (switch image)
  4. You can also have an animation as a rollover (using Animated GIFs)

In order to utilize Rollovers, your image must be sliced, as we learned last week. They are created using the ROLLOVER Palette (just like Image Map palette) and by displaying and hiding layers on the LAYERS PaletteS¯ so all you're really going to do is turn layers on and off in each state, and ImageReady will write the code for youS¯

You use a slice or image map area to define the active area for a rollover. By default, every slice or image map area has one state--the Normal state. (The Normal state corresponds to the appearance of an image when it is first loaded into a Web browser and no rollover effects have occurred.) When you add a new state to the rollover, you capture a snapshot of the slice or image map area in the previous state. You can then use the Layers palette to make changes to the image in the new state. You can also add an animation to a rollover state.

When you save an image with rollover states as a Web page, each rollover state is saved as a separate image file. By default, rollover states are named using the corresponding slice name plus the mouse action that triggers the rollover state. When you change the name of a slice, rollover states in the slice are renamed.

So it creates a TABLE with your images, putting them back together and substituting the states for each other depending on the interaction.


Creating rollover states

When you create a rollover state, you select a mouse action which activates the state (except for the first state in a rollover, which is always the Normal state).

To create a rollover state:

  1. Select the slice or image map area to which you want to add the rollover.

    Note: When creating a slice or image map area for a rollover, use a layer-based slice or a layer-based map area. This is recommended because the dimensions of a layer's content may change in the course of creating a rollover.

  2. In the Rollover palette, create a new state:
    Click the New State button () at the bottom of the palette.
    Choose New State from the Rollover palette menu.

    The new rollover state is identical to the state immediately preceding it, until you make modifications to the image using the Layers palette.

  3. Use the default rollover state assigned by ImageReady, or select a rollover state from the pop-up menu above the rollover thumbnail:
    • Over to define the rollover state when the Web viewer rolls over the slice or image map area with the mouse while the mouse button is not pressed. (Over is automatically selected for the second rollover state.) OVER BUT NOT DOWN
    • Down to define the rollover state when the Web viewer presses the mouse button on the slice or image map area. (This state appears as long as the viewer keeps the mouse button pressed down on the area.) DOWN PRESSED
    • Click to define the rollover state when the Web viewer clicks the mouse on the slice or image map area. (This state appears after the viewer clicks the mouse and remains until the viewer activates another rollover state.) CLICK AND RELEASE; opens URL link if exists
    • Out to define the rollover state when the Web viewer rolls the mouse out of the slice or image map area. (The Normal state usually serves this purpose.)
    • Up to define the rollover state when the Web viewer releases the mouse button over the slice or image map area. (The Over state usually serves this purpose.)
    • Custom to define a new rollover state. (You must create JavaScript code and add it to the HTML file for the Web page in order for the Custom rollover option to function. See a JavaScript manual for more information.)
    • None to preserve the current state of the image for later use as a rollover state. (A state designated as None will not be displayed on the Web page.)
  4. Modify the image for the rollover state using the Layers palette.
Note: Different Web browsers, or different versions of a browser, may process clicks and double-clicks differently. For example, some browsers leave the slice in the Click state after a click, and in the Up state after a double-click; other browsers use the Up state only as a transition into the Click state, regardless of single- or double-clicking. To ensure your Web page will function correctly, be sure to preview rollovers in various Web browsers.


To Create a Rollover for a SLICE Using Duplicate Layers:

Note: When creating a slice or area for a rollover, use a layer-based slice or a layer-based map area. This is recommended because the dimensions of a layer's content may change in the course of creating a rollover.
  1. Open your image with slices
  2. Choose the slice you want to rollover with the Slice Select Tool
  3. If the image isn't already on its OWN LAYER, Select > Create Selection from Slice, Copy, Paste OR
    Duplicate that layer (LAYER > DUPLICATE) (Name it LayerROLLOVER)
  4. Click the Rollovers Tab; current slice appears as NORMAL
  5. Click the New State button () at the bottom of the palette, copy appears as thumbnail
  6. Default order is: OVER, DOWN, CLICK, but choose as you like
  7. Modify the imagery: Some possibilities:
    • Image > Adjust > Invert
    • Apply texture or filter
    • Change Hue or Saturation
    • Edit > Transform > Scale or Skew OR FLIP
    • Filter > Radial Blur or PINCH
    • Create a whole new image
  8. On LAYERS, show new layer, hide old laery
  9. Switch between Normal and Rollover thumbnails to view
    FILE > PREVIEW IN BROWSER

To Create a Rollover using a LAYER EFFECT:

You don't have to Duplicate a layer to achieve the visible change, you can also use Layer Effects.
  1. Choose your slice
  2. Click Create New Rollover State Button
  3. Choose a Rollover state for new button
  4. Display Layer Options palette
  5. Choose a Layer with transparency
  6. Click "Add Layer Effects" button and choose an effect (Inner Shadow or Outer Glow, etc.)
  7. Customize it
  8. Preview the Rollover

TO PREVIEW or TEST Your Rollover:

  1. Save your ImageReady File (as PSD)
  2. click the Preview in Default Browser button in the toolbox OR
  3. File > Preview InS¯ (choose brower)
  4. Test areas in Browser window

To Create a Secondary Rollover (add text, etc.):

  1. Choose your slice
  2. Click Create New Rollover State Button
  3. Choose a Rollover state for new button
  4. Choose OVER state
  5. Create a NEW LAYER with the supplemental text on it.
  6. Position it with Move tool
  7. Click on NORMAL and make sure that layer is OFF; DON'T HIDE LAYER WITH ORIGINAL SLICE!

To copy and paste rollover states:

  1. Select a rollover state, and choose Copy Rollover State from the Rollover palette menu.
  2. Select a rollover state in which to paste the copied state:
    Select a state in the current rollover.
    Open or display another rollover, and select a state.
  3. Choose Paste Rollover State from the Rollover palette menu.

To change the thumbnail view of rollover states:

  1. Choose Palette Options from the Rollover palette menu.
  2. Select a thumbnail size.
  3. Under Thumbnails Show, define the content of the thumbnail:
    Current Slice to show only the current slice in the thumbnail.
    Entire Document to show the entire image in the thumbnail. This view is useful when creating a secondary rollover effect.
  4. Click OK.

Deleting rollover states

You can delete individual states or all states in a rollover.

To delete rollover states:

To delete one state, select a rollover state, and either click the Trash button () on the Rollover palette or choose Delete State from the Rollover palette menu.

To delete all states in a rollover (the entire rollover), choose Delete Rollover from the Rollover palette menu.


Today's ImageMap Lecture     |     Back to Syllabus