This is a fragment of (*non-working*) code that illustrates the key concepts
in creating JavaScript code that writes HTML.  The key concepts are:
   (a) A class: OptionX() from which you create objects
   (b) A function, OptionX_over that gets attached to each object
   (c) A prototype declaration, OptionX.prototype.over, that attaches it
   (d) A loop that calss "new OptionX" to create the objects

function OptionX(document, label) {  //^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    this.highlighted  = false;           // Mouse is not over icon now
    var n = document.images.length;      // for 1st object, n=0
    document.write(
      ' <A HREF=""                                                      '
    + ' onMouseOver="document.images['+n+'].obj.over(); return true;"  >'
    + ' >                                                               ' 
    + '      <IMG SRC="' + OptionX.iconNames[0] + '>'
    + ' </A>                                                            '
    );
    this.image = document.images[n];     // refers to <IMG SRC...> above
    this.image.obj = this;               // refers to optionX[i]
} 
function OptionX_over() {      // Mouse is over icon ^^^^^^^^^^^^^^^^
    this.image.src   = OptionX.iconNames[1];
    this.highlighted = true;
}   // vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv

OptionX.iconNames[0] = "Images/icon0.gif";  // not highlighted
OptionX.iconNames[1] = "Images/icon1.gif";  // not highlighted
   
OptionX.prototype.over = OptionX_over;  // Declare functions

for ( i = 0; i < option_label.length; i++ )
    optionX[i] = new OptionX(document,  option_label[i]);

NOTE: here is what the HTML output looks like:
<A HREF="" onMouseOver="document.images[0].obj.over(); return true" >
     <IMG SRC= OptionX.iconNames[0]>
</A>