Creating Rollovers

[ LiB ]

Creating Rollovers

You're sure to have seen rollovers all over the Web. Move your cursor over a button or other image, and the image's appearance changes. Move the cursor away from the image, and the image reverts back to its original state. Using Paint Shop Pro's Rollover Creator, available from the Image Mapper or Image Slicer, you, too, can create fancy rollovers.

As an example, let's create a navigation bar and add rollovers to it. Begin by creating two versions of the bar, one that shows the hot spots in their neutral state, as in Figure 9.20, and another that shows the hot spots in their "on" state, as in Figure 9.21.

Figure 9.20. A navigation bar with hot spots in their neutral state.

graphic/09fig20.gif


Figure 9.21. A navigation bar with hot spots in their "on" state.

graphic/09fig21.gif


Make the "on" version the active image or visible layer (depending on whether you made your two versions as separate images or as two layers in the same image file). Then start up the Image Slicer with F ile > Expor t > I mage Slicer. In the Image Slicer, click the Preferences button, and in the Slice Preferences dialog box, shown in Figure 9.22, choose Prompt for image folder on Save or Save As , and then click OK . With this preference set, Paint Shop Pro will prompt you for a folder and the initial portion of file names for your slices.

Figure 9.22. Setting slice preferences.

graphic/09fig22.gif


Next, slice the bar into cells for each of the hot spots, as in Figure 9.23. Optimize the cells and make any other settings you need. Then click the Save To Clipboard button. If you're prompted for a folder, navigate to the folder where you want your images stored, and then click OK . When you're prompted for a file name in the Image Slice Save As dialog box, enter a meaningful name (such as "rollover_on"), and then click Save .

Figure 9.23. Slicing the "on" version of the navigation bar.

graphic/09fig23.gif


Back in the Image Slicer dialog box, click the Save Settings button. Give your settings a name, and then click Save . You'll use the saved settings in just a bit, when you slice the navigation bar in its neutral state.

Close the Image Slicer by clicking its Close button. Then make the neutral version of the navigation bar the active image or visible layer. Start the Image Slicer again, and in the Image Slicer dialog box click the Load Settings button. Choose the settings file you just saved, and then click the Open button. The settings you used for the "on" version are now loaded onto the neutral version, as shown in Figure 9.24.

Figure 9.24. The saved settings applied to the neutral version of the navigation bar.

graphic/09fig24.gif


Now to create the rollovers. With the first cell selected, click the Rollover Creator button. In the Rollover Creator dialog box, select Mouse over and Mouse out . Then click the folder button to the far right of the Mouse over check box, as shown in Figure 9.25.

Figure 9.25. Setting the states for your rollover.

graphic/09fig25.gif


You'll then see the Select Rollover dialog box, shown in Figure 9.26. Navigate to the folder where you saved your "on" slices. Then choose the first of these slices. (Here, that's the file called rollover_on_1x1.gif .) Click the Open button. You're then returned to the Rollover Creator dialog box, where the file ID of the image you just selected is now displayed in the text box to the right of the Mouse over check box, as shown in Figure 9.27.

Figure 9.26. Select the image to load in the Mouse over state.

graphic/09fig26.gif


Figure 9.27. The selected file's ID is now displayed in the Mouse over text box.

graphic/09fig27.gif


NOTE

graphic/p2.gif NOTE

If a rollover state is selected but no file is chosen for that state, then the original image is loaded for that state. In the example here, on mouse over (when the mouse cursor is positioned over the slice), the original image is replaced by the image indicated in the text box. On mouse out (when the mouse cursor is moved away from the image), there is no image file indicated, so the original image is restored.

You're now just about done. Click the OK button in the Rollover Creator dialog box. Then in the Image Slicer, optimize the cells for your neutral state version of the navigation bar. Next, click the Save As button. In the HTML Save As dialog box, navigate to the folder where you want your HTML code saved, and enter a name for your HTML file. Click Save . Then in the Image Slice Save As dialog box, enter a name (such as "rollover") for your slices. When you're returned to the Image Slicer dialog box, click the Close button.

You can then edit the HTML file you created or copy and paste the code into an existing HTML file. The code puts your image slices in a table, to make the navigation bar appear to be a single image, and it also provides instructions for the rollover. Figure 9.28 shows the example rollover in action, with the mouse cursor over the Links slice.

Figure 9.28. The rollover in action.

graphic/09fig28.gif


[ LiB ]


Paint Shop Pro 8 Power
Paint Shop Pro 8 Power!
ISBN: B001QCXEI6
EAN: N/A
Year: 2006
Pages: 125
Authors: Lori J. Davis

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net