CodeBodger's
Home

Overview

Examples

Instructions

Script Maker

Sample
Single-Image
Page

Code
Discussion

Better Thumbnail Links
Instructions

  1. Design a simple HTML page that shows the large version of an image. (A sample page is provided.)
    99% of this page will be the same for every large image that you link to. The changable bits will be things like the url of the image, the caption etc.

  2. Now replace the changable bits with something in the format of @start@Image@end@

    For example:

    <img src="./mylarge.jpg"> becomes <img src="@start@ImageURL@end@">

    <center>The caption goes here!</center> becomes <center>@start@Caption@end@</center>

    The bit between @start@ and @end@ can be any single word, but try to make it obvious what it stands for.

    You will need a link for the user to return to the thumbnails, either a text link or use the image itself.

    Replace the url of this link with @start@BackURL@end@

    e.g. <a href="./thumbnails.html">Return</a> becomes <a href="@start@BackURL@end@">Return</a>

    In this case only, BackURL cannot be changed to any other word.

  3. Copy this html, open up the Script Maker page, and paste it into the box provided.
    Don't worry about the lines splitting in strange places to fit in the box, the output will be correct.
    Don't worry about line indentation, it will be stripped out.

  4. Enter a single word name for the script.

  5. Press Go!

  6. The main box will now contain the complete script, ready for you to copy and paste.
    The smaller box will contain the onclick handler required to link to the image page.

  7. Using Frames: Copy the script into the head section of the frameset page.
    Don't let FrontPage Express edit this frameset. It will silently remove all script in the header section. This is a error, putting script here is legitimate and commonly used.

  8. No Frames: Copy the script into the head section of every thumbnail page.

  9. Each of your thumbnails would normally have a link to the large image,

    e.g. <a href="./mylarge.jpg"><img src="./mysmall.jpg"></a>

    Copy the handler into this link,

    e.g. <a href="./mylarge.jpg" onclick="var Caller=self;with(parent){if(typeof(PicShow)!='undefined')PicShow('Caption', 'ImageURL', Caller)}"><img src="./mysmall.jpg"></a>

  10. Finally, each of these handlers will have to be customised to match the image.
    e.g. Caption will have to be replaced by The Caption for this Particular Image and ImageURL replaced by this-particular-large-image.jpg.

    You may, of course, have used different names and have more or less parts to replace.
    Don't replace the single quotes, and please leave Caller alone, it is needed for the script.
    If you use your own frameset, remember to name the frames or the script will fail.
    (It can't put the image into a frame if the frame cannot be found!)