Part 5.2: Making Clickable Images that When Clicked Opens Up a Larger Image
You probably will have seen photo galleries online that display small versions (thumbnails) of images that when clicked open a larger version of the image in the browser.
You will need to have two versions of the image for this to work, a small (thumbnail) version and a large version (the original image). All this is covered in our comprehensive Dreamweaver course in Brighton, Sussex.
To create the thumbnail version, use a photo or image editor to re-size the image and make it smaller and save it under a different filename. You now have the two images you need.
1: Both the original image and thumbnail need to be in the ‘images’ folder of your website. Copy both images to this folder as described in Dreamweaver Course Part 2
2: Place the thumbnail image on to your web page as described in Dreamweaver Course Part 2
3: Click the thumbnail image to select it and find the ‘Link’ field in the ‘Properties’ page that appears. Click the ‘Browse for File’ button that is next to the ‘Link’ field. A dialog box entitled ‘Select File’ will appear, browse to the ‘images’ folder and select the large version of the image. Click ‘OK’ to continue.
Note that Dreamweaver has created this link using a relative link ‘images/your-image.jpg’.
