How to Make Star Chart Overlays

[ Home ]

This article will describe how to make overlays of star charts for web pages. By moving one's mouse cursor over an astronomical image, one can see a star chart (or any other image) superimposed over the original image.

I should note that I am not the inventor of this method. Many accomplished astrophotographers have been using this method for years before me (and I learned from them). I wrote this article merely to help others who might like to use this feature for their own web sites.

Here is a sample of a finished overlay. When your mouse cursor is off the image, all you see is the astrophoto. By moving your mouse cursor over the image, a star chart of the same region replaces the original photo. With a little imagination, there is much one can do with this technique.

I used the following programs to create this effect:
The Sky (just about any other planetarium program will do)
PhotoShop 6 (for saving the overlay image - but other image processing software will probably work just as well)
RegiStar (for aligning the star chart image with the photo and creating the final overlay image)
FrontPage (web page development - just about any other web page program will do, or just write your own HTML code if you know how)

We'll assume that you are starting with a wonderful astro-image for which you want to create an overlay. Using your planetarium software (The Sky in my case), bring up the same region of the sky. You should try to orient the star chart close to the same orientation as your image, i.e., if south is up in your astro-image, make south up in your star chart as well. Also, make your star chart area larger than your astro-image. Once you have your star chart as you want it, copy the image to the clipboard, or save it to a file. If you copy it to the clipboard, open PhotoShop, create a new blank image, paste the clipboard image, then save the star chart as a file. I saved it in "tif" format in order to be able to use the image in RegiStar.

Here's my raw star chart image for the above astro-image. As you can see, it covers more than the area in the astro-image.

Now open both the astro-image and the star chart image in RegiStar. We are going to register the star chart image to the astro-image so that the star chart exactly matches the astro-image. First make sure the star chart is selected, then press "F2" to register the images. Choose the star chart as the "Source Image" and the astro-image as the "Reference Group". Then click the "Register" button. This will create a third image, which is the registered image (i.e., the two original images matched up exactly). RegiStar is one of those truly magical programs. One wonders how people survived before it was created.

Now we are going to crop the registered star chart image so that it exactly matches the dimensions of the astro-image. We'll do this in RegiStar. Press "M" on your keyboard to ensure you are in "Multiple Images" view. At this point, you can press "1" and "2" on your keyboard to toggle between the star chart image (1) and the astro-image (2). They should match up exactly, although the dimensions will probably be different. If they don't match up exactly, something has gone terribly wrong, and you should probably start over. If they do match up, press "1" on your keyboard to display the star chart. Now we're going to do a "crop" operation to crop the star chart to the same dimensions as the astro-image. Press "F8" to bring up the "Crop/Pad Control" dialog. Leave "Trim to image data" unchecked and make sure "match" is selected. Then click "OK". RegiStar will now magically crop your star chart to match the dimensions of your astro-image. You now have a star chart image that should exactly match your astro-image. Save this file. Below see the star chart image from above, but registered to the astro-image and cropped to the same dimensions. You can now close RegiStar, as we are finished with its magic.

The final step is to create a little JavaScript to put in your html code that pops up the overlay (the star chart in this case) when ever someone points their mouse cursor at your astro-image. Now, I know zilch about html or JavaScript coding, but with some help from others who do, I was able to figure this out. It's pretty darn simple. If your web page development program does this for you, so much the better. If not, you'll have to add some very simple code to your web page.

Near the top of your html code for the page on which you plan to put your image and overlay, there should be a header section. It begins with "<head>" (without the quotation marks), and ends with "</head>". Just before the ending of the header, type in code that looks something like this:

<!-- Begin
image1 = new Image();
image1.src = "images/NGC_7000_Sky.jpg";
// End -->

The only difference will be the line that starts with "image1.src=" will contain the path and name of the file you are using for your overlay.

Down in the body of your html code, where you want your image and overlay to appear, type in something like the following:

<a href="#null"
onMouseOver="image1.src='images/NGC_7000_Sky.jpg';return false;"
onMouseOut="image1.src='images/NGC_7000_large.jpg';return false;">
<img name="image1" src="images/NGC_7000_large.jpg" border=0 width="800" height="525"></a>

Of course, substitute the path and file names for your astro-image and overlay. In the example above, "NGC_7000_Sky.jpg" is the name of the overlay file, and "NGC_7000_large.jpg" is the name of my astro-image.

Once you have inserted this code, and saved it, your overlay should work! There are many other uses for this feature besides just making star chart overlays. For example, using PhotoShop, you could create specific labels that would only show up when the mouse cursor was over the image. I'm sure there are dozens of other uses for this method.

Here is a link to a site that describes the html part of creating overlays in a little more detail:

Please let me know if you have any comments or suggestions on the methods described in this article:

Thanks and credit to William Mattil for his assistance in developing the proper JavaScript code (as I said I am clueless when it comes to java).

The content in these web pages is copyright 2009 Kevin Wigell. Any reproduction, publication, or transmission of this content without the written consent of the author is prohibited.

Top of page

Return to my home page