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>