Just in case you are dealing with neanderthal surfers like them wot uses these PC things, you can put some text here.

IMPORTANT INSTRUCTIONS

“If you move your mouse so that the arrow thingy is on top of one of the mini photos, a larger version will appear in this frame as though by magical means.”

The text can be included in the code or, as I have done here, placed in a standard text box and “Sent to the Back” using the “Arrange menu”>

Example A

This has four images that appear enlarged in the frame when the mouse cursor is rolled over the thumbnail.

If you hold the cursor over the thumbnail image, the photo caption will appear.

Although these images are square, they can also be landscape or portrait.

Example B

This second block of four thumbnails is placed on the page and pushed up to the bottom of the top one to make it look as though the are all one display.

If you hold the cursor over the thumbnail image, the photo will stay enlarged but the caption will not appear.

In this case, the captions have been placed in text boxes below each thumbnail.

In this example there is no frame for the enlarged image.

Example C

This time I have added a 1 pt white frame to each image before uploading so that I don’t have add a frame in the code and the thumbs are also framed.

This method is simpler and saves frigging about with code and the position of the enlarged image in relation to the frame.

No captions so that you can guess what they are?

Navigate This Section:

Mouse Over Images

Display Layout

Demo Layout

Code

iWeb for Musicians E Book