SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Froot r gewd SubKamran's Avatar
    Join Date
    May 2002
    Location
    North Star State
    Posts
    597
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Argh! Help...image events.

    This is what I want to do:

    My page loads an image, no problem. I have 2 scripts that Zoom In and Zoom Out on an image...no problem.

    Now, I have a script that is supposed to reset the image back to original size. I had an idea that worked, but only if the image had been already loaded...

    I want to somehow record the FIRST default width and height of the image and then pass it to the "actualSize()" function so that when clicked it will reset the image back.

    Here's my code, it will be easier to show you:

    Code:
    main.js
    *********
    
    function getDimensions() {
    	var imgDHeight = document.images.viewImg.height;
    	var imgDWidth = document.images.viewImg.width;
    	
    	size.innerText=imgDWidth + 'x' + imgDHeight;
    
    }
    
    function actualSize() {
    
    		document.images.viewImg.width = imgDWidth;
    		document.images.viewImg.height = imgDHeight;
    	
    		size.innerText=imgDWidth + 'x' + imgDHeight;
    }
    
    function zoomIn() {
    	var imgHeight = document.images.viewImg.height;
    	var imgWidth = document.images.viewImg.width;
    	
    	if(document.images.viewImg.width < 2000) {
    		document.images.viewImg.width = imgWidth / 0.8;
    		document.images.viewImg.height = imgHeight / 0.8;
    	}
    	size.innerText=document.images.viewImg.width + 'x' + document.images.viewImg.height;
    }
    
    function zoomOut() {
    	var imgHeight = document.images.viewImg.height;
    	var imgWidth = document.images.viewImg.width;
    	
    	if(document.images.viewImg.width > 50) {
    		document.images.viewImg.width = imgWidth * 0.8;
    		document.images.viewImg.height = imgHeight * 0.8;
    	}
    	size.innerText=document.images.viewImg.width + 'x' + document.images.viewImg.height;
    }
    Code:
    displays the image...this was in VB script, but I changed it to normal HTML so you could read it better
    ********
    
    <span id='size'></span><br /><br />
    
    <a href='javascript:zoomIn()'><img src='" & strImagesFold & "/images/zoomin.gif' alt='Zoom In' class='imgB' /></a>
    
    <a href='javascript:zoomOut()'><img src='" & strImagesFold & "/images/zoomout.gif' alt='Zoom Out' class='imgB' /></a>
    
    <a href=""javascript:actualSize()""><img src='" & strImagesFold & "/images/actualsize.gif' alt='Actual Size' class='imgB' /></a><br /><br />
    
    <img src='dl.asp?path=" & strPath & "&type=" & strType & "' border='0' alt='' id='viewImg' onload='getDimensions()' />
    I don't know how to pass "imgDWidth" and "imgDHeight" to actualSize() so it can use those values...
    Last edited by SubKamran; Jan 6, 2003 at 16:38.
    "Sometimes little is more."
    Kamran A
    Web Dev/Designer
    Keyboard not found: Please Press F1 to Continue

  2. #2
    Froot r gewd SubKamran's Avatar
    Join Date
    May 2002
    Location
    North Star State
    Posts
    597
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nevermind, got it

    Code:
    var varImgDHeight;
    var varImgDWidth;
    
    function getDimensions() {
    	var imgDHeight = document.images.viewImg.height;
    	var imgDWidth = document.images.viewImg.width;
    	
    	size.innerText=imgDWidth + 'x' + imgDHeight;
    	
    	varImgDHeight = imgDHeight;
    	varImgDWidth = imgDWidth;
    }
    
    function actualSize() {
    
    		document.images.viewImg.width = varImgDWidth;
    		document.images.viewImg.height = varImgDHeight;
    	
    		size.innerText=varImgDWidth + 'x' + varImgDHeight;
    }
    I declared two outside variables, then when the image loads assign those vars the default sizes...simple
    "Sometimes little is more."
    Kamran A
    Web Dev/Designer
    Keyboard not found: Please Press F1 to Continue


Bookmarks

Posting Permissions

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