Button Rollover Javascript Project

  1. On a Layered Photoshop File (.psd) 160px W x 320 px Ht, design five buttons (place text on one layer): ABOUT AOIT; OUR STAFF; OUR CLASSES; OUR STUDENTS; OUR WORK.

  2. When you have designed the background and the lettering as you want them for your BASIC BUTTONS (the way the buttons will appear when the web page is opened) duplicate the text layer at least two times.

  3. Now design some variations on the Basic Buttons. You need to design the ROLLOVER BUTTONS (what the buttons will look like when mouse rolls over) and the SELECTED BUTTONS (what a button will look like when you’re on the selected page and button is not an active link). The simplest choice would be to use different colors, but you could also apply Layer Styles, change the background, or change font formatting.

  4. Once you’ve decided on the design for Basic, Rollover and Selected buttons, set Guidelines in Photoshop to separate buttons. Then save your file as buttons.psd, make visible only the layers needed for Basic Buttons and switch to Edit in ImageReady.

  5. In Imageready > Slices > Apply Slices from Guides. If no Slices need to be combined, File > Saved Optimized As > into Javascript folder. You will then have a web page called buttons.html in Javascript folder and all of the gifs (buttons_01.gif, buttons_02.gif) in images folder.

  6. In ImageReady, turn on appropriate layers for Rollover Buttons and File > Save Optimized As > buttons2… there will now be a web page called buttons2.html in Javascript folder with GIF files in images folder.

  7. Then back in ImageReady, turn on appropriate layers for Selected Buttons and File > Save Optimized As > buttons3… there will now be a web page called buttons3.html in Javascript folder with GIF files in images folder.

  8. Open buttons.html in Browser version and also in TextEdit version. In the TextEdit version find the image tag for first button (probably either buttons_01.gif or buttons_02.gif) … in img tag add name=“btn1” … in front of the img tag add an anchor tag link to javascript1.html (use the rollover.html project in Javascript folder as model) … after the image remember to add a close anchor tag .