<!DOCTYPE html>
<title>image zoom and pan</title>

<style>
.cpu {
	width: 600px;
	height: 400px;
	overflow: hidden;
	border: 1px solid #000;
	background: #ccc;
}

.coordinates {
	width: 6em;
	height: 1.5em;
	background: #fff;
	display: inline;
	visibility: visible;
}

.cpu > img {
	image-rendering: crisp-edges;
}
</style>

<script>
	window.onload = function(){
		// constant global settings
		const WHEEL_FACTOR = 2;//1.414213562373;

		// global table of all the cpu elements
		const cpus = document.getElemen