Javascript: Zoom in on mouseover WITHOUT Jquery or plugins
I've looked for this everywhere for weeks, and I simply cannot find something to tell me what I'm doing wrong or how to even proceed. The goal is to create a function similar to Amazon's zoom in on mouseover for products with small images.
I'm currently at a loss for how to proceed, though I am aware that I will require two images- one in the "zoomed in" size and one in the "zoomed out" size. I'm not using Jquery- I cannot install it or any plugins to the website via my employer's request. I'm basically asking for the harder answer, and I apologize for that in advance. I must do this from moderate scratch. Warning: I am a programming Student. Take that as you will.
I've got HTML and CSS script, and because we don't actually have an IDE here I'm doing this on codecademy's project section, otherwise I'd have to program this completely live. You can find my code here, but I'll also post the code below, as that link is bound to have changing code since it uses procedural saving.
Note: I originally had it so that the gray box was following my mouse at relative center. It was flickering as it moved, but it was working. Currently though it's decided not to, at least on my work computer. I've not tested it on my personal computer.
Edit: The code is working on my Surface Pro 3, though it does follow the mouse off of the image (which is temporary and something random I grabbed). I'm not sure why the code isn't working on my work computer, though it's probable because it's a Macintosh OSX version 10.6.8...
HTML Code:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<img id="imgZoom" onmousemove="zoomIn()" onmouseout="zoomOut()" src="http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg">
<div id="overlay" onmousemove="zoomIn()"></div>
</body>
</html>
CSS Code:
#imgZoom {
height: 300;
}
#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:20%;
height:20%;
padding: 25px;
border: 5px solid gray;
background-color: white;
opacity:0.4;
text-align:center;
z-index: 1000;
}
Javascript code:
function zoomIn()
{
var element = document.getElementById("overlay");
element.style.visibility = "visible";
var x = event.clientX; // Get the horizontal coordinate
var y = event.clientY; // Get the vertical coordinate
element.style.top = y - 80;
element.style.left = x - 80;
}
function zoomOut()
{
var element = document.getElementById("overlay");
element.style.visibility = "hidden";
}
Answer
you can just do it by playing background-position on mouse-over just moving background-position on mouseover DEMO
function zoomIn(event) {
var element = document.getElementById("overlay");
element.style.display = "inline-block";
var img = document.getElementById("imgZoom");
var posX = event.offsetX ? (event.offsetX) : event.pageX - img.offsetLeft;
var posY = event.offsetY ? (event.offsetY) : event.pageY - img.offsetTop;
element.style.backgroundPosition = (-posX * 4) + "px " + (-posY * 4) + "px";
}
function zoomOut() {
var element = document.getElementById("overlay");
element.style.display = "none";
}#overlay {
border: 1px solid black;
width: 200px;
height: 200px;
display: inline-block;
background-image: url('http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg');
background-repeat: no-repeat;
}<img id="imgZoom" width="200px" height="200px" onmousemove="zoomIn(event)" onmouseout="zoomOut()" src="http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg">
<div id="overlay" onmousemove="zoomIn(event)"></div>