Read About Fatpages

This page contains a Frontier 5.0 fatpage version of the Relative Images in JavaScripts script.

A tool for working with JavaScripts in Frontier's Website Framework.

It builds relative paths to images in a JavaScript. It works in a similar fashion to the imageRef script, in that the path is built at runtime, and points from the page being rendered to the image in the images table (which becomes the images directory). This is really the only similarity with imageRef(), however.

This is necessary because the traditional method of working with JavaScripts is simply to insert the script into the rendered text, as a string. As Frontier's and JavaScript's syntax are very similar, it is very difficult to run embedded macros in a JavaScript (as the macro engine uses curly braces to delimit the macros), so scripts like imageRef() can't be used. That means you must use full paths in all of your scripts.

Unfortunately, that causes difficulties. The most obvious is that your site loses all of the portability that Frontier usually makes so easy... every image in your script now has a full path.

The other problem is that if you're doing a "rollover" script, to change an image when the mouse passes over it, then you are (or should be) caching the image in a JavaScript variable ahead of time (perhaps in a JavaScript array). When you preview a page (write it to disk from Frontier, to see the pages current condition), you'll find that it loads the page from the server instead of from your local disk.

This script fixes both of those problems, by allowing all of your image paths to be relative!

It's very easy, and the requirements are nearly identical to other image management features of Frontier. Specifically, you must have an images (or "#images") table containing the images to which you want your JavaScripts to link. You'll also need to add one line to your final filter, which calls this script.

Simply replace the full paths to your images (in the JavaScript) with the name of the image plus some special 'delimiter characters', which you can define yourself by modifying the script (I've made it as easy as I could imagine).

Example

With the traditional method of handling javascript in Frontier, every path to an image is a full path. So, you'd need to type something like this for every image reference:

"http://macrobyte.simplenet.com/images/myImage.gif"

Now, this is all you'd need to do:

"[[[myImage]]]"

... and the result in your script will be something like this:

"../../../images/myImage.gif"

Very simple!

Last Step

Don't forget to add the line to your final filter, or none of this will make any sense! This is what you need to add:

websites.["#tools"].relJSimages (adrPageTable)

January 16, 1998

Fixed a couple bugs. The script is now compatible with the pageHeader() macro, and the correct error is reported if the image being searched for can not be found.