}
}
-
+function imageZoom(imgID, resultID) {
+ var img, lens, result, cx, cy;
+ img = document.getElementById(imgID);
+ result = document.getElementById(resultID);
+ /* Create lens: */
+ lens = document.createElement("DIV");
+ lens.setAttribute("class", "img-zoom-lens");
+ /* Insert lens: */
+ img.parentElement.insertBefore(lens, img);
+ /* Calculate the ratio between result DIV and lens: */
+ cx = result.offsetWidth / lens.offsetWidth;
+ cy = result.offsetHeight / lens.offsetHeight;
+ /* Set background properties for the result DIV */
+ result.style.backgroundImage = "url('" + img.src + "')";
+ result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
+ /* Execute a function when someone moves the cursor over the image, or the lens: */
+ lens.addEventListener("mousemove", moveLens);
+ img.addEventListener("mousemove", moveLens);
+ /* And also for touch screens: */
+ lens.addEventListener("touchmove", moveLens);
+ img.addEventListener("touchmove", moveLens);
+ function moveLens(e) {
+ var pos, x, y;
+ /* Prevent any other actions that may occur when moving over the image */
+ e.preventDefault();
+ /* Get the cursor's x and y positions: */
+ pos = getCursorPos(e);
+ /* Calculate the position of the lens: */
+ x = pos.x - (lens.offsetWidth / 2);
+ y = pos.y - (lens.offsetHeight / 2);
+ /* Prevent the lens from being positioned outside the image: */
+ if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
+ if (x < 0) {x = 0;}
+ if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
+ if (y < 0) {y = 0;}
+ /* Set the position of the lens: */
+ lens.style.left = x + "px";
+ lens.style.top = y + "px";
+ /* Display what the lens "sees": */
+ result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
+ }
+ function getCursorPos(e) {
+ var a, x = 0, y = 0;
+ e = e || window.event;
+ /* Get the x and y positions of the image: */
+ a = img.getBoundingClientRect();
+ /* Calculate the cursor's x and y coordinates, relative to the image: */
+ x = e.pageX - a.left;
+ y = e.pageY - a.top;
+ /* Consider any page scrolling: */
+ x = x - window.pageXOffset;
+ y = y - window.pageYOffset;
+ return {x : x, y : y};
+ }
+}
</script>
<style>
left: 0;
z-index: 1; /* Doc working with */
}
-
+* {box-sizing: border-box;}
+
+.img-zoom-container {
+ position: relative;
+}
+
+.img-zoom-lens {
+ position: absolute;
+ border: 1px solid #d4d4d4;
+ /*set the size of the lens:*/
+ width: 40px;
+ height: 40px;
+}
+
+.img-zoom-result {
+ border: 1px solid #d4d4d4;
+ /*set the size of the result div:*/
+ width: 300px;
+ height: 300px;
+}
</style>
</head>
<body onload="init()">
<img class="source-image" src="Green-Party-petition.png" alt="" />
<div class="header" id="myHeader">
- <input type="submit" value="START" id="nextbutton" onclick="clearCanvas(canvas,ctx);">
+ <input type="submit" value="START" id="nextbutton" onclick="imageZoom("myimage", "myresult");">
<input type="submit" value="NEXT" id="nextbutton" onclick="clearCanvas(canvas,ctx);">
<input type="submit" value="SAVE and SHARE" id="sharebutton" onclick="clearCanvas(canvas,ctx);">
<input type="submit" value="BACK" id="clearbutton" onclick="clearCanvas(canvas,ctx);">
</canvas>
</div>
</div>
+ <div class="img-zoom-container">
+ <img id="myimage" src="Green-Party-petition.png" width="300" height="240" alt="Girl">
+ <div id="myresult" class="img-zoom-result"></div>
+ </div>
</body>
</html>
HCoop / clinton / MarylandElectronicPetitionSignature.git / commitdiff