SNTT – Usemap & XPages


I thought I write this one down. A developer asked me how to make a form more user-friendly. Basically a user reports via the form a problem somewhere in the building to the central desk and they send a mechanic. To have a more precise allocation of the problem, a room number is required to fill in.

I suggested to use an image map. There are sites around that help you define the correct coordinates.


In DDE add an image as a resource. Drag that same image into your XPage. In the Properties panel find under All Properties \ Basics the usemap property. Include here the name of your image map. This is the one you have set on your map object.


In the map object you can include in the HREF attribute an URL or JavaScript. With Dojo you can establish some nice interaction with input fields on your XPage.

<?xml version=”1.0″ encoding=”UTF-8″?>
<xp:view xmlns:xp=”; dojoParseOnLoad=”true”
<xp:image url=”/bambi.jpg” id=”image1″ usemap=”imap_bambi”></xp:image>

<map id=”imap_bambi” name=”imap_bambi”>
<area shape=”rect” coords=”11,1,160,132″ alt=”daddy”
title=”daddy” href=”; />
<area shape=”rect” coords=”171,20,279,108″ alt=”mommy”
title=”mommy” href=”; />
<area shape=”rect” coords=”131,145,239,233″ alt=”bambi”
title=”bambi” href=”javascript:alert(‘hi there’)” />
<area shape=”rect” coords=”279,12,387,100″ alt=”butterfly”
href=”javascript:dojo.byId(‘#{id:inputText1}’).value = ‘found it'” />
<xp:inputText id=”inputText1″></xp:inputText>


ismap property

What I do not understand is what the ismap property is capable of. Documentation is hard to find. Maybe you know an example?


4 thoughts on “SNTT – Usemap & XPages

    • Patrick Kwinten 2012-December-6 / 12:36 pm

      that’s funny. I read: we recommend to forget about server-side maps and use client side maps because with teh server side map you have to learn to write the map configuration file..

  1. Pingback: ugg style

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s