VMaxPoolMap Applet

Unique feature!Good Choice!
 

 

Creating image map

Applet use the same maps as client-side HTML imagemap is. An image map is a graphic that can be divided into multiple areas, and each area of the map can point to a different URL. For client-side image maps, the mapping information is contained in a MAP tag in the HTML file that contains the IMG tag. The MAP tag contains one or more AREA tags. Each AREA tag describes a different area in the image and specifies the URL to which it connects. If the user clicks a point located in multiple overlapping areas, the area that is defined first in the MAP tag responds to the click.

To define a client-side image map, use the IMG tag to specify the image and supply a value for its USEMAP attribute. The value of the USEMAP attribute must be the pound (#) sign, followed by the name of the MAP tag that contains the mapping information, for example,"#firstmap".
 

Generally client-side imagemap has the following  structure:

<IMG SRC="yourimage.gif" USEMAP=#mapName>
<MAP NAME="mapName">
  <AREA ...>
  ...more areas here...
  <AREA ...>
</MAP>
 

Defining AREAs

The AREA tag describes an individual area in an image map. An image map can contain multiple
clickable areas, and each area can have a separate destination URL associated with it

Area tag attributes:

<AREA
  COORDS="coords"
  SHAPE="shape"
  HREF="location"
  NOHREF
  TARGET="windowName"
  ONMOUSEOUT="outJScode"
  ONMOUSEOVER="overJScode"
  NAME="areaName"
  ALT="Some Text"
>

The COORDS is the only required attribute for any shape with excemption of shape DEFAULT.
Either the HREF or the NOHREF attribute must be supplied.

COORDS="coordsList"
specifies the comma separated list of the coordinates of the area  measured from the upper left corner of the image. See description of the SHAPE attribute for details of the format of the COORDS values.

SHAPE="shape"
specifies the shape of the map. If the SHAPE attribute is not specified, the shape is assumed to be a rectangle. Each shape has its own form of the COORDS attribute. For CIRCLE the value of the COORDS must have the form "x,y,r" where x and y are the coordinates of the center of the circle, and r is the radius. In case of RECT the value of the COORDS must have the form "x1,y1,x2,y2" where x1 and y1 are the coordinates of the left-top corner, and x2,y2 are the coordinates of the right-bottom corner of rectangle. POLY or POLYGON specifies a polygon, the value of COORDS must have the form "x1,y1,x2,y2,...xn,yn".  DEFAULT don't require COORDS attribute at all, area with this shape must be specified last.

HREF="location"
specifies the URL to invoke when a user clicks the area.

NOHREF
specifies that no URL is invoked when a user clicks the area. (Useful to create 'exclusions' in areas by overlaping nonlinked region)

TARGET="windowName"
specifies the frame or window into which the destination document is loaded, if the value of HREF is a URL that points to a document. One can use here frame names as they are defines with NAME attribute of FRAME tag in FRAMESET, or window names if named window was opened with JavaScript open(...) method, or one of the special meaning predefined names:
_top, _parent, _self or _blank

ONMOUSEOUT="outJScode"
specifies a JavaScript event handler to execute when a user moves the mouse cursor out  of the image or link text.
For information about JavaScript see any JavaScript tutorial.

ONMOUSEOVER="overJScode"
specifies a JavaScript event handler to execute when a user moves the mouse cursor over the image or link text.

ONCLICK="overJScode"
specifies a JavaScript event handler to execute before opening of area associated  url defined with HREF attribute.

ALT="some alternative text"
for browsers with graphics switched off.

Some examples:
Circle area with center at x=50,y=60 and radius 25
<AREA SHAPE=CIRCLE COORDS="50,60,25"
      HREF="http://www.geocities.com/SiliconValley/Lakes/8620"
      ALT="This is circle area"
>

Excluision example: inner rectangle with NOHREF responds to user actions and don't pass it to outer rectangle defined next.
<AREA SHAPE=RECT COORDS="50,50,60,60"  NOHREF>
<AREA SHAPE=RECT COORDS="40,40,70,70"  HREF="http://come.to/vmax">

Example of trinagle area defined as POLY with javascript handler on mouse clicks
<AREA SHAPE=POLY COORDS="20,20,20,40,40,20"
   HREF="http://come.to/vmax"
   onClick="return confirm('Are you sure you want to leave this page')"
>
 

JavaScript Events handling

Applet as well as AREA tags of imagemap support 3 basic events: onMouseOver, onMouseOut and onClick  to bring more life to pages. Event handler for onClick event can return boolean true or false value to continue or cancel executing further link processing.
VMaxPoolMenu Applet as well as normal AREA tag supports also JavaScript links ( HREF="Javascript:someJScodeHere").
For more information about JavaScript and JavaScript events see any JavaScript tutorial or references.
 

Embedding into HTML

Supposing you was able to create and test your client-side imagemap. Let's get the following one as example:

<IMG SRC="myimage.gif" USEMAP=#mymap>
<map name="mymap">
   <area shape="rect" coords="10,10,100,20" href="page1.html">
   <area shape="rect" coords="10,30,100,40" href="page2.html">
</map>

Than you only need to wrap it inside the applet tag and supply applet with MAP and IMAGE parameters

<applet CODE=vmaxpoolmap.class WIDTH=300 HEIGHT=120 MAYSCRIPT>
  <param NAME="IMAGE"  VALUE="myimage.gif">
  <param NAME="MAP"    VALUE="mymap">
  <param NAME="AUTHOR" VALUE="Virtual_Max (http://come.to/vmax)">
  <param NAME="KEY"    VALUE="Free Version">
 

    <IMG SRC="myimage.gif" USEMAP=#mymap>
    <map name="mymap">
      <area shape="rect" coords="10,10,100,20" href="page1.html">
      <area shape="rect" coords="10,30,100,40" href="page2.html">
    </map>
 

</applet>

Fine that the same code is used for non-java browsers which will just ignore <applet..> and <param ..> tags and will show imagemap, and for applet which will parse the entire HTML page code to get map from page by name passed with MAP parameter.
 

Some things you need to keep in mind.

1. As applet can't connect to server other than one it was loaded itself than image MUST be on the same server.
It's more safe to use relative form of URL in IMAGE param than to use full form of URL here.
2. This applet requires non-interlaced and non-unimated image in GIF or JPG formats. Note also that if you are creating JPG image with Photoshop5.0 don't forget to check "Exclude Non-Image Data" checkbox in Save dialog window, and when you will be prompted to select compression method, use "Baseline standard". Saved with this options image will work with all browsers.
3. Best wave effect can be achieved with images which details have average size about 20 pixels at any place of the image.
Keep in mind that on solid background wave wouldn't be visible at all.
3. Microsoft Internet Explorer 3 don't support scripting from applet. Try not to make vitally important links with JavaScript.
4. This applet is highly CPU time consuming especially with old browsers (Java1.0.x). It's appetites is proportional to image width multiplied to image height. Don't try to use images larger than 300 x 200 pixels. Even if it's running OK on your
Pentium III, 500MHz computer, someone still can come to your page with something like 486DX2/66...
 

FOR ADVANCED USERS ONLY !

Below is example as it is at the top of this page

This script is defined between <head> and </head> tags to dynamically show messages under applet from Event handlers in areas. Again this requires 2 branches for 2 browser.... 

<script>
 /* Script by Virtual_Max http://come.to/vmax
  * Script or any parts of it can be 
  * used modified free without special permission
  * until this note present unchanged in all it's 
  * copies and derivatives.
  */
 function showMess(s)
   {if(document.layers)
      {if(document['mess2'].document)
        {d=document['mess2'].document; 
         d.open();
         d.writeln(" "+s);
         d.close();
        }
      }
     if(document.all)
      {document.all.mess.innerHTML=" "+s;
      }
   }
</script>
Well, well, well... Than goes a little bit wired code of the applet with image and map nested inside, you can place it anywhere inside body of the HTML document 
<applet CODE=vmaxpoolmap.class WIDTH=300 HEIGHT=120 MAYSCRIPT>
 <param NAME="IMAGE"  VALUE="vmaxpoolmap.jpg">
 <param  NAME="MAP"    VALUE="poolmap">
 <param  NAME="AUTHOR" VALUE="Virtual_Max (http://come.to/vmax)">
 <param  NAME="KEY"    VALUE="Free Version">

 <img SRC="vmaxpoolmap.jpg" usemap="#poolmap" >
 <map name=poolmap>

   <area shape="RECT" coords="134,34,248,48"  
      HREF="#map"  
      onClick="window.location='#map'; return false;"
      onMouseOver="showMess('Learn how to create imagemaps or how to use VMaxPoolMap applet with maps you already have')"
      onMouseOut="showMess('')"
   >

   <area shape="rect" COORDS="134,49,224,62"  
      HREF="#area" 
      onClick="Javascript:window.location='#area'; return false;"
      onMouseOver="showMess('All about AREA tag attributes of imagemaps, this applet support them all ')"
      onMouseOut="showMess('')"
   >

   <area shape="rect" coords="134,63,267,78"  
      href="#js"   
      onClick="javscript:window.location='#js'; return false;"
      onMouseOver="showMess(' <FONT COLOR=#CC0000><b>Unique</b> feature of this APPLET</FONT> Support for JavaScript event handlers.')"
      onMouseOut="showMess('')"
      ALT="Unique feature!"
   >

   <area SHAPE="rect" coords="134,79,251,91"  
      href="#html" 
      onClick="JAVASCRIPT:window.location='#html'; return false;"
      onMouseOver="showMess('<FONT COLOR=#000040>You will be surprized how easy it is!</FONT> ')"
      onMouseOut="showMess('')"
   >

   <AREA shape="rect" coords="133,96,176,107" 
      HREF="javascript:history.go(-1)"
      onClick="return confirm('Are you sure you want to leave this page?');"
      onMouseOver="showMess('<FONT COLOR=#008000><b>See you later...</b></FONT>')"
      onMouseOut="showMess('')"
   >

   <area shape="rect" coords="179,96,223,107" 
      HREF="http://come.to/vmax"
      onMouseOver="showMess('<FONT COLOR=#800000><b>Get more Applets, Scripts and Tips from Virtual_Max\'s Cafe</b></font>')"
      onMouseOut="showMess('')"
   >

   <area shape="rect" coords="227,96,279,107" 
      HREF="http://www.geocities.com/SiliconValley/Lakes/8620/license.html"
      ALT="Good Choice!"
      onMouseOver="showMess('<FONT COLOR=#cc0000><b>Don\'t forget to register!</b></font>')"
      onMouseOut="showMess('')"
   >

   <area shape="default" 
      href="http://come.to/vmax"
   >

</map>
</applet>
Last thing below is DIV with nested LAYER combination to make it work in both browsers, place it inside your document where you want to have messages to appear. You are free of course to alter it's positioning and sizes.

<div id="mess" style="height:80;">
<layer id="mess2" height=80>
</layer>
</div>

Copyright 1999, Virtual_Max.