Pop-up Image Links
Help

 

Notes:

If you are developing you links on your computer then the directory structure for you images needs to be the same as it is on the server. Relative links are used in this case. For instance if you have your images stored in a directory called "img" on your computer then there should be in a directory called "img" on your server. This is common way it is done when you are desingning a web site.

This is the path of the directory that contains your HTML file.


How to Use This Tool to Create Links for Pop-up Images
What this Does for You

Use this tool to easily create links for your pop-up image windows. You will enter a little information about each link and then this tool will fabricate the link you need to place on your page. Required information such as the size of the pop-up window is automatically calculated and placed in the proper place in your link.

Setup to use Pop-up Images

Although not required to run this tool, it is important that set up your page so you can use Pop-up Images. You need to complete steps 1, 2, and 4 of the Instructions for Implementing Pop-up Images. This series of pages replaces Step 3 and makes it easy for you to create your individual links for the Pop-up Images.

At the top of this page you will find a form where you will setup your working directory. You probably will only need to do this once. It is critical that you get it right.

Your working directory is the directory that contains the page where you want to place the links that you will be creating here. The drop down drive box makes it easy for you to get started with creating your URL for you working directory. Once you have made this selection, you should only have to fill in the sub directories in the URL box.

You then indicate whether you will be using a thumbnail image for you links or a text link. Once you have this information press the - OK - button to proceed with setting up your individual links.

Creating your Links

Here are the three easy steps that you will complete for each of your links.

  1. On the Enter Link Information page you will enter some information about your individual links. You will enter the title that you want the Pop-up window to display in it's title bar and the SRC of the image that will be displayed (be sure to include any sub directories, example: img/mypicture.jpg). You will then enter either the text or the thumbnail information for the link label. You can now relax because this is all the information that you will have to enter for any link.

  2. On the Make Link page, the image that will be displayed in the pop-up up window is displayed. If applicable, the thumbnail image that you will be using for the link is also displayed. This page serves two purposes. It allows you to confirm that you did enter the SRC information correctly on the previous page and it fabricates the link for you to copy to your page.

  3. You can test your link on the Test Link page. Using this page is not necessary but it does allow you to test your link prior to copying it to your page.
Note that the code for you to copy to your page is available on the Make Link and Test Link page. It is the same on both pages.

Frequently Asked Question

What browsers does this tool work with? - You will need to have a version 4 browser (Netscape or Microsoft Internet Explorer) or later to use this tool.

Since I need a version 4 browser for this tool, do people visiting my page also need a version 4 browser or newer for the pop-up's to work? - No. The pop-ups work on version 3 browsers and later.

Why is there not a browse button in step 2 that would allow me to more easily locate my imaged files? - I agree that it would be desirable to have a browse button that would allow you to browse though your directories on your hard drive to find the image files. However, there is no way to do this using JavaScript.

How do you determine the size of the image? - Once an image is loaded, JavaScript can be used to determine the size of the image in pixels. That is one of the reasons that you see the image in Step 2. This only works in version 4 or later browsers, hence the reasons that that a version 4 or later browser is needed for this tool.

Can I use the technique in the previous FAQ to adjust the pop-up sizes on the fly? - No, at least not very easily. Note that I said that you need to load the images before you can determine the size. But you need to know the size of the pop-up before you load the image. So, it's a chicken and egg thing.

Can I use absolute links for the images? - Sure you can and in that case you will not have to set up a work directory on this page. I personally find it easier to use relative links. The choice of course is yours.