Toby Brown

Toby,

Easy enough.

Make each one of the titles a paragraph (for example).
Wrap each answer in a DIV, and give it a unique ID.
Onload, run a script to collapse the answers.
When the paragraphs are clicked, toggle the display style of the 
relevant answer DIV.

I recommend using sequential numbers in the ID to make collapsing 
easier. (in the example below, the first id should be ans0, the second
should be ans1 etc.)

HTML:
<p style="cursor:help;" onclick="toggleInfo('ans0');">
 Some question
</p>
<div id="ans0">
 <p>answer</p>
 <p>More of the answer</p>
</div>

Script:
<script type="text/javascript"><!--
var storedDiv = null;
function getDiv(oID) {
 if(document.getElementById) {
  return document.getElementById(oID);
 } else if( document.all ) {
  return document.all[oID];
 } else { return null; }
}
window.onload = function () {
 for( var i = 0, y; y = getDiv('ans'+i); i++ ) {
  y.style.display = 'none';
 }
};
function toggleInfo(oID) {
 var oDiv = getDiv(oID); if( !oDiv ) { return; }
 oDiv.style.display = (oDiv.style.display=='none') ? 'block' : 'none';
 if( storedDiv && storedDiv != oDiv ) { storedDiv.style.display = 'none';
 } storedDiv = oDiv;
}
//--></script>


I've not tested this but it should work first try :)

hope this is useful.

Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/

Toby,

> is it possible to dynamically
> change the 'selected' region in the select field(drop-down list) by
> clicking on a region of the imagemap?

yes, using JavaScript.

function setSelectValue(oVal) {
    var oSel = document.myform.myselect;
    for( var i = 0; i < oSel.options.length; i++ ) {
        if( oSel.options[i].value == oVal ) {
            oSel.options[i].selected = true;
        }
    }
}
...
<area href="javascript:setSelectValue('foo');" ...>
...
<form name="myform">
<select name="myselect">
    <option value="first">Hello</option>
    <option value="foo">World</option>
    ...
</select>
</form>