Rollover Image

A rollover image is an image that changes when the mouse pointer is placed over the image.
To add a rollover image to your page, place the cursor at the point in your page where you want it.
In the “Insert” toolbar at the top of your document, select the “Common” tab and click the downward pointing arrow next to the “Image”.
In the drop-down menu that appears choose “Rollover Image”.

This opens the “Insert Rollover Image” dialog.
In the upper section of the dialog box, enter a meaningful name for the image.
In the second box, select the image you want to see when nothing happens.
Just click the “Browse” button and navigate to the image you want.
In the third box, select the image you wish to see when someone places a mouse pointer over the image.
Click again the “Browse” button to select it.
Note that both images should have the same dimensions.
In both cases a window will appear asking if you want to add this image to your sitemap and where you want to place it.
As always, we choose the “images” folder in the “Gratis Cursus” sitemap.

The box “Preload Rollover Image” is checked by default, leave this checked.
This will load the “Rollover Image” in advance, to display it when someone hovers over the original image.
If this is not checked, there would be a pause between the transition from the original to the rollover image.

In the next box you give any alternative text for visitors who can not see images, or rather for the visitors who disabled the “Show Images” option in their browser.

And in the last box, if you link to another site, enter another page. But more about links in the next lesson.
Click OK when you’re done.

To see the results you need to load the page in your Browser.
Just click the F12 key on your keyboard. When you are asked whether you want to save the file, click “Yes”.
More about rollovers in Lesson 16.

Image Alignment

There are several ways to align images in your page.
When we insert an image, by default, it will be on a new line on the left side of the page.
To change the text in your page before or after the image window, first select the image and click the downward pointing arrow next to the “Align” box, choose one of the options in the drop-down menu.

If you choose “Right”, our image is right-aligned across your image.
If you choose “Left”, our image, what did you expect, will be left aligned across your image.

To adjust the space between image and text, assign a value in the boxes “V Space” and “H-space”.
“V Space” will create more space between image and text.
“H-space” will raise or lower the text in front of your image.

Another way is to use the “Border” box.
The value we give here will adjust the space between image and text both horizontally and vertically.

Featured Courses

• Downloading iPad Apps
• Lesson 1: Introduction to Publisher
• Lesson 65: File Formats