Tips and Tricks for Astro Imaging

An image rollover (in this case) is essentially a Java script that will allow one image displayed in a browser to be replaced with another image. In this example, we will replace a normal, full color image of an area of sky with an inverted and annotated Grayscale version that will allow the viewer to identify the objects present in the image.

Load the image you wish to use into Photoshop first. Size the image 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.

Next, convert the image to Grayscale by selecting [Image], [Mode], [Grayscale] and "OK" when it asks if you wish to discard color information. Then select [Image], [Adjustments], [Invert]. You should now have a black on white image. You will probably need to do a levels and/or curves adjustment as well to best display the objects you will be identifying. These are best accessed by the keyboard shortcuts [Ctrl L] and [Ctrl M]. Finally, you should reconvert the image to RGB mode by selecting [Image], [Mode], [RGB]. This will allow you to create your labels in a contrasting color that will be more visible to the user. When you have finished preparing the images, you should have your original plus your inverted, labeled, Grayscale version as seen below in figures one and two.

Original Image
Figure One

Grayscale Labeled
Figure Two

Next, go to [Select], [Select All], [Edit], and [Copy] to copy the Grayscale image to the clipboard. Then go to or load your original, pre-sized, RGB image and use [Edit], [Paste]. This will paste your Grayscale ID image into a new layer on top of the RGB background layer. Name your Grayscale layer if you wish by double clicking on the layer name. The result is shown in figure three below. Now save the image as a .PSD file under a unique name.

Create Layers
Figure Three

A question that may have occurred to you is: Can I combine an ID rollover and an Image Map? The answer is Yes! Since moving the mouse over the color image will cause the Grayscale labeled image to appear, the user will obviously be clicking on the Grayscale image, but you need do nothing special because of that. Simply create your image map just as you did in the IS Map tutorial. This can be done either before or after the creation of the rollover as they are pretty much independent functions. The rollover construction shown below indeed does have the previous image map as part of it, as you can easily see. Note I have not created image mapped links for all of the labeled objects in the example (since I did not have closeup images to link to for all of the objects).

To begin creation of the rollover, start ImageReady and load the .PSD file you just created. Make sure both the Layers palette and the Web Content palette are visible as shown in figure four below. If they are not, select them in the Window menu. Now we will create the rollover by first creating a layer based slice from the Grayscale layer. Do this by activating that layer (click on it in the layers palette). Then right click on that layer and select [New Layer Based Slice] from the menu as shown. You will see a slice appear in the Web Content palette under slices.

Load and Slice
Figure Four

After you have created the slice, it should be active (blue highlighted). You will now want to right click on the new slice in the slice section of the Web Content palette. From the menu that appears, select [Add Rollover State] found at the bottom of the menu. You can also click on the "Create rollover state" button at the bottom of the Web Content palette (shown by the red arrow). This procedure is shown in figure five.

Create State
Figure Five

You will now see a rollover state added below the slice as shown in figure six (A). There are two states in this rollover. The final preparation step is to set what these states will look like. The first state is the so-called "Normal State". This is the state where the mouse is not over the image and should look like the normal RGB image. To set what the normal state looks like, highlight the slice (not the rollover state) as shown by the red arrow in figure six (B) below, then turn off the "eyeball" visibility icon found on the Grayscale layer in the layers palette (green arrow). All the thumbnails will now show the RGB image as shown in figure six (B), indicating that the normal state is set to show the RGB image.

Visibility and Check
Figure Six

Next, set the second state. This is the rollover state where the mouse is over the image. To do this, highlight the rollover state at the bottom of the web palette. This is shown by the red arrow in figure seven. Once this is highlighted, turn off the RGB visibility and turn on the Grayscale visibility as shown by the green arrow. You should magically see the rollover state thumbnail switch to the Grayscale appearance! This is also shown in figure seven. As a check on the success of your procedure, you should go to [File], [Preview In] and select your favorite browser. You can also click the icon for your browser at the bottom the ImageReady toolbar. The rollover should work!

Grayscale Rollover
Figure Seven

WARNING: This is a Java applet and since Windows XP Service Pack Two, this is turned off by default in Internet Explorer. The user may need to activate Java to get this to work. Most of the time, a yellow "Security Warning" icon will appear at the top of the active part of the browser that will give the user this option for a single page. If you want Java turned on for all content (I prefer Java left on since turning it off breaks many useful web features), you can do this in the options setup for IE.

Finally, you should save the images and HTML. First, select the compression settings you want to use for the two versions (RGB and Grayscale labeled) of the images. This can be done in the four panel view that was discussed in the IS Map tutorial. The difference here is that you will be saving two images. The optimization will be the same for each so you should look at each as it will appear so that you can determine which setting will be good for both images. You can do this by simply selecting the image in the Web Content palette and examining it's appearance. Saving is done the same way as for the IS Map. Simply select [Save Optimized As] from the file menu as shown in figure eight. Here is the final result.

Rollover Save
Figure Eighte

I have always felt that it is best to have a look at your HTML. Even if you don't understand all of it, which may be the case with HTML generated by a program such as ImageReady, you still can learn quite a bit and perhaps customize it to suit your tastes or website. The HTML for the the rollover example is shown in figure nine below.

Rollover HTML
Figure Nine

Here is the minimum you should know about the HTML file: The black text by the red arrow is the page title. ImageReady auto-names this based on the image filename. For better web usage, you should rename this to a sensible name of your choice (In this case, I called it "Sagittarius Object ID Rollover"). The blue text between the green arrows is what tells the browser which image to load under what mouse movement condition. You would not normally touch this unless you know what you are doing. This is even more true of the gray text between the yellow arrows. This is the Java code and should not be changed unless you understand Java. You should also be aware that your HTML editor may display HTML code with different colors or no color at all.

©William McLaughlin - 2004   Go to Bill's Website


Copyright willmclaughlin.astrodigitals.com .