How to Create Rollover Buttons
By Frank

To create a simple image button that hyperlinks to a page on your site, follow these instructions.

Import any image you want to use as a link button. Resize the image to the size you need for the button. Go to File/Export as image and save the resized image to a convenient location. Give it a meanigfull name such as myImageNormal.jpg.

With the resized image still selected, click on the Image adjustment tool at the top of your WebPlus page. In the dialog select Add Adjustment and choose Hue/Saturation/Lightness. You will be presented with three sliders. Move the sliders for Hue and Saturation to the far left to create a Black & White image, then click on OK.

Go to File/Export as Picture and save the adjusted image with a name such as myImageOver.jpg.

You have now created the two image states for your rollover. so you can now delete the images from your page and insert the actual rollover.

Go to Insert/Web Object/Rollover. In the dialog that pops up, browse for the NORMAL state image you just created in the NORMAL state field. Then browse for the OVER state image in the OVER state field.

Click on the "Set" button next to the hyperlink box (at the top of the dialog) and choose the page you want to link to. You can also set target etc. When you're done, click OK and position your rollover where you want it on the page.

If you now preview the site, you will notice that the image changes from colour to Black and white on Rollover, and clicking will link to your selected page.

Click Here to see it in action

You can use any image effect to create the OVER state, such as a transparency effect, or a colourizing effect.

If you want to add text to the image, just place a text box over the image and make the text different colours on each button state before saving the two states. Be sure to select both the image and the text before exporting as image.

Hope all is clear now. Let me know if you have any problems.

Regards

Frank

Serif Forum link