Marking an area on a picture by choosing at a selection list

Question

Hello,
I was wondering if it is possible to mark a picture dynamic:
I have already a map and some COORDS - if you click on the shape, it links to another page:
<area shape="rect" coords="143,139,149,148" href="f?p=&APP_ID.:44:&SESSION.::::P44_FILE:20" alt="T 19">
Now I have a lot of this COORDS and it is very difficult to find them on the map. What I want to make is a select list or sth. like this, to choose the name of the area you want to find and it marks you this on the map with a cross.
Has anybody an idea how this could work or how this could be done??
Thank you soooo much,
LISA

Answer 1

Hi Lisa,
This may work (I don't have the stuff you have to set this up to test it!):
1 - Create a javascript array on your page, something like:
&lt;script type="text/javascript"&gt;
var crosses = new Array (
new Array(0, 123, 345, "f?p=&APP_ID.:44:&SESSION.::::P44_FILE:1"),
new Array(1, 234, 567, "f?p=&APP_ID.:44:&SESSION.::::P44_FILE:2"),
etc
&lt;/script&gt;This contains an ID (which would match the values on your select list), the top and left pixels where you want the cross to appear within the map area and the href value for the link
2 - On your page, create an A tag with an ID of "CROSS" and a style attribute of "display:none". The text between the opening and closing A tags would be your X
3 - Create a javascript function that can be called by your select list (your select list's definition should include an attribute of onclick="javascript:setCross();" to call it). The javascript function will then check the value of the select list (using $x('P1_LIST').value), find it in the crosses array, get the corresponding values and then set the position of the A tag and display it. Something like:
&lt;script type="text/javascript"&gt;
function setCross()
var sel = $x('P1_LIST').value;
var t = crosses[sel][1]; // the top
var l = crosses[sel][2]; // the left
var h = crosses[sel][3]; // the href
var a = $x('CROSS');
var m = $x('MAP_ID');
a.style.position = "absolute";
a.style.zIndex = 99;
a.style.top = m.clientTop + t;
a.style.left = m.clientLeft + l;
a.href = h;
a.style.display = "block";
&lt;/script&gt;The theory is that you can position a tag anywhere on the page using left and top settings - but you need to position within the map area, so you have to get its top and left as well. As the A tag would sit over your map, the user can no longer click on the map to trigger the link - the A tag, therefore, needs to have the link as well.
You may have to tweak/play with this to get it to work on your page. This is all theory, of course, but I think it should work ok.
Andy