Hello
I am building a script where a wolrd map is appeared ( bases on amaps tool) and I would like to add in div area an onclick attribute active only for a certain area of the map. (lets sayonly USA). That means that I will be able to mouseover the entire map but nothig will happens untill i will enter USA area.
Please any help on this it will be perfect.
Please find below the script

Thank you so muchhhhhhhhhh

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<title>Aegean Airlines</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script src="../ammap/ammap.js" type="text/javascript"></script>
<script src="../ammap/maps/js/worldLow.js" type="text/javascript"></script>

<script type="text/javascript">

//message boxs area


// add all your code to this method, as this will ensure that page is loaded
AmCharts.ready(function() {
// create AmMap object
var map = new AmCharts.AmMap();

// set path to images
map.pathToImages = "..ammap/images/";



var icon="M21.25,8.375V28h6.5V8.375H21.25zM12.25,28h6.5V4.125h-6.5V28zM3.25,28h6.5V12.625h-6.5V28z";
var dataProvider = {mapVar: AmCharts.maps.worldLow};




map.areasSettings = {
unlistedAreasColor: "#DDDDDD",
rollOverOutlineColor: "#FFFFFF",
rollOverColor: "#CC0000",
balloonText: "[[title]] ",
//autoZoom: true,
selectedColor: "#000000"

};


dataProvider.areas = [
//east -area
{
title:"Albania" ,
id: "AL",
color: "#3366CC",
groupId: "Int - East",

},
{
title: "Georgia",
id: "GE",
color: "#3366CC",
groupId: "Int - East"},
{
title: "Russian Federation",
id: "RU",
color: "#3366CC",
groupId: "Int - East"},
{
title: "Azerbaijan",
id: "AZ",
color: "#3366CC",
groupId: "Int - East"},
{
title: "Turkey",
id: "TR",
color: "#3366CC",
groupId: "Int - East",
},
{
title: "Israel",
id: "IL",
color: "#3366CC",
groupId: "Int - East"},
{
title: "Cyprus",
id: "CY",
color: "#3366CC",
groupId: "Int - East"},
{
title:"Bulgaria" ,
id: "BG",
color: "#3366CC",
groupId: "Int - East"},
{
title: "Egypt",
id: "EG",
color: "#3366CC",
groupId: "Int - East"},
{
title: "Kuwait",
id: "KW",
color: "#3366CC",
groupId: "Int - East"},
{
title: "Lebanon",
id: "LB",
color: "#3366CC",
groupId: "Int - East"},
{
title: "Romania",
id: "RO",
color: "#3366CC",
groupId: "Int - East"},
{
title: "Serbia",
id: "RS",
color: "#3366CC",
groupId: "Int - East"},
{
title: "Ukraine",
id: "UA",
color: "#3366CC",
groupId: "Int - East"},

//central area

{ title: "Austria",
id: "AT",
color: "#66CC99",
groupId: "Int - Central"},
{
title: "Czech Republic",
id: "CZ",
color: "#66CC99",
groupId: "Int - Central"},
{
title: "Germany",
id: "DE",
color: "#66CC99",
groupId: "Int - Central"},
{
title: "Poland",
id: "PL",
color: "#66CC99",
groupId: "Int - Central"},
{
title: "Sweden",
id: "SE",
color: "#66CC99",
groupId: "Int - Central"},
{
title: "Hungary",
id: "HU",
color: "#66CC99",
groupId: "Int - Central"},

//Inter - West

{ title: "Belgium",
id: "BE",
color: "#FFCC33",
groupId: "Int - West" },

{
title: "Spain",
id: "ES",
color: "#FFCC33",
groupId: "Int - West"},
{
title: "France",
id: "FR",
color: "#FFCC33",
groupId: "Int - West"},
{
title: "Italy",
id: "IT",
color: "#FFCC33",
groupId: "Int - West"},
{
title: "United Kingdom",
id: "GB",
color: "#FFCC33",
groupId: "Int - West"},
{
title: "Switzerland",
id: "CH",
color: "#FFCC33",
groupId: "Int - West"}

];

// pass data provider to the map object
map.dataProvider = dataProvider;
// map.objectList = new AmCharts.ObjectList("listdiv");
// map.showImagesInList = true;




var legend = {
width: 600,
backgroundAlpha: 0.5,
backgroundColor: "#FFFFFF",
borderColor: "#666666",
borderAlpha: 1,
bottom: 10,
left: 15,
horizontalGap: 10,
data: [
{
title: "Int - East",
color: "#3366CC"},
{
title: "Int - West",
color: "#FFCC33"},
{
title: "Int - Central",
color: "#66CC99"}
]
};

map.addLegend(legend);





/* create areas settings
* autoZoom set to true means that the map will zoom-in when clicked on the area
* selectedColor indicates color of the clicked area.
*/
//map.areasSettings = {
// autoZoom: true,
// selectedColor: "#000000"
//};

// let's say we want a small map to be displayed, so let's create it
map.smallMap = new AmCharts.SmallMap();

// write the map to container div
map.write("mapdiv");

});


function readMouseMove(elem){

var top=0, left=0
while(elem){

top = top + parseInt(elem.offsetTop)
left = left + parseInt(elem.offsetLeft)
alert(parseInt(elem.offsetTop));
if(top == '0' && left == '0'){

window.open('http://localhost/connection.php','name');
}
}
}



function popup(){


window.open('http://localhost/connection.php','name');

}


</script>


</head>


<body>

<div id="mapdiv" style="width: 600px; height: 400px; border:1px solid black;background-color: rgb(193,255,255);"></div>

</body>

</html>