ImageMap

[Anish Chapagain]

Hi,
I'm implementing a map based application using Javascript and DOM with
CSS.
i have Uk map with postcode district and am using almost similar
design as it is there in --"http://www.epa.gov/air/data/geosel.html"
but is developed in flash.

My major problem is when i move my mouseover some area it gets
highlighted and when cliked the name or value of that area goes to
text box and later on submitting will connect to MysQL for search.

The name and highlighting is going well as connection to MySQL but
require one major trick, to place a "marker" in the area that was
clicked, also when user wish to remove textbox value it need to be
removed.

I have created the area using ImageMap and am placing onmouseover,
onmouseout, onclick method to it. All, is workign as planned except
placing the marker as a simple "dot", "star", "any color".

Please help me, with links, suggestions, example if any of you have.

Thanking you,
Anish

 

[SAM]

Le 11/26/08 8:28 PM, Anish Chapagain a écrit :

I have created the area using ImageMap

what is ImageMap ?
where to find this application ?

Ha !? mais c'est du PHP !

and am placing onmouseover,
onmouseout, onclick method to it. All, is workign as planned except
placing the marker as a simple "dot", "star", "any color".

so, you did really get a real html tag 'map' ?

Please help me, with links, suggestions, example if any of you have.

From the moment you know the coordinates of an area you can calculate
approximatively its center and by the way the position of the dot or
star to place.

html:
=====
<div id="theMap" style="position: absolute">
<img src="happyMap.jpg" alt="" usemap="map1">
</div>
<img id="dot" src="dot.gif" alt=""
style="position:absolute;visibility:hidden">
<map name="map1">
<area onclick="dot(1,12,56); blah ...
</map>

JS:
===
function dot(idx, x, y) {
// x & y = the position of the dot to place
// relatively to the div 'theMap' of same size
// that the image of map
// idx = name (number) of the dot
var d = document.getElementById('dot_'+idx);
if(d) d.parentNode.removeChild(d);
else {
d = document.getElementById('dot').cloneNode(true);
d.id = 'dot_'+idx;
d.style.top = y+'px';
d.style.left = x+'px';
d.style.visibility = 'visible';
document.getElementById('theMap').appendChild(d);
}
}