www.webdeveloper.com
Results 1 to 6 of 6

Thread: Complex javascript zoom

  1. #1
    Join Date
    Apr 2014
    Posts
    6

    Complex javascript zoom

    Hi,

    I'm working with a zoom script written in javascript and jquery, that zooms into and out of an image, one click at a time, by clicking +/- input buttons (these are currently image buttons instead of the standard input buttons). I'm looking for a way to make the buttons be onmouseover instead of onclick, but, instead of only advancing a tiny bit each time, I need it to scroll smoothly into the image, so there's no need for constant reclicking to zoom into the image. In addition, I need it to control another function onmouseover as well, such as swapping between to images that are controlled by the onmousever (i don't mean to swap the image button graphics, but rather another image on the page is swapped when onmouseover occurs). i'd prefer if webgl was not involved, as i know some comps are coming with onboard graphics cards that don't have webgl (doh).

    thanks in advance!

  2. #2
    Join Date
    Apr 2014
    Posts
    6
    p.s. i know that there's a javascript that does 2 different things during one link click (i'm currently trying to figure out how to use it to make the onclick of the input button, swap an image elsewhere on the page, while also zooming slowly and smoothly into the image (which is full window) forward per the original intent of the zoom function.

  3. #3
    Join Date
    Apr 2014
    Posts
    6
    eek one more thing. i need an onmouseover swap between two images elsewhere on the page and onmouseout, swaps back to the original image.

  4. #4
    Join Date
    Apr 2014
    Posts
    6
    here's the script i need tweaked
    Code:
    <style>
    #thediv {
        margin:0 auto;
    	height:900px;
    	width:1500px;
    	overflow:hidden;
    	}
    
    img {
        position: relative;
        left: 40%;
        top: 40%;
    }
    
    </style>
    
    <div id="thediv">
    
    <a href=""><img id="pic" src="myimage.jpg" width="100%" height="100%" border=0 /></a>
    
    
    </div>
    
    <script>
    window.onload = function(){zoom(1)}
    
    
    function zoom(zm) {
    img=document.getElementById("pic")
    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";
    }
    
    </script>
    <div style="position: absolute; left: 45%; top: 90%; right: 0%">
    <input type="image" src="down2.png" width="7%" onclick="zoom(0.9)"/>
    <input type="image" src="up2.png" width="7%" onclick="zoom(1.1)"/>

  5. #5
    Join Date
    Apr 2014
    Posts
    6
    here's one that has smooth scroll in but it occassionally mangles the image and also doesn't re-center the image as it zooms in so you end up in the upper left hand corner of the image instead of in the middle, where ideally you want the viewer to zoom
    http://www.codetoad.com/zooom_eg.asp

  6. #6
    Join Date
    Apr 2014
    Posts
    6
    im still hoping for an answer to this one. to swap the images out onclick or onmouseover, requires a window onload event, but the zoom script is already using a window onload event, so i think it's cancelling out the image swap onclick. i have both statements separated in the input button html with a semicolon, and all the other formatting is correct. is there a way to get the image swap from the input button onclick that doesn't use the window onload function and furthermore, is it possible to make the zoom script in my previous post, be a smooth zoom in onmouseover instead of a onclick?? i've been looking at answers to these questions for days now and nothing has worked so far.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles