
VMAX POOL MAP

Creating an image map

Applet use IS 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 dosen'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://vmax.netfx.com" 
      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://vmax.netfx.com"> 

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 ware able to create and test your client-side imagemap. Let's 
get the following one as an 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://vmax.netfx.com)"> 
  <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> 

Is is 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 the applet can't connect to server other than the 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 are 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 won't be visible at all. 

3. Microsoft Internet Explorer 3 dosen'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://vmax.netfx.com
  * 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://vmax.netfx.com)">
 <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> 


