
VMAX MAGIC WAND


Creating image map

Applet use the same maps as client side HTML image map 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
exception 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 overlapping non
linked 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" 
> 

Exclusion 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 triangle area defined as POLY with javascript
handler on mouse clicks 
<AREA SHAPE=POLY COORDS="20,20,20,40,40,20" 
   HREF="http://vmax.netfx.com" 
   onClick="return confirm('Are you sure you want to leave
this page')" 
> 
  

JavaScript Events handling

Applet as well as AREA tags of image map 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. 
VMaxMagicWand 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. 

Ok now it's time to wrap image map into APPLET tag. 
NEXT PAGE 
  


VMaxMagicWand Applet Tech Notes

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=vmaxmagicwand.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="Please, Register..."> 
<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.  There are only 4 parameters you need to pass to
applet. IMAGE is the image URL and MAP is the name of
image map. Next two parameters are obligatory. Don't alter
or remove AUTHOR parameter. You are welcome to use applet
with KEY  "Free Version". Free Version of applet will add link
back to Virtual_Max's home site. If you want to get rid of
this link you are welcome to register this applet and obtain
encrypted KEY which will remove this link. 

WIDTH and HEIGHT attributes of APPLET tag must match
exactly size of the image you use. 

This applet requires non-interlaced and non-animated 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. 
  
Microsoft Internet Explorer 3 don't support scripting from
applet. Try not to make vitally important links with JavaScript.

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. 

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. 
  

The simplest possible example with a single link

<applet CODE=vmaxmagicwand.class WIDTH=300 HEIGHT=120
MAYSCRIPT> 
  <param NAME="IMAGE"  VALUE="someimage.gif"> 
  <param NAME="MAP"    VALUE="mymap"> 
  <param NAME="AUTHOR" VALUE="Virtual_Max (http://vmax.netfx.com)"> 
  <param NAME="KEY"    VALUE="Please, Register..."> 
  <IMG SRC="someimage.gif" USEMAP=#mymap> 
  <map name="mymap"> 
  <area shape="default" href="somePage.html"> 
</map> 
</applet> 


Special page for ADVANCED USERS ONLY


VMaxMagicWand 
For ADVANCED users ONLY

Just for your curiousity, Below is an example of the applet as
it is on demo page with some insufficient details removed and
some comments added. 
If you are new to JavaScript and DHTML programming, than
this page is NOT for you. Don't bug me with questions, get a
good BOOK and learn! And when you wouldn't find the answer
in books, you are welcome to ask me. 
  

<html>
<head>
<script>

 /* Scrip by Virtual_Max http://vmax.netfx.com
  * This script can be used/modified free
  * Until this note presents unchanged in all copies 
  * and derivatives. 
  */

 

 // this function shows message in right section of the document.
 // Actually as both events mouseExit from one area and mouseEnter
 // to next area can be fired one next to other than we will wait 
 // 300 mSec before doing actual text change. And if new showMess
 // appears while this time we will restart timer with new message.
 var mytimer=null

 function showMess(s)
  {if(mytimer!=null)
     {clearTimeout(mytimer); }
   mytimer=setTimeout("showMess2(\""+s+"\")",300);
  }

 //This function actually set the text in right div.
 //There are two branches for NN and MIE

 function showMess2(s)
   {if(window.document.layers)
      {if(window.document['mess2'].document)
        {d=window.document['mess2'].document 
         d.open();
         d.writeln(""+s);
         d.close();
        }
      }
     if(document.all)
      {document.all.mess.innerHTML=""+s; }
   }

// Those text constans with actual texts are just to make life simple 
defaultmessage="Move mouse over this applet to see it in action and check it's exciting features:<br><br> <li>Standard HTML imagemaps syntax</li><li>Full JavaScript events handling support</li><li>Easy to setup</li><li>Cool visual effect</li>"
docs="Click on this area to read documentation pages."
</script>

</head>
<body onLoad="showMess(defaultmessage)";>

....
<!--This is left div with applet inside-->
<div id="app" 
 style="position:absolute;top:200;left:5;width:120;">
<applet 
   CODE=vmaxmagicwand.class 
   WIDTH=120 HEIGHT=300 
   MAYSCRIPT 
   align=left
   ><param NAME="IMAGE"  VALUE="vmaxmagicwand.jpg"
   ><param NAME="MAP"    VALUE="magicmap"
   ><param NAME="AUTHOR" VALUE="Virtual_Max (http://vmax.netfx.com)"
   ><param NAME="KEY"    VALUE="Please, Register..."
   ><img SRC="vmaxmagicwand.jpg" usemap="#magicmap" 
   ><map name=magicmap
    ><area shape="rect"
      coords="5,85,115,198"
      href="vmaxmagicwanddocs.html"
      onMouseOver="showMess(docs)"
      onMouseOut="showMess('')"
      onClick="window.open('vmaxmagicwanddocs.html','tech','width=500,height=400,scrollbars=yes');return false;"
    ><area shape="rect"
      coords="23,260,100,284"
      href="http://www.geocities.com/SiliconValley/Lakes/8620/license.html"
      onMouseOver="showMess('Download this, and many other applets and scripts from Virtual_Max\'s Cafe')"      
      onMouseOut="showMess('')"
    ><area shape="default" 
      href="http://come.to/vmax"
      onMouseOut="showMess(defaultmessage)"
    ></map
   ></applet>
</div>

<!--This is RIGHT div FOR MIE-->
<div id="mess" 
   style="position:absolute;top:205;left:150; width:300;">
</div>

<!--This is RIGHT LAYER for NN-->
<layer id="mess2" top=205 left=150 width=300 >
</layer>
</body>
</html>

Please, keep in mind that JavaScript calls from applet is quite
CPU time consuming process, running with higher priority than
applet thread run. If you want to have applet running smooth
try to avoid JavaScript handlers use.



  
  