Home » » Gambar Peta Dunia Dengan HTML5

Gambar Peta Dunia Dengan HTML5

Written By Nether Blog on Sunday, September 2, 2012 | 3:40:00 PM

Gambar Peta Dunia dengan HTML5




Source Code :
<style>
      body {
        margin: 0px;
        padding: 0px;
      }
      canvas {
        border: 1px solid #9C9898;
      }
      #tango {
        position: absolute;
        top: 10px;
        left: 10px;
        padding: 10px;
      }
      #container {
        background-image: url('http://www.html5canvastutorials.com/demos/assets/map-background.png');
        display: inline-block;
        overflow: hidden;
        height: 262px;
        width: 580px;
        background-position: 1px 1px;
      }
    </style>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.0.js"></script>
    <script src="http://www.html5canvastutorials.com/demos/assets/worldMap.js"></script>
    <script>
      window.onload = function() {
        var stage = new Kinetic.Stage({
          container: 'container',
          width: 578,
          height: 260
        });
        var mapLayer = new Kinetic.Layer({
          y: 20,
          scale: 0.6
        });

        /*
         * loop through country data stroed in the worldMap
         * variable defined in the worldMap.js asset
         */
        for(var key in worldMap.shapes) {
          var path = new Kinetic.Path({
            data: worldMap.shapes[key],
            fill: '#ccc',
            stroke: '#555',
            strokeWidth: 1
          });

          path.on('mouseover', function() {
            this.setFill('red');
            mapLayer.drawScene();
          });

          path.on('mouseout', function() {
            this.setFill('#ccc');
            mapLayer.drawScene();
          });

          mapLayer.add(path);
        }

        stage.add(mapLayer);
      };

    </script>
 
 
    <br />
<div id="container">
</div>
<br />

0 komentar:

Post a Comment

Silahkan berikan komentar anda yang baik.