Image Roll-Over - XSitePro Website Design

Home Previous  Next

icon_xsp

Brought to you by XSitePro Website Design Software

professional website design made easy      

 

 

 

Image roll-overs are a really quick way of catching a visitor’s eye as they navigate your page. Put simply, an initial image selection is instantly replaced by a second image selection so long as the visitor’s mouse is ‘hovering’ over the image. When the visitor’s mouse pointer moves off the image, the image reverts back to the original.

 

The image below on the left will automatically change to the image on the right when the mouse hovers over it...

 

example_image_rollover

 

This can also be useful for performing “close-ups” of an image, or perhaps for an attention-grabbing special one-time-offer, hidden behind a product photograph until the user’s mouse hovers over the image.

 

Used appropriately this script can make for an engaging, interactive piece of page content.

 

 

Instructions

 

Selecting this script from the list of scripts (how), and clicking the button_widget_wizard_edit_settings button loads the following screen:

 

window_image_rollover

 

 

In this screen we need to set two values:

 

The original image – This is the image which will be displayed by default, when the visitor first lands on your Web page. To set this image, browse to your image file by clicking the button_application_image_browse button and then by selecting your image file (by double-clicking it) from the file explorer window.

 

The Rollover Image – This is the image which will replace the original image while the visitor ‘hovers’ their mouse pointer over the image. To set this image, browse to your image file by clicking the button_application_image_browse button and then by selecting your image file (by double-clicking it) from the file explorer window.

 

 

Once you have selected your pair of images, simply click the button_image_gallery_insert button to insert the script into your Web page at the cursor-point.

Home  Previous  Next