Modern Java
http://www.modernminds.com
A nimated Map Demo

 Since it's quite easy to create simple image maps using WildView, we thought we provide you with a image map demonstration that is a bit more sophisticated.

The image map below has five "hot spots" that link to (simulated) topic pages. When the mouse is moved within one of the "hot spot" areas, the image associated with the area will be animated and the title at the top of the image map will change to the topic title. When the mouse is clicked in a "hot spot" area, then the page associated with the area will be loaded in a separate browser window.
A pplet Tag

 The applet tag for the Animated Map applet is shown below.
<APPLET CODEBASE="../../Java"
  WIDTH="170" HEIGHT="280"
  CODE="WildViewApplet.class">
<PARAM NAME="color" VALUE="000000">
<PARAM NAME="background"
  VALUE="DocExamples/AnimatedMap/SpaceBase.JPG">
<PARAM NAME="backgroundX" VALUE="0">
<PARAM NAME="backgroundY" VALUE="96">
<PARAM NAME="panelSet1"
  VALUE="DocExamples/AnimatedMap/AnimatedMap.TXT">
</APPLET>

Note that the background image occupies only the lower portion of the applet display area. The background color is set to black in order to fill in the top portion of the background and to make it appear as if the image is larger than it is in reality. This trick can be used to minimize the size of the background image and thus improve the applet's initialization time.
P anel Set File

The panel set file used by the Animated Map applet is shown below.
<!-- IMAGE panels for each map region>

<PANEL name=Earth module="WVPanelImage"
  x=2 y=80 w=39 h=42
  image="DocExamples/AnimatedMap/Animation.JPG"
  displayX=0 displayY=0
  displayW=39 displayH=42>

<PANEL name=Saucer module="WVPanelImage"
  image=Earth x=44 y=60 w=92 h=37
  displayX=78 displayY=37
  displayW=92 displayH=37>

<PANEL name=Moon module="WVPanelImage"
  image=Earth x=129 y=30 w=39 h=39
  displayX=39 displayY=0
  displayW=39 displayH=39>

<PANEL name=Man module="WVPanelImage"
  image=Earth x=98 y=136 w=39 h=39
  displayX=209 displayY=0
  displayW=39 displayH=41>

<PANEL name=Dog module="WVPanelImage"
  image=Earth x=125 y=235 w=39 h=43
  displayX=170 displayY=0
  displayW=39 displayH=43>

<!-- TEXT panel for title and descriptions>

<PANEL name=Text module="WVPanelText"
  x=0 y=0 w=170 h=30 fontSize=18
  fontColor=ffffff font="Helvetica"
  style=bold justify=center>
Space Frontiers

<!-- ANIMATION panels for each map region>

<PANEL name=EarthAnim module="WVPanelTimer"
  x=2 y=80 w=39 h=42
  activate=mouseEnter deactivate=mouseExit>
<TRIGGER panel=Earth displayY=42>
<WAIT timeout=2>
<TRIGGER panel=Earth displayY=84>
<WAIT timeout=2>
<TRIGGER panel=Earth displayY=126>
<WAIT timeout=2>
<TRIGGER panel=Earth displayY=0>
<WAIT timeout=2>

<PANEL name=SaucerAnim module="WVPanelTimer"
  x=44 y=60 w=85 h=37
  activate=mouseEnter deactivate=mouseExit>
<TRIGGER panel=Saucer displayY=74>
<WAIT timeout=2>
<TRIGGER panel=Saucer displayY=111>
<WAIT timeout=2>
<TRIGGER panel=Saucer displayY=0>
<WAIT timeout=2>
<TRIGGER panel=Saucer displayY=37>
<WAIT timeout=2>

<PANEL name=MoonAnim module="WVPanelTimer"
  x=129 y=30 w=39 h=39
  activate=mouseEnter deactivate=mouseExit>
<TRIGGER panel=Moon displayY=39>
<WAIT timeout=2>
<TRIGGER panel=Moon displayY=78>
<WAIT timeout=2>
<TRIGGER panel=Moon displayY=117>
<WAIT timeout=2>
<TRIGGER panel=Moon displayY=0>
<WAIT timeout=2>

<PANEL name=ManAnim module="WVPanelTimer"
  x=20 y=130 w=240 h=100
  activate=mouseEnter deactivate=mouseExit>
<TRIGGER panel=Man displayY=41>
<WAIT timeout=2>
<TRIGGER panel=Man displayY=0>
<WAIT timeout=2>

<PANEL name=DogAnim module="WVPanelTimer"
  x=125 y=235 w=39 h=43
  activate=mouseEnter deactivate=mouseExit>
<TRIGGER panel=Dog displayY=43>
<WAIT timeout=2>
<TRIGGER panel=Dog displayY=0>
<WAIT timeout=2>

<!-- CONTROL panels for each map region>

<PANEL name=EarthCtl module="WVPanelTrigger"
  x=2 y=80 w=39 h=42>
<TRIGGER event=mouseExit
  panel=Earth displayY=0>
<TRIGGER event=mouseEnter
  panel=URL enable=true target=Space
  url="../Examples/AnimatedMap/Earth.html">
<TRIGGER event=mouseEnter
  panel=Text text="Earth from Space"
  fontColor=ffff00 fontSize=14
  fontStyle=bold+italic align=middle>

<PANEL name=SaucerCtl module="WVPanelTrigger"
  x=44 y=60 w=85 h=37>
<TRIGGER event=mouseExit
  panel=Saucer displayY=37>
<TRIGGER event=mouseEnter
  panel=URL enable=true target=Space
  url="../Examples/AnimatedMap/Life.html">
<TRIGGER event=mouseEnter
  panel=Text text="The Search for Life"
  fontColor=ffff00 fontSize=14
  fontStyle=bold+italic align=middle>

<PANEL name=MoonCtl module="WVPanelTrigger"
  x=129 y=30 w=39 h=39>
<TRIGGER event=mouseExit
  panel=Moon displayY=0>
<TRIGGER event=mouseEnter
  panel=URL enable=true target=Space
  url="../Examples/AnimatedMap/Moon.html">
<TRIGGER event=mouseEnter
  panel=Text text="Moon Missions"
  fontColor=ffff00 fontSize=14
  fontStyle=bold+italic align=middle>

<PANEL name=ManCtl module="WVPanelTrigger"
  x=20 y=130 w=240 h=100>
<TRIGGER event=mouseExit
  panel=Man displayY=0>
<TRIGGER event=mouseEnter
  panel=URL enable=true target=Space
  url="../Examples/AnimatedMap/Man.html">
<TRIGGER event=mouseEnter
  panel=Text text="Man in Space"
  fontColor=ffff00 fontSize=14
  fontStyle=bold+italic align=middle>

<PANEL name=DogCtl module="WVPanelTrigger"
  x=125 y=235 w=39 h=43>
<TRIGGER event=mouseExit
  panel=Dog displayY=0>
<TRIGGER event=mouseEnter
  panel=URL enable=true target=Space
  url="../Examples/AnimatedMap/Animals.html">
<TRIGGER event=mouseEnter
  panel=Text text="Animals in Space"
  fontColor=ffff00 fontSize=14
  fontStyle=bold+italic align=middle>

<!-- RESET panel used when mouse moves out of map area>

<PANEL name=Reset module="WVPanelTrigger"
  x=0 y=30 w=170 h=250>
<TRIGGER event=mouseExit
  panel=URL enable=false>
<TRIGGER event=mouseExit
  panel=Text text="Space Frontiers"
  fontColor=ffffff fontSize=18
  style=bold align=top>

<!-- URL panel for map area>

<PANEL name=URL module="WVPanelURL"
  x=0 y=30 w=170 h=250 enable=false>

Notice that while there are five WVPanelImage panels, only the Earth panel specifies an actual file for the image attribute. Saucer, Moon, Man, and Dog all specify Earth as the image attribute. This means that all five image panels will share the same image file instead of loading a separate image file for each WVPanelImage panel (thus reducing the load and initialization time).

This trick will work only if the WVPanelImage panel tag that specifies the actual image file is positioned in the panel set file before the WVPanelImage panel tags that reference the image.

Keep in mind that images are usually loaded from top to bottom. In this example, the initial image to be displayed for each of the WVPanelImage panels is positioned at the top of the actual composite graphic image (see illustration below). This allows the initial display to be completely drawn as quickly as possible.
I mage Files

The image files used by the Animated Map applet are shown below.

SpaceBase.JPG

Animation.JPG
Copyright © 1997 by Modern Minds, Inc.