To see a video presentation of this tutorial click the video camera symbol.

 

 

Back to Home/Contents page

 

 

www.ictpublishing.co.uk

 

1. A rollover image is where a second picture appears when you hover your mouse over a picture or image on the web page. Create them by going to INSERT > IMAGE OBJECTS > ROLLOVER IMAGE from the menu bar.
You will be presented with a dialogue box like the one below so give your new image a name.

2. Give your rollover image a name like in the example below. Then browse for a first image and then for a second image. If you wish you can type in a URL or browse to a page for your image to link to when clicked. Make sure the box saying "Pre load rollover image" is ticked. This means that when it is viewed by a browser it will temporarily store both images in the browser so they show up immediately when you hover over them with the mouse.

 
3. When you have finished you will only be able to see the first image until you preview the rollover in a web browser. Save the page and then press F12 or click the view in browser icon as in the screen shot below. 4. When you hover over your image in the browser it will change into the second image that you chose and if you put in a link correctly then clicking the image will take you to that linked page.