ruliarmando · May 29, 2013 05:41
diff --git a/test-kinetic-js.html b/test-kinetic-js.html
 <!DOCTYPE HTML>
 <html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #container {
        background-color: black;
        background-image: url("http://www.html5canvastutorials.com/demos/assets/line-building.png");
        background-position: 1px 0px;
        background-repeat: no-repeat;
        width: 580px;
        height: 327px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.2.min.js"></script>
    <script defer="defer">
      function getData() {
        return {
          '1st Floor': {
            color: 'blue',
            points: [366, 298, 500, 284, 499, 204, 352, 183, 72, 228, 74, 274],
  		link: 'http://www.google.co.id'
          },
          '2nd Floor': {
            color: 'red',
            points: [72, 228, 73, 193, 340, 96, 498, 154, 498, 191, 341, 171],
 			link: 'http://www.facebook.com'
          },
          '3rd Floor': {
            color: 'yellow',
            points: [73, 192, 73, 160, 340, 23, 500, 109, 499, 139, 342, 93],
 			link: 'http://www.bing.com'
          },
          'Gym': {
            color: 'green',
            points: [498, 283, 503, 146, 560, 136, 576, 144, 576, 278, 500, 283],
 			link: 'http://www.kaskus.co.id'
          }
        }
      }
      function updateTooltip(tooltip, x, y, text) {
        tooltip.getText().setText(text);
        tooltip.setPosition(x, y);
        tooltip.show();
      }
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 325
      });
      var shapesLayer = new Kinetic.Layer();
      var tooltipLayer = new Kinetic.Layer();
      
      var tooltip = new Kinetic.Label({
        opacity: 0.75,
        visible: false,
        listening: false
      });
      
      tooltip.add(new Kinetic.Tag({
        fill: 'black',
        pointerDirection: 'down',
        pointerWidth: 10,
        pointerHeight: 10,
        lineJoin: 'round',
        shadowColor: 'black',
        shadowBlur: 10,
        shadowOffset: 10,
        shadowOpacity: 0.5
      }));
      
      tooltip.add(new Kinetic.Text({
        text: '',
        fontFamily: 'Calibri',
        fontSize: 18,
        padding: 5,
        fill: 'white'
      }));
      
      tooltipLayer.add(tooltip);

      // get areas data
      var areas = getData();

      // draw areas
      for(var key in areas) {

        var area = areas[key];
        var points = area.points;

        var shape = new Kinetic.Polygon({
          points: points,
          fill: area.color,
 		  link: area.link,
          opacity: 0,
          // custom attr
          key: key
        });

        shapesLayer.add(shape);

      }

      stage.add(shapesLayer);
      stage.add(tooltipLayer);

      stage.on('mouseover', function(evt) {
        var shape = evt.targetNode;
        shape.setOpacity(0.5);
        shapesLayer.draw();
      });
      stage.on('mouseout', function(evt) {
        var shape = evt.targetNode;
        shape.setOpacity(0);
        shapesLayer.draw();
        tooltip.hide();
        tooltipLayer.draw();
      });
      stage.on('mousemove', function(evt) {
        var shape = evt.targetNode;
        var mousePos = stage.getMousePosition();
        var x = mousePos.x;
        var y = mousePos.y - 5;
        updateTooltip(tooltip, x, y, shape.attrs.key);
        tooltipLayer.batchDraw();
      });
 	  stage.on('click', function(evt){
 		var shape = evt.targetNode;
 		alert(shape.attrs.link);
 	  });
    </script>
  </body>
 </html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<style>
	body {
	margin: 0px;
	padding: 0px;
	}
	#container {
	background-color: black;
	background-image: url("http://www.html5canvastutorials.com/demos/assets/line-building.png");
	background-position: 1px 0px;
	background-repeat: no-repeat;
	width: 580px;
	height: 327px;
	}
	</style>
	</head>
	<body>
	<div id="container"></div>
	<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.2.min.js"></script>
	<script defer="defer">
	function getData() {
	return {
	'1st Floor': {
	color: 'blue',
	points: [366, 298, 500, 284, 499, 204, 352, 183, 72, 228, 74, 274],
	link: 'http://www.google.co.id'
	},
	'2nd Floor': {
	color: 'red',
	points: [72, 228, 73, 193, 340, 96, 498, 154, 498, 191, 341, 171],
	link: 'http://www.facebook.com'
	},
	'3rd Floor': {
	color: 'yellow',
	points: [73, 192, 73, 160, 340, 23, 500, 109, 499, 139, 342, 93],
	link: 'http://www.bing.com'
	},
	'Gym': {
	color: 'green',
	points: [498, 283, 503, 146, 560, 136, 576, 144, 576, 278, 500, 283],
	link: 'http://www.kaskus.co.id'
	}
	}
	}
	function updateTooltip(tooltip, x, y, text) {
	tooltip.getText().setText(text);
	tooltip.setPosition(x, y);
	tooltip.show();
	}
	var stage = new Kinetic.Stage({
	container: 'container',
	width: 578,
	height: 325
	});
	var shapesLayer = new Kinetic.Layer();
	var tooltipLayer = new Kinetic.Layer();

	var tooltip = new Kinetic.Label({
	opacity: 0.75,
	visible: false,
	listening: false
	});

	tooltip.add(new Kinetic.Tag({
	fill: 'black',
	pointerDirection: 'down',
	pointerWidth: 10,
	pointerHeight: 10,
	lineJoin: 'round',
	shadowColor: 'black',
	shadowBlur: 10,
	shadowOffset: 10,
	shadowOpacity: 0.5
	}));

	tooltip.add(new Kinetic.Text({
	text: '',
	fontFamily: 'Calibri',
	fontSize: 18,
	padding: 5,
	fill: 'white'
	}));

	tooltipLayer.add(tooltip);

	// get areas data
	var areas = getData();

	// draw areas
	for(var key in areas) {

	var area = areas[key];
	var points = area.points;

	var shape = new Kinetic.Polygon({
	points: points,
	fill: area.color,
	link: area.link,
	opacity: 0,
	// custom attr
	key: key
	});

	shapesLayer.add(shape);

	}

	stage.add(shapesLayer);
	stage.add(tooltipLayer);

	stage.on('mouseover', function(evt) {
	var shape = evt.targetNode;
	shape.setOpacity(0.5);
	shapesLayer.draw();
	});
	stage.on('mouseout', function(evt) {
	var shape = evt.targetNode;
	shape.setOpacity(0);
	shapesLayer.draw();
	tooltip.hide();
	tooltipLayer.draw();
	});
	stage.on('mousemove', function(evt) {
	var shape = evt.targetNode;
	var mousePos = stage.getMousePosition();
	var x = mousePos.x;
	var y = mousePos.y - 5;
	updateTooltip(tooltip, x, y, shape.attrs.key);
	tooltipLayer.batchDraw();
	});
	stage.on('click', function(evt){
	var shape = evt.targetNode;
	alert(shape.attrs.link);
	});
	</script>
	</body>
	</html>