tauphujedre
New Member
Here I tried to make simple zoom in and out functions on button click.HTML\[code\] <input type="button" value ="http://stackoverflow.com/questions/14050749/-" onClick="zoom(0.9)"/> <input type="button" value ="http://stackoverflow.com/questions/14050749/+" onClick="zoom(1.1)"/> <div id="thediv"> <img id="pic" src="http://cdn1.iconfinder.com/data/icons/VistaICO_Toolbar-Icons/256/Zoom-in.png"/> </div>\[/code\]SCRIPT\[code\]var zoomLevel = 100;var maxZoomLevel = 105;var minZoomLevel = 95;function zoom(zm) {var img=document.getElementById("pic");if(zm > 1){ if(zoomLevel < maxZoomLevel){ zoomLevel++; }else{ return; }}else if(zm < 1){ if(zoomLevel > minZoomLevel){ zoomLevel--; }else{ return; }}wid = img.width;ht = img.height;img.style.width = (wid*zm)+"px";img.style.height = (ht*zm)+"px";img.style.marginLeft = -(img.width/2) + "px";img.style.marginTop = -(img.height/2) + "px";}\[/code\]But the problem is, whenever I click the zoom-in function the image moves to the top corner of the page. I tried to solve this but no solution was effective.Here is the BIN I am working on which may be useful to find my mistake.And also another question: Is there a way to apply mousewheel to this function?