Creating rollovers for the web
A rollover is a button or image on a web page that changes when the mouse is over it. To create a rollover, you need at least two images: a primary image for the normal state and a secondary image for the changed state. (on or over state)

Use layers to create primary and secondary images. Create content on one layer, then duplicate the layer and edit it to create similar content while maintaining alignment between layers. When creating a rollover effect, you can change the layer’s style, visibility or position, make color or tonal adjustments, or apply filter effects. You can also use layer styles to apply effects, such as color overlays, drop shadows, glow, or emboss, to the primary layer. To create a rollover pair, turn the layer style on or off and save the image in each state. 
Use the slice tool to slice up the areas that you wish to contain a rollover. Insure that neighbouring buttons are sliced evenly.
Use the Save For Web & Devices dialog box to save rollover images in a web-compatible format and with an optimized file size. When you save rollover images, use a naming convention to distinguish the primary (non-rollover state) image from the secondary (rollover state) image. What I suggest is that you Save for Web first with your buttons in the “off state position.” This will save all slices including areas that are not rollovers. There is an option to save images and an html file, select this. By selecting this option Photoshop will create all your slices and create an html file that will automatically put your slices back in order. This html file can be edited in dreamweaver and an iframe can be added. See below for saving info.


iFrame.htmlshapeimage_2_link_0
Once you have saved for web once with your buttons in the “off state,” you must then adjust your photoshop document so that your buttons are in the “on or over position” and save for web again. This time when saving for web select the slices that correspond to the “on or over position” buttons only. Use the shift button to select multiple slices. Make sure you alter the name when saving these button slices and save selected slices and image files only. See Below.
Using dreamweaver, open the html document up that Photoshop has created. click on any button that you wish to make a rollover. Delete it. Keep your cursor in the hole that is created. Go to Insert->Image Objects->Rollover Image. In that window, add an image name (like “button1” or “homebutton”) all one word, lower case and unique. Browse and find the image you just deleted and use that for the “Original image” then browse and find the image you want for the rollover image “Rollover image”
Do this for all buttons.



COMM
TECH@NPC
TUTORIALS/LINKS
COMMTECH
GRAPHICS
PHOTO
VIDEO
WEBgraphics.htmlshapeimage_6_link_0shapeimage_6_link_1shapeimage_6_link_2shapeimage_6_link_3shapeimage_6_link_4shapeimage_6_link_5shapeimage_6_link_6