The Spanish Tutorial Info-graphic

Move the mouse cursor over the words for a clue, then click for the answer.

Sorry, you need Java support to view this applet.

The Spanish Tutorial Info-graphic Revealed

This example is the easiest form of ActiveMap. Three same-size images are positioned precisely on top of each other. Rectangular sections of the different images are displayed based on whether the mouse cursor moves over them or is clicked within them. To create this ActiveMap, we followed these 3 simple steps:

Step 1: Design the images.

The first image is the "background" or default image that the user sees when the mouse cursor is not over an active link in the applet. In this case the words are in Spanish. The second image, considered the "active" image shows corresponding pictures for each word. The pictures are displayed over the Spanish words when the mouse cursor moves over them. The third image, the "on" image, shows the words in English. These words are displayed when the user clicks on the picture. To ensure a smooth transition from background to active to on image, it is important to remember that they all need to be the same size and need to line up with each other.

Here are the images we created:

background

active_image

on_image

Step 2: Create the links.

Since there are 4 sections that we want to make active, we need 4 link areas. It is the same process used to create regular imagemaps and there are dozens of programs that let you layout rectangular areas on an image and determine the x,y coordinates. We get 4 coordinates per link - (x,y,x,y) - which refer to the upper-lefthand and lower-righthand corners of each link. We enter these values in the third and final step.

Step 3: Create the HTML.

This is the HTML code that ties the applet, the images, and the coordinates together. The most important tag is the applet tag, where we specify the location (codebase) of the ActiveMap.class file, the name (code) of the ActiveMap.class file and the width and height of the applet, which, in this case, is the same as the size of our background image. Finally, we also need a closing applet tag. Within the beginning and ending applet tags, we have several param tags. The first param specifies the ActiveMap style that we've chosen - in this case it's "exclusive" meaning that only one link at a time can be active or on. The next three params specify the three images we created in Step 1. Finally, the link params contain the x,y coordinates from Step 2.

Here's the HTML code:

<applet codebase="classes/" code="ActiveMap.class" height=66 width=258>

<param name=style value="exclusive">
<param name=background value="images/spanish.gif">
<param name=active_image value="images/pictures.gif">
<param name=on_image value="images/english.gif">

<param name=link1 value="0,0,65,66">
<param name=link2 value="66,0,128,66">
<param name=link3 value="129,0,192,66">
<param name=link4 value="193,0,258,66">

</applet>

Copyright ©1997 SenseNet Incorporated.
Send comments and questions to software@sensenet.com.

SenseNet, ActiveMap, SenseNet Software, the SenseNet logo and the SenseNet Software logo are registered trademarks of SenseNet, Inc. All other trademarks are the property of their respective owners.