For this example, you’ll need a bunch of related images all the same size, such as vacation photos. Let’s say you want to display twenty selected images from your last vacation, you would like them to be full-size, but you don’t want to make a really huge web page and you don’t want to make twenty reasonably-sized web pages. We can make a single page that uses JavaScript to switch to a new image when the viewer requests it.
As in the above example, the images need to be the same size. If they aren’t the behavior of the browser is not predictable. Some will try to redisplay the entire page to match the new size. Others will try to resize the image to match the size of the original image. And others will simply insert the new image into the space where the original image was. If it is too large the browser will crop it, and if the image is too small some of the original image will remain.
Make Your Page
First, make a web page with one of the images on it. Align the image to the right so that the text you write will go to the left of the image. On the left, type a title for each of the images you want to display.
Link To Your Images
These are going to be normal links at first: they will link directly to the image. When a viewer clicks on a link, it will take them directly to the image. This way we can verify that everything works before we add our JavaScript. It also means that our friends who have turned JavaScript off will still be able to see our images.
Highlight each image name and link to the appropriate image using “Choose File…” under “Link…” from the “Insert” menu. Save the file, browse it, and verify that all of your links work. You’ll need to use Netscape’s “Back” button to move back to your index page after clicking on an image link.
Name Your Image Placeholder
In the previous example, we used “this.src” to refer to the source of the IMG tag’s image. The word “this” meant that we meant this IMG tag. This time, we’re not going to put the JavaScript into the IMG tag but into a link around our text. Because of this, we need to give our image a name so that we can refer to it from elsewhere on the page.
Double-click the image and click on “Advanced Edit…”. This time, we need to add a “name” to the “HTML Attributes”. The attribute we need to choose is “name”, and the name we’re going to give it is “photoarea”. Okay everything. Add Your JavaScript
Go back to Composer and click on one of your links (preferably the one that does not link to your original image). Pull down the “Format” menu and choose “Link Properties…”. Click on “Advanced Edit…” and go to the “JavaScript Events” tab.
The attribute we need for this is the “onclick” attribute, so choose that. For the value, use:
photoarea.src=this.href;return false
We named our photo placeholder “photoarea”, so “photoarea.src” is the image source for that IMG tag. Since we’re now using a link, “this” refers to our link, and “href” is the HTML option for the link’s value. Since our link goes directly to our image, “this.href” is the image we want the placeholder to switch to.
The semicolon separates lines in JavaScripts. Our next line is “return false”. The onclick event expects the browser to follow through to the link. By returning “false”, we’ve told the browser that it doesn’t need to do anything else. We’ve handled the click and the browser can ignore it. (If you want to test this, change “return false” to “return true”. You’ll see the image placeholder change just before the browser takes us to the lone image.)
Save, and browse. When you click on the link you just added JavaScript to, the placeholder on the right should switch to that link’s image. If it does not, go back and fix it before you go any further.
Once you have the one link working, do the same to each of the other links. Give them an “onclick” attribute in “JavaScript Events” and make the attribute’s value “photoarea.src=this.href;return false”.
