Maddog's HTML for Real People Chapter 6, Lesson 10


[INDEX] Ch 6, L 10 - Off-Page Images & Helpers

If you already know how to build a hyperlink for an off-page image, you can skip this lesson.

So far we've talked exclusively about inline images, that is, images which appear to be part of the web page. But you can also point to images directly, using a hyperlink. When the browser is reading and parsing the HTML file, and encounters a hyperlink to an image file, it does one of two things:

1. If it is an advanced graphic browser, it resconstructs the image itself, and displays it on a new, blank page.
2. It calls a "helper" application (separate software) which reconstructs and displays the image.
Creating an off-page image is a good idea if you have a lot of images, or if the image is large. Then, the remote operator can decide for theirself whether they want to look at the image (and wait while it downloads). Giving people options is one of the best features of HTML, and makes your web page interactive.

Creating an off-page image is as easy as creating a hyperlink. We already know how to do it: using an anchor tag, we'll provide the image filename as the reference.

<A HREF="image-filename"> link-description </A>

Normally, for images, we would stick with '.jpeg' or '.gif' formatted files. But the technique we've just illustrated can be used to include ANY kind of file on your web page. Just keep in mind that it will only be successfully downloaded and executed if the receiving browser has been previously set-up to call the appropriate helper application for the file type being linked. Remember also, that the file extension (after the last dot) will be interpreted by the receiving browser to determine which helper application it should call to assist it. For example, let's say the receiving browser has been set up to use Windows "Paint" or "Paintbrush" as the helper application for '.bmp' files. Let's also say that the HTML file (being read by the remote browser) has a link that points to a '.bmp' image (image-filename.bmp). Then, when the remote operator clicks on that link, the browser "calls" the helper application associated with the '.bmp' extension, sending along the name of the file. The helper application (Windows "Paint" or "Paintbrush", in this case) starts up and reconstructs the image.

This is a common technique for handling files that aren't intrinsicly supported by the browser itself. Provide a "link" to the file, and depend on the remote operator to set up his browser for the appropriate helper application if they choose to activate the link. It's a good idea, in the link description, to tell what kind of file is being pointed to, and how large it is, so that the operator knows what kind of helper is required, or whether or not they want to go to the trouble to set it up. This technique is commonly used for video/movie files and sound files, which not only require helper applications, but also take a significant time to download.

Let's look at some examples in source code:

HTML Source Code Follows:

To check out an image of an alternative way to drive  to work -<A HREF="daedalus.jpg">click here</A>- (JPEG, 30KB)
<P>
To listen to me drop my teacup -<A HREF="teacup.wav">click here</A>- (WAV, 42KB)
(End of HTML Source Code)

Demonstration Follows:

To check out an image of an alternative way to drive to work -click here- (JPEG, 30KB)

To listen to me drop my teacup -click here- (WAV, 42KB)

(Demonstration Ends)

Look at the demo. By providing links instead of using an inline image, we've saved 21 seconds in typical download time for our page. We've also saved download time by using a JPEG image file, which is considerably smaller than a GIF image file. Because we provided a link, the remote operator has the option of looking at the image, and can decide for themselves if they want to. On the second link, which is a sound file, the operator might well say "hey! I don't have sound equipment on my computer, so there's no sense in me clicking that link."


-PREVIOUS- -CHAPTER- -INDEX- -NEXT-

Overseer: Monty Northrup ... maddog@io.com ... leave e-mail ...
...to maddog 'n' miracles homepage...