Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Dec 2006
    Posts
    417
    Thanks
    168
    Thanked 1 Time in 1 Post

    Loading images from XML then scrolling through them

    Hi, I am trying to load up some CAT scan images and then use the up and down arrows keys to scroll through them.

    Each CAT scan image is on it's own z-index, so they are layered over one another.

    I grab each image from an XML page that I created by querying my database -- the XML / server side scripts work fine -- I tested them manually.

    The problem is that I don't know how to do the actual scrolling part. I have an event Listener for the up and down arrow keys. And when I load the images from the XML document I put them in an array using new Image() to preload them.

    But when I try to grab the array element when the up or down arrows are pressed I get an "undefined error". Below is the pasted code I made using the Yahoo UI library for the XMLhttpRequest. You really just need to read the bottom half of the code where the array gets made.. and the final function where the up/down events are created. Please help!

    Code:
    <html>
    <head>
    <!-- Dependency -->
    <script src="yui/build/yahoo/yahoo.js"></script>
    
    <!-- Source file -->
    <script src="yui/build/connection/connection.js"></script>
    
    <script language="JavaScript">
    
    <!-- preform a XMLhttpRequest to load the images -->
    function loadImages(groupid){
    
    	var sUrl = "php/loadCTScanXML.php?groupid=" +groupid;
    	
    	var handleSuccess = function(o){
    
    		var div = document.getElementById('outputImages');
    	  
    		var imagesArray; // create the array to be used to store the images from the xmlhttprequest
    
    		if(o.responseXML !== undefined){
    
    
    		    var root = o.responseXML.documentElement; 
    		    var oTotalImages = root.getElementsByTagName('totalImages')[0].firstChild.nodeValue; 
    	
    		    var x; // initialize the counter
    		    // Format and display results in the response container.
    		    for (x = 0; x < oTotalImages + 1; x++) {
    
    		    	var oFilepath = root.getElementsByTagName('filepath')[x].firstChild.nodeValue; 
    		   	var oFilenames = root.getElementsByTagName('filenames')[x].firstChild.nodeValue; 
    		    	var oModality = root.getElementsByTagName('modality')[x].firstChild.nodeValue; 
    			
    			var imgSrc = "<span id=" + x + " style='position: relative; z-index: " + x + "'><img src='" + oFilepath + oFilenames + "'></img></span>";
    
    	    		div.innerHTML = imgSrc;
    
    
    			/* preload the images */
    
    			    if (document.images) {
    
    				      	preload_image_object = new Image();
    				      	// set image url
    				      	image_url = new Image();
    				      	image_url[x] = imgSrc;
    
    				       	var i = 0;
    				       	for(i=0; i<=3; i++) 
    			         	preload_image_object.src = image_url[i];
    
    			    }else{
    				
    					document.writeln("Your browser is too old.  Please update it.");
    
    			    }  
      
    	  	  } // end for loop
    
    		}
    
    	}
    	var handleFailure = function(o){
    		// document.writeln{"failed"};
    	}
    	
    	var callback =
    	{
    	  success:handleSuccess,
    	  failure: handleFailure
    	  // argument: { foo:"foo", bar:"bar" }
    	}
    	
    	var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback); 
    	
    	// alert(Image[4]);
    }
    
    <!-- add a listener for up and down arrows to scroll through the images -->
    
    function detectEvent(e) {
    	var evt = e || window.event;
    	var writeroot = document.getElementById('writeroot');
    	writeroot.innerHTML += 'keyCode is ' + evt.keyCode;
    	   if(e.keyCode==38){
    		// if the up arrow is pressed then increment the currently displayed image up by one (ie. change cthead0004.jpg to cthead0005.jpg
    		alert("you pressed the up arrow");
                    alert(image_url[4]);  // this returns an undefined value but Why?  It should reference the 4th item in the array yet it doesn't  -- why not?
    	   }
    	   if(e.keyCode==40){
    		// if the down arrow is pressed then increment the currently displayed image up by one (ie. change cthead0004.jpg to cthead0003.jpg
    		alert("you pressed the down arrow");
                    alert(image_url[2]);  // this returns an undefined value but Why?  It should reference the 2nd item in the array yet it doesn't  -- why not?
    	   }
    	return document.defaultAction;
    }
    document.onkeypress=detectEvent
    
    </script>
    
    </head>
    <body>
    	<p id="writeroot"></p>
    
    <div style="width: 200px; padding: 10px; float: right; border: 1px dashed #000";>Script Objective: to load images from a database, display them overlapped over one another sequentially, and then use the mousewheel to scroll through them.  There are 40 images parsed from the XML feed: <ol><li>cthead0001.gif</li><li>cthead0002.gif</li><li>cthead0003.gif</li><li>etc...</li></ol></div>
    	
    <div id="delta">
    
    	<div id="outputImages" onClick="loadImages(1)" style="width: 364px; height: 260px; background: yellow; border: 1px solid #000;">click me to load images into this div</div>
    
    </div>
    
    </body>
    </html>
    Any suggestions would be greatly appreciated
    Last edited by Bobafart; 02-11-2007 at 08:29 PM.

  • #2
    Regular Coder
    Join Date
    Dec 2006
    Posts
    417
    Thanks
    168
    Thanked 1 Time in 1 Post
    anyone? Bueller?

    I haven't been able to find the problem....

  • #3
    Senior Coder shyam's Avatar
    Join Date
    Jul 2005
    Posts
    1,563
    Thanks
    2
    Thanked 163 Times in 160 Posts
    did u try changing to a keyup

    Code:
    document.onkeyup=detectEvent
    Last edited by shyam; 02-12-2007 at 06:51 PM.


  •  

    Posting Permissions

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