Dom Picture Viewer

HTML:

Hi Folks,

I've written a picture viewing application that works fine in IE, but no Firefox. Can anyone tell me why?

Here's the code:

<script language="javascript" src="../javascript/master.js"></script>
<script language="javascript">

range = 7;
//images = opener.images;
images = photos;
links = new Array();
counter = 0;

function _changeImage(direction) {
  if (direction == 0) {
    counter --;
    if (counter < 0) { // set list to last 
      counter = images.length - 1;
      while (links_cell.hasChildNodes())  
        links_cell.removeChild(links_cell.lastChild);
      setList(links.length - range, links.length);
    }
  } else if (direction == 1) {
    counter ++;
    if (counter == images.length)
      counter = 0;
    link = links[counter];
    if (counter >= range) {
      //alert("counter >= range! " + counter);
      doomed_link = document.getElementById(counter - range);
      links_cell.removeChild(doomed_link);
      links_cell.appendChild(link);
      spacer = document.createElement("b");
      spacer.appendChild(document.createTextNode(" "));
      links_cell.appendChild(spacer);
    }
    link.setActive();
    if (counter == 0) {
      while (links_cell.hasChildNodes())  
        links_cell.removeChild(links_cell.lastChild);
      setList(0, range);
    }
  }
  var image_url = images[counter];
  document.image_1.src="../images/" + image_url;
  links_cell = document.getElementById("links_list");
}

function changeImage(direction) {
  if (direction == 0)
    counter --;
  else if (direction == 1)
    counter ++;  
  reset();
  var image_url = images[counter];
  document.image_1.src="../images/" + image_url;
}

function showImage(index) {
  var image_url = images[index];
  //alert("showImage(): ../images/" + image_url);
  document.image_1.src="../images/" + image_url;
  counter = index;
  link = links[counter];
  reset();
}

function reset() { 
  //alert("reset() counter: " + counter); 
  if (counter - 3 >= 0 && counter + 4 <= links.length) {
    //alert("counter - 3: " + (counter - 3) + " counter + 4: " + (counter + 4) + "\links.length: " + links.length);
    while (links_cell.hasChildNodes())  
      links_cell.removeChild(links_cell.lastChild);
    setList(counter - 3, counter + 4);
  }
  if (counter > links.length - 4) {
    while (links_cell.hasChildNodes())  
      links_cell.removeChild(links_cell.lastChild);
    setList(links.length - range, links.length);
  }
  link = links[counter];
  link.setActive();
  backLink = document.getElementById("back");
  forwardLink = document.getElementById("forward");
  if (counter == 0)
    backLink.removeAttribute("href");
  else
    backLink.setAttribute("href", "javascript:changeImage(0)");
  if (counter == links.length - 1)
    forwardLink.removeAttribute("href");
  else
    forwardLink.setAttribute("href", "javascript:changeImage(1)");
}

function initList() {
  alert("images.length: " + images.length);
  links_cell = document.getElementById("links_list");
  while (links_cell.hasChildNodes())  
    links_cell.removeChild(links_cell.lastChild);
  if (images.length < range)
    range = images.length;
  for (i = 0; i < images.length; i++) {
    image_link = document.createElement("a");
    image_link.setAttribute("id", i);
    image_link.setAttribute("href", "javascript:showImage(" + i + ")");
    image_link.appendChild(document.createTextNode(i + 1));
    links[i] = image_link;
    if (i < range) {
      links_cell.appendChild(image_link);
      spacer = document.createElement("b");
      spacer.appendChild(document.createTextNode(" "));
      if (i < (range - 1))
        links_cell.appendChild(spacer);
    }
    if (i == 0)
      image_link.setActive();
  }
  showImage(0);
}

function goToFinish() {
  while (links_cell.hasChildNodes())  
    links_cell.removeChild(links_cell.lastChild);
  setList(links.length - range, links.length);
  link = links[links.length - 1];
  link.setActive();
  showImage(links.length - 1);
}

function setList(start, finish) {
  //alert("setList: " + start + ", " + finish);
  links_cell = document.getElementById("links_list");
  for (i = start; i < finish; i++) {
    link = links[i];
    links_cell.appendChild(link);
    spacer = document.createElement("b");
    spacer.appendChild(document.createTextNode(" "));
    if (i < (finish - 1))
      links_cell.appendChild(spacer);
  }
}

</script>

Code (markup):

and the body:

<body onload="initList()">

<table border="1">
<tr>
  <td colspan="4">
    <img name="image_1" src="" height=150 width=250>
  </td>
<tr>  
  <td colspan="4" id="links_list" align="center"></td>
</tr>  
<tr>
  <td align="left">
    <a href="javascript:initList();">start</a>
  </td>
  <td align="left">
    <a href="javascript:changeImage(0);" id="back"><</a>
  </td>
  <td align="right">
    <a href="javascript:changeImage(1);" id="forward">></a>
  </td>
  <td align="right">
    <a href="javascript:goToFinish();">finish</a>
  </td>
</tr>
</table>

</body>

HTML:

"photos" is an array of URLs in "master.js"

Instead of:

image_link.appendChild(document.createTextNode(i + 1));

Code (markup):

I tried:

image_link.innerHTML = (i + 1);

Code (markup):

but it still didn't work in Firefox.

Any help is much appreciate!

M

 

The various calls to setActive are causing the problem with Firefox. Does anyone know how to set a link as active without doing it manually?