Skip to content

Instantly share code, notes, and snippets.

@josejuan
Created September 11, 2021 14:08
Show Gist options
  • Save josejuan/6a1bf7829e0a6290f003685fda728c90 to your computer and use it in GitHub Desktop.
Save josejuan/6a1bf7829e0a6290f003685fda728c90 to your computer and use it in GitHub Desktop.
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment