josejuan/SimpleHologram.html

## SimpleHologram.html
<!DOCTYPE html>
<html>
<style>
  div {
    display: block;
    float: left;
  }
</style>
<script>
  var N = 12; // nº of divisions
  function main() {

    var imgA    = document.getElementById('A');
    var srcA    = imgA.src;
    var srcB    = document.getElementById('B').src;
    var width   = imgA.width;
    var height  = imgA.height;

    document.write('<style>div{display:block;float:left;height:'+height+'px;width:'+~~(width/N)+'px;}</style>');

    var src = [srcA, srcB];

    for(var i = 0; i < N; i++) {
      for(var j = 0; j < 2; j++) {
        document.write('<div style="background-image:url('+src[j]+');background-position:-'+~~((i*width)/N)+'px 0px"></div>');
      }
    }
  }
</script>
<body onload="main()">
  <img id="A" src="a.jpg" /><!-- image A -->
  <img id="B" src="b.jpg" /><!-- image B (same dimensions than A) -->
</body>
</html>
	<!DOCTYPE html>
	<html>
	<style>
	div {
	display: block;
	float: left;
	}
	</style>
	<script>
	var N = 12; // nº of divisions
	function main() {

	var imgA = document.getElementById('A');
	var srcA = imgA.src;
	var srcB = document.getElementById('B').src;
	var width = imgA.width;
	var height = imgA.height;

	document.write('<style>div{display:block;float:left;height:'+height+'px;width:'+~~(width/N)+'px;}</style>');

	var src = [srcA, srcB];

	for(var i = 0; i < N; i++) {
	for(var j = 0; j < 2; j++) {
	document.write('<div style="background-image:url('+src[j]+');background-position:-'+~~((i*width)/N)+'px 0px"></div>');
	}
	}
	}
	</script>
	<body onload="main()">
	<img id="A" src="a.jpg" /><!-- image A -->
	<img id="B" src="b.jpg" /><!-- image B (same dimensions than A) -->
	</body>
	</html>