POPUPs are 2D images or text that you can assign to specific locations in your map. They are not visible to the visitor at first, but "pop up" on the screen when the visitor gets within a defined radius of the location that holds the POPUP, or when she rolls her mouse over a block that holds the POPUP. POPUPs are very useful for including extra information that you want a visitor to be able to see, without cluttering up your SPOT. They are great for providing detailed info about many objects in the spot. They also can be used to provide a simple navigational map of your spot that is visible right at the entrance. Heck, you can even use them to hurl random insults at your visitors. We don't care what you do with them. (Though we'd prefer you not use them to hurl random insults at Flatland.)

The <POPUP> tag, like the <ENTRANCE> and <EXIT> tags, can go anywhere in the BODY. We usually place them at the end of the BODY, after all of the levels have been defined. But you can put them after the level in which they occur if you prefer. POPUPs can also be attached to blocks by putting the <POPUP> tag inside a <CREATE> tag. POPUPs can contain either textures, text, or imagemaps.

POPUP Textures
Lets start by just looking at a simple <POPUP> tag:

<POPUP LOCATION="(column,row,level)" TRIGGER="rollover,proximity|everywhere" RADIUS="blocks" TEXTURE="folder/image.gif" PLACEMENT="mouse|top-left|top|top-right|left|center|right|bottom-left|bottom|bottom-right" BRIGHTNESS="number%" />

LOCATION describes where in the map the POPUP is anchored. If the POPUP is attached to a block in a CREATE tag, then the LOCATION parameter is not needed. If the POPUP is not attached to a block, and the LOCATION parameter is left out, then the POPUP will be displayed throughout the entire spot.

TRIGGER is how the POPUP gets activated, either by rolling over it with the mouse, or by coming within the specified radius, or both. Or, if TRIGGER="everywhere", then the POPUP will appear throughout the entire spot.

RADIUS is how close the user has to be to the LOCATION to trigger the POPUP (when TRIGGER is set to "proximity"). RADIUS is described as a whole number of blocks. Unlike LIGHTs and SOUNDs, the RADIUS for POPUPs only functions on one level. i.e. a POPUP on level 4 with a RADIUS of 2 will not be visible on levels 3 or 5.

TEXTURE of course defines the file that will pop up.

PLACEMENT describes where on the user's screen the image will appear.

BRIGHTNESS defines how bright the POPUP will appear.When PLACEMENT="mouse", the popup will appear in the same location as the user's cursor.

POPUP Text
You can also put text in POPUPs by adding the following attributes to the <POPUP> tag:

TEXT="message"
TEXTALIGN="top-left|top|top-right|left|center|right|bottom-left|bottom|bottom-right"
TEXTCOLOR="(r,g,b)"

TEXTALIGN defines how your text will appear in relationship to the POPUP texture.

TEXTCOLOR is the color of the text.

You can also assign a color to the POPUP itself, rather than a texture. To do so, you will need these two additional tags:

COLOR="(r,g,b)"
SIZE="(width,height)"

SIZE defines the size of the rectangle of color on which your text will appear, measured in pixels. If you place text over an image, then the COLOR attribute will be used to define a color for a drop shadow on the text, making it easier to read against the background image. If no COLOR is defined, then the background of the POPUP will be transparent by default.

POPUP Imagemaps
POPUPs can also contain clickable imagemaps. The syntax for creating an imagemap is almost exactly the same as it is in HTML, except that the tag is called "IMAGEMAP" rather than "MAP", and 3DML supports rectangle and circle shapes in the imagemap, but not polygons. To create an imagemap, put the following code somewhere in the BODY section of your 3DML file:

<IMAGEMAP NAME="imagemap name">
<AREA SHAPE="rect|circle" COORDS="x1,y1,x2,y2 | x,y,radius"
HREF="destination URL" TARGET="destination target" TEXT="display text" />
...
</IMAGEMAP>

When creating a rectangular area of an imagemap, the coordinates x1,y1 refer to the top left corner of the rectangle, and x2y2 refer to the bottom right corner. When creating a circular area of an imagemap, x,y refers to the center of the circle.

In order to use an imagemap in your POPUP, add the following parameter to the POPUP tag:

IMAGEMAP="imagemap name"

Note: If you are using an IMAGEMAP with your POPUP, and you have TRIGGER set to "rollover", then your PLACEMENT will have to be "mouse". Otherwise, the POPUP will disappear before your visitor can select anything!

So the entire <POPUP> tag, with all the possible attributes looks like this:
<POPUP LOCATION="(column,row,level)"
  TRIGGER="rollover,proximity|everywhere"
  RADIUS="number-of-blocks"
  TEXTURE="image-file-path-or-URL"
  COLOR="(r,g,b)"
  PLACEMENT="mouse|top-left|top|top-right|left|center|right|bottom-left|bottom|bottom-right"
  SIZE="(width, height)"
  TEXT="message"
  TEXTALIGN="top-left|top|top-right|left|center|right|bottom-left|bottom|bottom-right"
  TEXTCOLOR="(r,g,b)"
  IMAGEMAP="map name"
  BRIGHTNESS="brightness%" />

Default values are as follows:
TRIGGER="proximity"
PLACEMENT="center"
COLOR= transparent
TEXTCOLOR="(255,255,255)"
SIZE="(320,240)"
TEXTALIGN="center"
BRIGHTNESS="100%"

Add some POPUPs to your TALL spot.
Add these <POPUP> tags after your <ENTRANCE> and <EXIT> tags:

<POPUP LOCATION="(3,3,3)" RADIUS="2" TEXT="What's so funny?"
  COLOR="(0,255,0)" SIZE="(100,60)" TEXTCOLOR="(255,0,0)"
  PLACEMENT="top" />

<POPUP LOCATION="(3,7,3)" RADIUS="2" TEXT="Beats me man!"
  COLOR="(0,0,255)" SIZE="(100,60)" TEXTCOLOR="(255,0,0)"
  PLACEMENT="bottom" />

Save your file and open it in your browser. Move around on the roof and take a look at how the POPUPs work.

Save your file and open it in your browser. Move around on the roof and take a look at how the POPUPs work.