Is there a way to number my javascript functions in a loop?

Question

Still a beginner in php and javascript but this forum is helping a lot...thanks.

I have a gallery of matched side my side photos (each photo + username + personal statement = ONE unit and contained in a table cell....info is fetched from SQL database as $sql1 and $sql2 below via a 'while' loop; I set a limit = 50 pairs of photos in gallery)....gallery displays perfectly. However, I thought I would make it more user interactive by placing a green outline around the unit onmouseover of an image by user. My test case (using a green outline) works when manually setting ALL variables in a script as follows (shown here with two functions for both GreenBorder and NoBorder in script):

<?php $i=1;


    WHILE (($row = mysql_fetch_assoc(**$sql1**)) && ($drow =   
    mysql_fetch_assoc(**$sql2**))) {

    echo "<script>

          var Outline = new Array();
          for (j=1; j<50; j++) {
          Outline[j] = j;
                               }  


          function GreenBorder1() { 
          document.getElementById('X'+Outline[1]).style.outline = '#00CC00 solid  
          thick';            
          }
          function NoBorder1() { 
          document.getElementById('X'+Outline[1]).style.outline = 'none';              
          }
          function GreenBorder2() { 
          document.getElementById('X'+Outline[2]).style.outline = '#00CC00 solid   
          thick';
          }
          function NoBorder2() { 
          document.getElementById('X'+Outline[2]).style.outline = 'none';
          }

          </script>";

    //Lots of code 

    echo "<td id=\"X".$i."\">";

    //Lots of Code 

    echo "<img src=\"images/**image**.png\" onmouseover=\"GreenBorder".$i."(this)\"  
    onmouseout=\"NoBorder".$i."(this)\">";
    echo "</td>";

    //Lots of Code 


    $i++;
    } // End while
 ?>

Clearly I would prefer to not write 50 functions of the type GreenBorder(number)() and NoBorder(number)() (actually 200 total functions since 50 pairs of photos with GreenBorder or NoBorder). I was looking for some way to do something with my script like the following (my thinking was each run through the 'for' loop would assign a different function number j to GreenBorder and NoBorder, which would match to a specific id also of number j that matched the function number j):

          echo "<script> //I will name this *script2*

          var Outline = new Array();
          for (**j**=1; **j**<50; **j**++) {
          Outline[**j**] = **j**;

          function GreenBorder**j**() { 
          document.getElementById('X'+Outline[**j**]).style.outline = '#00CC00 solid  
          thick';
          }
          function NoBorder**j**()   { 
          document.getElementById('X'+Outline[**j**]).style.outline = 'none';
          }

          }
          </script>";

I tried in a variety of ways to do this (including writing my function names as GreenBorder.j(), GreenBorder+j(), and GreenBorder'j'() and others, including the use of brackets) and have researched; I found this link on the site:

Javascript Array of Functions

but this link's methods all seem to involve actually writing 200 functions (which, at the end of the day, I would do if necessary; my original script should also work). Any way to make the function as compact as I am suggesting in script2 by numbering the functions in a loop?

Answer 1

(Assuming that applying the green border is an experiment so you don't want to use CSS. Otherwise, CSS is the way to go here)

From what I understand, this is what you want to do.

1. You have a unit which is composed of an image and text inside a table cell (TD)
2. When you hover over the image, you want the TD to have an outline

You only need to write one set of functions to do this.

function GreenBorder(el) {
    //get the parent of whatever node is passed in
    el.parentNode.style.outline = '#00CC00 solid thick';
}

function NoBorder(el) {
    el.parentNode.style.outline = 'none';
}

Your image markup should be like this

<img src="path/to/image" onmouseover="GreenBorder(this)"  onmouseout="NoBorder(this)" >

Here's a fiddle of it - http://jsfiddle.net/5Y6EK/

Simply put, you pass in the currenty hovered image to your function, which modifies the parent node by adding and removing the outline. This assumes that your image is directly under the TD element.

You might want to follow up this experiment by looking at unobtrusive javascript.

Here are some resources

http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

http://www.ibm.com/developerworks/library/wa-aj-unobtrusive/

The IBM article uses jQuery as examples, this is a library worth looking at - http://jquery.com/