JDScrollingImagemap Java Applet

Now with support for frames


   The "Scrolling Image Map Applet" allows you to use very large image maps that are viewed through a narrow window in the HTML page. The large image map is scrolled by dragging a zooming rectangle across a minature version of the full image. You can defined rectangular areas inside the large image, that when clicked on will cause a particular hyper-text link to load. Look at my National Park Photo Page to see the applet in action. The applet can now also be used to control what other frames on the page are displaying. Look at this example to see this in action.
   In order to use this Applet on your own page you need to copy the 3 class files JDScrollingImagemap.class ,  JDImagemapRect.class,  JDScrollBox.class,  to a directory on your Web server (as binary files). You can also get them zipped up as one zip file. If your not worried about compatability with older browsers you can use the JDScrollingImagemap.jar file. You then need to prepare your large image map and a minature version of it. There are many popular image editing programs that will shrink down images.

Then put this HTML code in your page. 
<APPLET CODE="JDScrollingImagemap.class" 
ARCHIVE="JDScrollingImagemap.jar" WIDTH=522 HEIGHT=266>
<param name="scrollBoxColor" value="FFFF00">
<param name="borderColor" value="000000">
<param name="imagemap_file_name" value="image_map.gif">
<param name="index_file_name" 
value="shrunken_image_map.gif">
<param name="scale" value="4">
<param name="defaultIndexPos" value="center">
<param name="imagemap_data" value="
  10, 100, 20, 110, abc.html;
  20, 100, 30, 110, http://www.somplace.com/xyz.html;
  30, 100, 40, 120, def.html, frame1;
   1, 1, 2048, 1024, miss.html;
">
</APPLET>
The "<param name=" tags pass parameters to the applet that control its behavior.

Explanation of each Applet parameter

parameter Explanation
scrollBoxColor    The "scrollBoxColor" parameter defines what color the border around the imagemap should be . The colors are specifed using the same notation as the HTML BODY tag.
borderColor    The "borderColor" parameter defines what color the zooming rectangle should be. The colors are specifed using the same notation as the HTML BODY tag.
imagemap_file_name    The "imagemap_file_name" is the name of large your gif or jpeg- that will be a imagemap with links for the user to click on.
index_file_name    The "index_file_name" parameter is the name of the minature version of the image map picture.
scale    The "scale" is how much of the full image map we want to appear in the window on our HTML page at once. For instance on my National Parks page I have a 2048x1024 gif as my image map. The scale is set to 4- meaning that the window dimensions will be 1/4 of the image map dimensions, or 512x256.
defaultIndexPos    The "defaultIndexPos" is where the zooming rectangle starts in the index image. Leave this parameter off and it defaults to the upper left hand corner. Or you can specify "center" and the zooming rectangle will be centered over the small index image. You can also provide an X, and Y starting position by giving two numbers separated by a comma- as follows: "10,10"
image_map_data    The "image_map_data" parameter defines the rectangle on the imagemap that link to URL's. Only rectangles are supported- no circles.
   The format is one rectangle per line, with each field seprated by commas and each line ended with a ";". The first two numbers are the X, and Y of upper left hand corner of the rectangle, followed by the X, and Y of the lower right corner of the rectangle. The last required field is the URL to jump to if a click is made inside that rectangle. The URL is relative to the directory where the Applet is, not to the directory of the HTML page with the applet on it. You can also give full URLS' that start with "http://" to link to anywhere.
   An optional sixth paramer on each line can give the name of the Frame on the page that will change to display the link. If this paramter is left off the current frame/window will change to display the link. You can also specify "_blank" here, which will cause a new browser window instance to start up and display the URL.

Line by line explanation of the example: 
<param name="imagemap_data" value="
  10, 100, 20, 110, abc.html;
  20, 100, 30, 110, http://www.somplace.com/xyz.html;
  30, 100, 40, 120, def.html, frame1;
   1, 1, 2048, 1024, miss.html;

   This first line  10, 100, 20, 120, abc.html; specifies that we want the current browser window to change to the html file "abc.html", when the user clicks falls with a rectangle that starts at X 20, Y 100, and ends at x 30, and Y 110. The URL is expected to be in the same directory as the applet, it can also be a sub directory if you specify a path. For Instance; "/subdir/abc.html".

   This next line  20, 100, 30, 120, abc.html; gives a full URL including "http://". This can be on any valid URL anywhere.

   The next line  30, 100, 40, 120, def.html, fra me1; is the same as the above except that it specifies that the named frame "frame1" will be jumped to the URL given. In this way the applet can cause other frames on the page to change what they display. Instead of giving the frame name you can also specify "_parent", "_top", and "_blank". "_blank" will cause a second browser instance to open up and display that html file. Look at this example to see this in action.

   The final line  1, 1, 2048, 1024, miss.html; is the default URL for missed clicks. This last imagemap rectangle will only be reached if the click was not inside any of the above rectangles. It covers the entire image and gives a default URL for bad clicks.


Heres is the Source Code for this applet:

JDScrollingImagemap.java,
JDImagemapRect.java,
JDScrollBox.java,

Sites using this applet


AAO HDF-South Redshift Survey
Shipyard International
Terrain Sciences Division
The Fraser River Delta
AirSho Navmap SE Michigan
Living in the shadow of volcanoes

Back to Java Page

Back to John Donohues's Homepage
Questions or Comments to:  
Last Updated 1/15/99