View Full Version : Loading images from XML then scrolling through them

02-11-2007, 08:27 PM
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!

<!-- 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];


document.writeln("Your browser is too old. Please update it.");


} // end for loop


var handleFailure = function(o){
// document.writeln{"failed"};

var callback =
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 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 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;


<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>



Any suggestions would be greatly appreciated

02-12-2007, 05:01 AM
anyone? Bueller?

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

02-12-2007, 06:44 PM
did u try changing to a keyup