Allows to add an image map in a wiki page, using a syntax similar to mediawiki's image map.

Description

This macro will allow you to insert and use an image map in a document.

How to use it

{{imagemap image="Name_of_your_image.extension" width="" height="" alt="Alternative_Description" description="Description" descposition="none" }}
First_Shape|Coordinates|Link|Tooltip
Second_Shape|Coordinates|Link|Tooltip
...
{{/imagemap}}

Information about the parameters

ImageMap

• image: Source Image
• width: Width of Image - fill in systematically this parameter with the width of the image as used for the map coordinates, see note below
• height: Height of Image - fill in systematically this parameter with the height of the image as used for the map coordinates, see note below
• alt: Alternate Text
• description: Description of Image
• descposition: Description Position

Area

• Shape: rect, circle, poly
• Link: Could be fullName (Space.Page) or name to stay in the current space (PageName)
• Tooltip: What is displayed when you hover the shape

Note about image sizes on XWiki's Flamingo skin

Starting at least with the Flamingo skin of XWiki (version 6.x+), all images in wiki pages are displayed with a maximum width of 100% of the available space on the screen. Thus, for all screen sizes (including mobile) for which the image does not fit in the screen, it will be scaled down to the width of the screen and this will cause the map coordinates to be incorrect.

In order to prevent this, systematically fill in the width and the height of your image in the parameters of this macro, even if the image fits properly on your screen. On other people's screens it may end up scaled and links broken. When the size is set, a horizontal scroll will be displayed for these cases but the links on the image will be correct.

Documentation

Please follow the links to understand how an image map works and how to set an area tag.

Example

Code

{{imagemap image="JoshuaReynoldsParty.jpg" width="" height="" alt="Dining room with nine men seated around a table. The dinner has been finished, and a large man at the head talks and gesticulates while the others eagerly listen. The men wear wigs and clothing of late 18th century Britain, and the furniture, hangings, and chandelier are of similar vintage. A liveried servant is entering with a tray bearing two high-shouldered decanters of wine." description="Image map example. Clicking on a person in the picture causes the browser to load the appropriate article." descposition="none" }}
poly|133 343 124 287 159 224 189 228 195 291 222 311 209 343 209 354 243 362 292 466 250 463|Samuel Johnson|Dr Johnson - Dictionary writer
poly|76 224 84 255 43 302 62 400 123 423 121 361 137 344 122 290 111 234 96 225|James Boswell|Boswell - Biographer
poly|190 276 208 240 229 228 247 238 250 258 286 319 282 323 223 323 220 301 200 295|Joshua Reynolds|Sir Joshua Reynolds - Host
poly|308 317 311 270 328 261 316 246 320 228 343 227 357 240 377 274 366 284 352 311 319 324|David Garrick|David Garrick - actor
poly|252 406 313 343 341 343 366 280 383 273 372 251 378 222 409 228 414 280 420 292 390 300 374 360 359 437 306 418 313 391 272 415|Edmund Burke|Edmund Burke - statesman
rect|418 220 452 287|Pasquale Paoli|Pasqual Paoli - Corsican patriot
poly|455 238 484 253 505 303 495 363 501 377 491 443 429 439 423 375 466 352|Charles Burney|Charles Burney - music historian
poly|501 279 546 237 567 239 572 308 560 326 537 316 530 300 502 289|Thomas Warton|Thomas Warton - poet laureate
poly|572 453 591 446 572 373 603 351 562 325 592 288 573 260 573 248 591 243 615 254 637 280 655 334 705 396 656 419 625 382 609 391 613 453|Oliver Goldsmith|Oliver Goldsmith - writer
rect|450 86 584 188|Joshua Reynolds|prob.The Infant Academy 1782
rect|286 87 376 191|Joshua Reynolds|unknown painting
circle|100 141 20|Joshua Reynolds|An unknown portrait
poly|503 192 511 176 532 176 534 200 553 219 554 234 541 236 525 261 506 261 511 220 515 215|Francis Barber|servant - poss. Francis Barber
rect|12 10 702 500|The Club (Literary Club)|Use button to enlarge or use hyperlinks
{{/imagemap}}

Result

Prerequisites & Installation Instructions

We recommend using the Extension Manager to install this extension (Make sure that the text "Installable with the Extension Manager" is displayed at the top right location on this page to know if this extension can be installed with the Extension Manager). Note that installing Extensions when being offline is currently not supported and you'd need to use some complex manual method.

You can also use the following manual method, which is useful if this extension cannot be installed with the Extension Manager or if you're using an old version of XWiki that doesn't have the Extension Manager:

1. Log in the wiki with a user having Administration rights
2. Go to the Administration page and select the Import category
3. Follow the on-screen instructions to upload the downloaded XAR
4. Click on the uploaded XAR and follow the instructions
5. You'll also need to install all dependent Extensions that are not already installed in your wiki

Versions