ImageReady notes: Rollovers
syllabus | schedule | assignments | Web Resources | ARTC courses
[Intro]     [Tags]     [CSSStyles]     [Lists]     [Links]     [ImageTypes]     [Optimization]    [GlobalCSS]     [CSSBackgrounds]
[Tables]     [Slices]     [IR Rollovers]     [Animated GIFs]     [JS Rollovers]     [CSS Margins]     [Windows]     [Video]     [Metatags]     [Imagemaps]     [FormInput]     [FormAtttributes]    [AdvancedForms]    [WhatisJavaScript]    [Windows2]    [Windows3]    [BrowserInfo]    [StatusBar]    [Alerts]    [Randomness]    [Frames]    [iFrames]    [Frames2]   
Within ImageReady, use the WEB CONTENT palette, in conjunction with the Layers palette, to add rollover effects to a webpage. 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)
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

Use a slice to define the active area for a rollover. By default, every slice 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.)

To create a rollover state:

1. Select the slice or image map area to which you want to add the rollover.
2. In the WEB CONTENT palette, create a new state:

  • Click the Create Rollover State button (next to trash) at the bottom of the palette. -or-
  • Choose New Rollover State from the WEB CONTENT palette menu.

NOTE: 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.)

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:

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 web content 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 layer
9. Switch between Normal and Rollover thumbnails to view
FILE > PREVIEW IN BROWSER

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 In (choose browser)
4. Test areas in Browser window

 

Creating remote rollovers
You can set up a rollover to show or hide the content of a slice on another part of your Web page. ImageReady gives you control over which slices change on a rollover state, eliminating unwanted images and complexity.

To create a remote rollover:

1. Set up a rollover as you normally do. This becomes the button the user will click to display the remote content.
2. Add the remote content to the document and create one or more slices to contain it.
3. For each rollover state, set the desired visibility of the remote content layers in the Layers palette.
4. Specify which remote slices you want to include when you optimize output files in one of these ways:

• To manually mark the remote slices for an individual button, go to the Slice column of the Web Content palette and select the rollover state that will trigger the remote rollover (for example, Down or Click). Drag the Pickwhip icon from the rollover state to the remote content slice in the document window.





Applying and creating rollover styles
Rollover styles (indicated by a triangle in the upper left corner of the style thumbnail) simplify rollover creation by allowing you to turn a layer into a rollover effect with a single click. A rollover style includes all the attributes of a rollover, including its states and layer effects. When you apply a rollover style to a layer, the layer becomes a layer-based slice.

To apply a rollover style to a layer:

1. Select a layer in the Layers palette.
2. Choose Window > Styles, or click the Styles palette tab, to display the Styles palette.
3. Click the thumbnail for the rollover style you want to apply. Rollover style thumbnails have a triangle in the upper left corner.

To create a rollover style:

1. In the Web Content palette, create the desired rollover states.

Note: You must use a layer-based slice in order to create a rollover style.

2. Apply the effects to each state using predefined styles in the Styles palette or by manually setting layer effects in the Layers palette.
3. In the Styles palette, click the Create New Style button, or choose New Style from the palette menu.
4. Enter a name for the style, set style options, and click OK. The Include Rollover States option must be selected in order to create a rollover style.

The new rollover style appears in the Styles palette. The thumbnail preview displays the effects in the Normal state.

To copy and paste rollover states:

1. Select a rollover state, and choose Copy Rollover State from the Web Content 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 Web Content 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.

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.