• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 19. Designing for the Web > Creating a JavaScript Rollover

Creating a JavaScript Rollover

JavaScript rollovers are a dynamic way to display a button on the Internet. Essentially, the Rollover button has two or three states. State one represents the button before the visitors moves their mouse over the button, state two would be how the button looks as the visitor hovers over, and state three would be the look of the button when the visitor click their mouse. Rollovers are great, they really make a Web site come alive, and ImageReady makes it easy to create a Rollover. To create a rollover button, you will need the three states of the button. These typically are GIF images of a button in an up, over, and down state, and you can create the buttons in Photoshop or ImageReady.

Create a JavaScript Rollover

Open ImageReady.

Click the File menu, and then click New.

Enter a name in the Name box.

Click the Size list arrow, and then select from the available presets, or enter in a customized width and height.

Click the White, Background Color, or Transparent option to determine the contents of the first layer.

Click OK.

Click the 2-Up palette, and then select the original image.

Create the normal state of the button.

Click the New Layer button, and then create the over state of the button.

IMPORTANT If the button states are similar, with only a small modification like the changing of a shadow, then press Ctrl+J (Win) or +J (Mac) to create a copy of the original layer, and then modify the copy.

Create a new layer, or copy the layer and create the down state.

Open the Web Content palette.

Click the Create Rollover State button to create the over state.

In the Layers palette, hide the first layer.

Click the Create Rollover State button to create the down state.

In the Layers palette, hide the second layer.

Click the File menu, and then click Save Optimized As.

Enter a file name in the Save As box.

Click the Format list arrow, and then select the HTML And Images format.

Click the Where (Mac) or Save In (Win) list arrow, and then select the location to save the file.

Click the Settings and Slices list arrows and make your selections.

Click Save.

ImageReady saves the three states of the button, including the JavaScript code in an HTML document.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint