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

This article applies to Website Builder packages.

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, etc. 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 (primary image) the second image (secondary image) will be displayed when a visitor ‘rolls over’ the primary image. Create your website’s rollover image by following these steps.

Step 1 of 4

Login to your 123 Reg control panel.

Scroll down to the Create your website section and click on the Website Builder icon.

Step 2 of 4

Click on the Login button next to the relevant package.

Step 3 of 4

In the Design view use the mouse to click and highlight the image you wish to link.

Choose the settings option.

Step 4 of 4
  • In the Image menu that appears at the bottom of the page you will see an Image Rollover box. Drag the alternative image you wish to appear on rollover from the left hand image menu and onto the Image Rollover box.


Your rollover image is now set-up. You can check the look of the rollover using the Preview option from the top left of the main window.

Please Note: It is advisable to make sure your main image and rollover alternative are of the same size. If the images are of a different size the rollover image will adopt the same proportions and size of the original image which may result in stretching or distortion.