Mouseover

In the first part of the tutorial we created the buttons for the mouseover effect. If you did not complete part one, you can save the images below and use them for this tutorial.

Mouseover Image	Default Image
When the rollover effect is complete, the "Mouseover" image will appear as the mouse pointer passes over the button, and the "Default" image will load with the page.

Slice Mouseover Image

Before creating the mouseover effect, the mouseover image must be sliced. If you are working with the PSP file saved from part one of this tutorial, hide the "Default" layer and the corresponding text layer in the layer palette. If you are using the images saved from this page, make "Fig7A" the active image.

Click on File > Export > Image Slicer.

When the Image Slicer dialog box appears, click on the "Preferences" button and make sure that the option to "Prompt for image folder on Save or Save As" is checked. Click "OK," then click on the grid button .

Click on the image in the preview window and use the following grid settings:

Rows: 5
Columns: 1

Your image should now be divided into 5 equal parts, as illustrated.

Make sure that "Include cell in table" is checked but leave all other entries for the "Cell Properties" blank.

If the "Include cell in table" option is not checked for a particular cell, then the part of the image residing in the cell will not be saved; the table will be rendered with an empty cell when displayed.

Click on the Arrow button and click on the first cell containing the "Home" button (it should be outlined in green). Under the "Format" section choose GIF, check "Apply optimization to whole image" and then click on the "Optimize Cell" button. When the GIF Optimizer appears choose the settings below:

Transparency Tab

Select the "None" option

Colors Tab

Number of colors: 100
Dithering: 11
Color Selection: Optimized Octree

Since we chose the Optimized Octree Color Selection method this particular set of buttons may dither when viewed on 8 or 16-bit systems, but, if you are designing your pages for optimal viewing on 24-bit systems, then this setting, in my opinion, renders the best results by maintaining the image appearance while reducing file size.

Click on the "Save Settings" button. Name the file "NavButtons" and click "OK". (This file will have a JSD extension). When you save the slicer settings you are also saving the URL, alt, target, rollover and optimization information entered in the slicer settings dialog box. It is a good idea to get into the habit of saving your slicer settings, especially if you are going to be creating complicated interfaces.

Click on the "Save" button. You will be prompted to save two types of files. The first file type is the HTM file containing the table code, which re-aligns the sliced images on your page, and the second prompt allows you to save all of the slices as individual image files. Name the HTM file "Nav" (without the quotation marks), at the second prompt type "On" for the image file name.

When you enter a name for the image files you are actually adding a common prefix to all of the files created by a particular slicing operation. The rest of the filename is determined by PSP according to the table row and column that the image slice resides in. For instance, the grid used above creates a table of 1 column and 5 rows. The "Home" button will be named "On_1X1.gif" because we gave it the "On" prefix and it resides in row 1 of column 1. The "Tutorials" button will be named "On_2X1.gif" because we gave it the same prefix and it resides in row 2 of column 1, and so on.

Close the Image Slicer dialog box.

Create the Rollover Effect

Now that we have the mouseover image sliced, we can create the final rollover effect.

If you are working with the PSP file saved from part one of this tutorial, hide the "Mouseover" layer and the corresponding text layer in the layer palette. If you are using the images saved from this page, make "Fig7B" the active image.

Once again, choose File > Export > Image Slicer. Click on the "Load Settings" button and open the "NavButtons.jsd" file saved in the first part of this tutorial. We could have used the grid option here, but I want you to see how convenient this file really is . . . especially if we were working with a more complicated layout.

Select the "Home" cell, fill in the "Cell Properties" information for this cell (You can use either an absolute or relative URL in the URL entry area.), make sure that "include cell in table" is checked.

You may also want to adjust the optimization settings slightly for maximum quality, since this is a different image.

Click on the "Rollover Creator" button, and then check the "Mouse over" and "Mouse out" checkboxes in the Rollover dialog box. Click the "Open File" button (folder icon) for the "Mouse over" entry and choose the "On_1X1.gif" image file. Do not choose a file for the "Mouse out" entry; checking the box without choosing a file will make the default image reappear when the cursor leaves the image.

Mouseover the buttons to view the example

Select the other cells, one at a time, and add the information for each, changing the "Mouse over" images as necessary. Click on the "Preview" button to open the file in your browser. Your results should be similar to the example on the right.

If everything is as it should be, close out of the browser window, and then click on the "Save Settings" button. When the Save dialog appears, click on the original "NavButtons.jsd" file and save. Choose "yes" when asked if you wish to replace the existing file.

Click the "Save" button in the Image Slicer dialog box, click on the original "Nav.htm" file, and click save. Choose "yes" when asked if you wish to replace the existing file.

Once again you will be prompted with another "Save As" dialog box where you give the images created by this slicing operation a common prefix. Type "Off" for the prefix.

To use the navigation buttons on your page, open the Nav.htm file in Notepad, or similar text editor, and copy the table into the HTML code for your page.

I also suggest that you use an image preload script for the mouseover images in the head section of your HTML document so that the mouseover effect will work smoothly. You can copy and paste the script below to use in your page: