Introduction

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.

XPages

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=”http://www.ibm.com/xsp/core&#8221; 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=”http://www.father.com&#8221; />
<area shape=”rect” coords=”171,20,279,108″ alt=”mommy”
title=”mommy” href=”http://www.mommy.com&#8221; />
<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”
title=”butterfly”
href=”javascript:dojo.byId(‘#{id:inputText1}’).value = ‘found it’” />
</map>
<xp:inputText id=”inputText1″></xp:inputText>
</xp:view>

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?