Return Home Author Designer Trainer

Photoshop 6

JavaScript Rollovers

by Joyce Evans

With Photoshop 6 you can now design interactive rollover effects without knowing a lick of JavaScript code. You can make rollovers where an image changes in a specific area, or secondary rollovers where a mouse action causes something to happen in another area. We are going to look at the standard mouse actions such as mouse-over and mouse-click.

1

 We'll be starting with an image that is already sliced as layer based slices. If you don't have this done then please refer to the Slicing and Save for Web tutorial.

2
 At the bottom of the toolbar is a jump to ImageReady icon, click on it.

 

3

 Once in ImageReady click on the Select Slice Tool and then click on the first button slice.

Also click the layer in the Layers palette for this button.

 

4

 In the lower left corner is the Rollover Palette. Click the Rollover tab. If no image is showing click the down arrow and select your buttons name, now you will see the normal state. The normal state is what a user sees before mousing over or clicking.

 

5 Now click the New State Button.

6
 The default is Over, but if you want another action then click the down arrow and change it.

 

7
 With the new state (Over) selected go to the menu bar and choose Layer>LayerStyle>Inner Glow

8
 You can accept the default settings or change them here.

 

9


 Click the New State button again to make a Down state

Then choose Layer>Layer Style>Bevel and Emboss. Once again, make your changes if you so desire.

10
 Click the Styles palette tab.

11

 Click the arrow pointing right and choose New Style. Name it here and be sure the Include Rollover States option is selected. Click OK

 

12
 You can see that the new style has been added to the Styles Palette

Rollovers Part 2 will show you how to add the rollover states to the other buttons and add a link. You will also see how to save the file and see the code generated.

 

Reviews | Tutorials | Contact

 



© Copyright 2000-2003 Idea design, All rights reserved.

All graphics, text, HTML and contents of this website are protected by Canadian, American and International copyright laws and may not be reproduced or distributed in any manner without the explicit permission of Joyce J. Evans.

{Sidebar Header}