What is a rollover image and how do I create one in Website Builder?

This article will show you how to implement a rollover image for your website.

A rollover image is a secondary image loaded into your page to display when a visitor to your site ‘rolls over’ a certain image within your site. It is used to make your site more interactive and may be used to display different views of a same image, or alternative products.

To install a rollover image, you will need two images loaded into your image gallery. One image will be the default image shown when your website loads (i.e. the primary image) and the secondary image will appear when a visitor ‘rolls over’ the primary image. Both these images will need to be the exact same size, otherwise it may result in stretching or distortion.

Please note: this article is only applicable for Versions 6 and 7 of our Website Builder package. If you’re not sure which version of Website Builder you have, you can find out by reading this article.

Step 1 of 4

Start by logging in to your Website Builder package.


Step 2 of 4

From there, click the image you wish to update and then click the gear icon that appears within the provided toolbar to access its settings.


Step 3 of 4

A separate Image menu will now appear along the bottom of your page. Simply drag the image you wish to use from the left-hand Image menu and drop it into the Drop rollover image above box.


Step 4 of 4

Your rollover image will now be set up. You can check the look of your rollover by clicking Preview in the top-left of the main window.