I have a gallery where a user can click on a thumbnail to view a larger version of that thumbnail in a separate div, on the same page (this uses ajax so the page does not refresh).

I'm trying to use Javascript to handle the border image of the thumbnails, which glow when you roll over them (easy enough). The thing is, I need the border to stay glowing when a user clicks on it, until they click on another thumbnail. Here's the javascript I've come up with thusfar:

function toggle (one,two,three){
    
    var on = document.getElementById(one);
    var off = document.getElementById(two);
    var offf = document.getElementById(three);
    
    on.onmouseover="";
    on.onmouseout="";
    on.src="../images/thumb_layover_on.png";
    
    omo(off);
    omo(offf);

}

function omo (toggler){

    document.getElementById(toggler).onmouseover="this.src='../images/thumb_layover_on.png'";
    document.getElementById(toggler).onmouseout="this.src='../images/thumb_layover.png'";
    document.getElementById(toggler).src="../images/thumb_layover.png";

}

There are only 3 thumbnails, and there will always be only 3, so I don't have to worry about that. Here's the thumbnail HTML code:

         <div class="thumb" style="background-image:url(<?=$prefix?>cases/<? echo $case; ?>/thumb1.jpg)">
           <a style="cursor:pointer" onClick="javascript:ajaxpage('<?=$prefix?>cases/img.php?img=1&amp;case=<? echo $case; ?>', 'ajaxdiv');
           javascript:toggle('thumb1', 'thumb2', 'thumb3');" >
             <img id="thumb1" src="<?=$prefix?>images/thumb_layover.png" border="0" alt="<? echo $case; ?>"
             onmouseover="javascript:this.src='<?=$prefix?>images/thumb_layover_on.png';"
             onmouseout="javascript:this.src='<?=$prefix?>images/thumb_layover.png';" />
           </a>
         </div>
         <div class="thumb" style="background-image:url(<?=$prefix?>cases/<? echo $case; ?>/thumb2.jpg); margin-left:25px; margin-right:25px;">
           <a style="cursor:pointer" onClick="javascript:ajaxpage('<?=$prefix?>cases/img.php?img=2&amp;case=<? echo $case; ?>', 'ajaxdiv');
           javascript:toggle('thumb2', 'thumb1', 'thumb3');" >
             <img id="thumb2" src="<?=$prefix?>images/thumb_layover.png" border="0" alt="<? echo $case; ?>"
             onmouseover="javascript:this.src='<?=$prefix?>images/thumb_layover_on.png';"
             onmouseout="javascript:this.src='<?=$prefix?>images/thumb_layover.png';" />
           </a>
         </div>
         
         <div class="thumb" style="background-image:url(<?=$prefix?>cases/<? echo $case; ?>/thumb3.jpg)">
           <a style="cursor:pointer" onClick="javascript:ajaxpage('<?=$prefix?>cases/img.php?img=3&amp;case=<? echo $case; ?>', 'ajaxdiv');
           javascript:toggle('thumb3', 'thumb1', 'thumb2');" >
             <img id="thumb3" src="<?=$prefix?>images/thumb_layover.png" border="0" alt="<? echo $case; ?>"
             onmouseover="javascript:this.src='<?=$prefix?>images/thumb_layover_on.png';"
             onmouseout="javascript:this.src='<?=$prefix?>images/thumb_layover.png';" />
           </a>
         </div>

For some reason, the onmouseover elements aren't getting put back into place, nor is the original border image replacing the new one (as should be happening in the function omo). So once you click on a thumbnail, the previously highlighted thumbnail isn't returning to it's original "onmouseover, onmouseout" state.

What's wrong with my code? Any feedback will help, thanks!

There are multiple issues:
1) You don't need the "javascript:" pseudo-protocol in inline HTML event attributes. This probably isn't breaking anything in most browsers, but I'm not sure about the other browsers.

2) In your function omo(), you don't need to do another document.getElementById(), because you've already taken care of that in the calling function. The toggler value that is being passed in is actually already the element you need.

3) Finally, you cannot set events to a string in the JavaScript. You have to set it to a event handler function.

I would do something like the following for the javascript:

function toggle (one,two,three){
    
    var on = document.getElementById(one);
    var off = document.getElementById(two);
    var offf = document.getElementById(three);
    
    on.onmouseover="";
    on.onmouseout="";
    on.src="../images/thumb_layover_on.png";
    
    omo(off);
    omo(offf);

}

function omo (toggler){

    toggler.onmouseover=function(){ this.src='../images/thumb_layover_on.png'; };
    toggler.onmouseout=function(){ this.src='../images/thumb_layover.png'; };
    toggler.src="../images/thumb_layover.png";

}

If you want, check out http://www.quirksmode.org/js/introevents.html and http://www.quirksmode.org/js/events_tradmod.html for more info on event handling.