I've been working on creating an interactive map using some prebuilt templates. Each country in the map highlights when the mouse hovers over it. My question is, how can I make another country, like Brazil, highlight when any country is hovered over? In other words, how can I select a different object when a specific country is highlighted?
<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
<script src="http://riskmap.filkor.org/paths.js"></script>
<script src="http://riskmap.filkor.org/gameData.js"></script>
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'container',
width: 1920,
height: 1080
});
var mapLayer = new Kinetic.Layer({
y: 20,
scale: 1
});
var topLayer = new Kinetic.Layer({
y: 20,
scale: 1
});
/*
* iterate through country data
*/
for(id in TerritoryNames) {
var path = new Kinetic.Path({
data: TerritoryPathData[id].path,
fill: '#eee',
stroke: '#555',
strokeWidth: 1,
id: id
});
path.on('mouseover', function() {
this.setFill('#111');
this.moveTo(topLayer);
topLayer.drawScene();
});
path.on('mouseout', function() {
this.setFill('#eee');
this.moveTo(mapLayer);
topLayer.draw();
});
mapLayer.add(path);
}
stage.add(mapLayer);
stage.add(topLayer);
</script>