Help Contents

Disappear and Reveal Macros Full Width

Dynamic Image Map and Hot Spots

Displays a clickable map for an image provided by regular page attachments.

The Dynamic Image Map macro works in tandem with the Dynamic Map Hot Spot macro to create visually dynamic mouse-over hot spots. The Dynamic Map Hot Spot macro provides mouse-over image changes for hot spots within a Dynamic Image Map. Instances of this macro should be nested within an instance of Dynamic Image Map Macro.

Wiki Markup

{dynamic-image-map:world.png}

{dynamic-area:n-america-hover.png|shape=rect|coords=23,10,277,158|link=North America}

{dynamic-area:south-america-hover.png|shape=rect|coords=117,197,276,371|link=South America}

{dynamic-area:europe-hover.png|shape=rect|coords=322,29,405,123|link=Europe}

{dynamic-area:middle-east-hover.png|shape=rect|coords=418,108,512,182|link=Middle East}

{dynamic-area:africa-hover.png|shape=rect|coords=288,132,450,323|link=Africa}

{dynamic-area:asia-hover.png|shape=rect|coords=426,11,639,122|link=Asia}

{dynamic-area:oceania-hover.png|shape=rect|coords=572,227,731,353|link=Oceania}

{dynamic-area:central-america-hover.png|shape=rect|coords=139,161,251,193|link=Central America and Caribbean}

{dynamic-image-map}

Dynamic Map Parameters

Terms in bold are required

Name

Wiki Markup

Default

Description

Image File

(unnamed initial parameter - see example markup above)

 

The complete image attachment name for the map image. (Ex: full-map.png)

Alignment

align=

plain

Controls alignment of the image in the wiki markup. Plain will flow with your text. Left, Center, and Right will cause text to flow around the image.

Width

width=

 

The width of the image in pixels.

Height

height=

 

The width of the image in pixels.

Hot Spot Parameters

Terms in bold are required

Name

Wiki Markup

Default

Description

Hot Spot Image File

(unnamed initial parameter - see example markup above)

 

The complete image attachment name for the hot spot image.

Page Link

link=

 

A link to some content in the wiki. Use the square brackets. (Ex: for a page: [zen:Outstanding Flexibility]) When the user clicks the image, they will be taken to there.

Hot Spot Shape

shape=

 

Acceptable values are the same as for an HTML area tag: default, rect, circle, poly.

Hot Spot Coordinates

coords=

 

As with an HTML area tag, coordinates are expressed as pairs of integers, representing the x and Y coords of the beginning of the area, and then width and height coordinates as needed to define the shape; for example, a rect (rectangular) area coords could be defined in pixels as: 0,0,82,126 (left, top, right, bottom).

Title

title=

 

TAn optional title, displayed by most browsers as mouse-over tooltip text.