Tips and Tricks for Astro Imaging

The IS map is the simplest way to create a viewer-clickable image. Using an IS map gives the viewer the ability to click on an area of interest and be taken to a new webpage of any kind. It is most often used with large images to give a zoomed view of the area of interest (AOI). This can be a full resolution clip from the same base image (often the case with some of the large multi-mega-pixel images) or a different image entirely, either by the same author or from elsewhere on the web. It can also be used to link to an informational page (as opposed to another image page). The steps below describe how to use Adobe's ImageReady to create both the clickable image and the HTML to go with it.

Load the image you wish to use for the clickable image. It should already be sized to fit the webpage that it will be used on. To avoid degrading the image unnecessarily, it is best to save the image in a loss-less format such as .TIFF or .PSD. Only when doing a final save should it be placed in .JPG mode. More on this later.

IS Map One
Figure One

First select the Image Map drawing tool from the toolbar (green arrow in figure one). You have a choice here of three tools. The one you see being used is the circular Image Map tool. You can also select a rectangular or polygonal tool. Which shape you use will determine the shape of the clickable areas that you will create. Your choice will be determined by personal preference as well as the best shape for the particular image. Once you have the tool active, draw your clickable areas by dragging the tool over the areas, one at a time. As you draw, the areas will look like the M16 area shown in the figure one example (blue arrow). Once they are drawn, they will look like the areas indicated by the red arrows.

You do not need to be fussy at this point, just use the right shape and get the areas in their approximate positions. Next, use the Image Map select tool. This is located just opposite the Image Map drawing tool (to it's right) on the toolbar. This will allow you to select, move, and resize the mapped areas until you get them just the way you want them.

Now you are ready to tell ImageReady where you want the user's click to take them. This should be typed into the URL box of the Image Map dialog (yellow arrow). It can be either an external web URL or an internal (your own website) .html link, depending on your intended use. The Target box (orange arrow) will determine what happens when the user clicks. Will it replace the current page (_self) or will it open a new page (_blank)? Although you can also select (_top) or (_parent), these are normally used only if you are working with frames. Finally, in the Alt box (purple arrow), input the "alt tag" text. This is the text you wish to display over the image as the user's mouse passes over the clickable area. This can be a useful feature for object information so think carefully about what you want for this text.

Save Options
Figure Two

Adobe has made the saving preferences a bit hard to find, but it is important to have these set up for ease of use and proper file output. You should go to [Edit], [Preferences], [Optimization], where you will see the dialog shown above in figure two. I would suggest setting these as shown, although you can use your own settings. What these settings will do is set up the page you see behind the dialog. This page is displayed when you select the tab that says "4-Up" at the top of the image window. This causes the image window to display 4 image panes with various levels of .JPG compression. You can select the pane you wish to use in terms of image file size and image quality. This is how your image will be optimized and saved in the next step. Note you can also tab select "2-Up" (also set up in the dialog) - a two option view, "Optimized" - to see the full optimized "to be saved as" version, or "Original" - the file you brought into ImageReady in the first place.

Figure Three

Believe it or not, we are almost there! Now we will save the HTML as well as the image and map (the map is part of the HTML). Next, select [Save Optimized As] from the file menu. You will see the dialog shown in figure three. As you can see, I have decided to save as "Saggit_Click.html" and as "HTML and Images". This insures you will both save the image AND create (or replace if you already saved once) an HTML file with the Image Map.

NOTE: When ImageReady saves files, it will create a subdirectory called "images". This is used to store all of the image files, including sliced images. When these pages are uploaded to a website, you will either need to preserve this file structure, or change the URLs of the files within the HTML file.

Image Map HTML
Figure Four

In figure four above you will see the HTML that ImageReady generated for us. The image mapped areas are shown by the red arrow. You will note the shape (circle) and position (in pixel coordinates) of the mapped areas as well as the URLs we have linked these to and the (_target="blank") which tells the browser to open a fresh window. Next to the green arrow you will see the image filename and the size in pixels. The gray text next to the blue arrows is comment text, you can delete it if you wish. Finally, the orange arrow shows the page title (not the filename). This is what will appear at the top of the browser frame when the page loads. ImageReady gets this from the image filename by default. You probably will want to change this to something more informative, but it will not harm the function of the pages to leave it alone. All that remains is to be sure that you have also created the pages that the Image Map links to (M16.htm, M17.htm, etc. in this example) and you are ready to go! Here is a working example.

Tip: You will need an HTML editor if you do not already have one. There are many of these - I like a very simple one called NoteTab Pro - it also replaces the lousy Windows Notepad and is very inexpensive.

©William McLaughlin - 2004   Go to Bill's Website


Copyright willmclaughlin.astrodigitals.com .