Ajax and output list that needs to be form elements

Hi,
hopefully can explain this and make sense, here goes. Iam trying to make an ajax page where you are first shown a map of the UK with the main regions. When you click a region the ajax is triggered and returns a list of beaches for that region.

Each of the rows in the list can be clicked to trigger a second ajax query to bring back a detailed page for that beach.

the problem i am having is that i don’t know how to get the map and the rows to be form elements that can trigger the ajax. At the moment i have a list/menu which i can select a region. This then returns a list/menu with the beaches which then returns the details page. not exactly inspiring and limits the amount of detail displayed.

I want to make an outputted list of say

Beachname | beachaward | status | something else

be selectable as a form variable. I could put a record button at the begining but that would be a bit ugly. If it was a hidden field the id would match down the entire list and only return the first one in the list.

any ideas?
hopefully makes some sort of sense.

Hey, why not use an image map with the links in the image map calling a javascript function with the location id. This can then be passed into your ajax code.

Save the code below into a normal html file and save and use the image of my too-cute-for-words dog. Click on his left ear, and right ear to see the javascript being called with those id’s…

<html>
<head>

<script language="javascript">

function test(id)
{
    alert("Call your ajax here with id = " + id);
}

</script>

</head>

<body>

<img src="Image0001_new.jpg" usemap="#test">
<map name="test">
<area shape="rect" coords="80,170,130,300" href onclick="test('1');">
<area shape="rect" coords="255,170,330,300" href onclick="test('2');">
</map>


</body>

</html>