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...
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.
Selecting this script from the list of scripts (how), and clicking the button loads the following screen:
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 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 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 to insert the script into your Web page at the cursor-point.