I am trying to display divs when hovering over thumb-nails and/or both when tabbing onto them. If I stick to my mouse, the popups seem to work OK - if I start with a tab press

I can show the popops also (foward only - no shift + tab yet). Any help getting them to play well together?

    <script type="text/javascript">



// Note:  the below is being run from an onmouseover on a asp:HyperLink at the moment



function onhovering_and_tabbingon2() {



        var active_hover = 0;

        var num_of_thumb;



            // set the default focus onto the first thumb-nail and make its popup display

            document.getElementById('link_no' + active_hover).focus(); // set focus on the first thumb

            $('#pop' + active_hover).toggleClass('popup'); // show its popup as it is hidden





        // for when hovering over the thumbs

            $(".box img").hover(  // so as to effect only images/thumb-nails within divs of class=box when hovering over them

  function () {



      // test for if the image is a thumb-entry and not a popup image - of class=thumbs2

        thumb = $(this).attr('class');

       if (thumb != "thumbs2") { 



      // I need to add/toggle the class here to a "div" and not to the image being hovered on, a div with text that corrosponds to the hovered on image though

      // so grab the number of the thumb_entry -  to use to id the div. 

  num_of_thumb = $(this).attr('id').replace('thumb_entry_No', '');

      // find the div with id 'pop' + num_of_thumb, and toggleClass on it

      $('#pop' + num_of_thumb).toggleClass('popup'); // shows the hovered on pic's popup



      // move the focus to the hovered on pic's a tag ??????

  document.getElementById('link_no' + num_of_thumb).focus();





      // if the previous popup that was showing was in box2.. 

      if (active_hover == 1 || active_hover% 2 == 1) { 

          $('#pop' + active_hover).toggleClass('popup4_line2');

      }



      else {

      // remove/toggle the previous active popup's visibility 

          $('#pop' + active_hover).toggleClass('popup'); 

     }



      // set the new active_hover to num_of_thumb

      active_hover = num_of_thumb;





 }

  },

  function () {



  }



);


// same thing again - but for my second row/line of entries/thumb-nails...

  $(".box2 img").hover(  // so as to effect only images/thumbs within divs of class=box2

  function () {

      // test if the image is a thumb-entry and not a popup image

      thumb = $(this).attr('class');

      if (thumb != "thumbs2") {





         // I need to add the class here to a "div" and not to the image being hovered on, a div that corrosponds to the hovered on image though

          // so grab the number of the thumb_entry being hovered on, so as to id the div. 

          num_of_thumb = $(this).attr('id').replace('thumb_entry_No', '');

          // find the div with id='pop' + num_of_thumb, and toggleClass on it

          $('#pop' + num_of_thumb).toggleClass('popup4_line2');



          // move the focus to the hovered on pic's a tag ??

          document.getElementById('link_no' + num_of_thumb).focus();



          // if the previous popup that was showing was in box..  // or if the active_hover is even (modulus)

          if (active_hover == 0 || active_hover % 2 == 0) { 

              $('#pop' + active_hover).toggleClass('popup');

          }



          else {



              // remove the previous active visible popup

              $('#pop' + active_hover).toggleClass('popup4_line2');



          }

          // set the new active_hover to num_of_thumb

          active_hover = num_of_thumb;



      }

 },

  function () {

  }

 );





  // todo: I would like to try to show the popups when tabbing through the thumb-nails also

 // but am lost...



document.onkeyup = keypress; // ????



function keypress() {

   //  alert("The key pressed was: " + window.event.keyCode);

    if (window.event.keyCode == "9") { 

    //alert("The tab key was pressed!");





        active_hover = active_hover + 1;



        // for tabbing into box 2 (odd numbers) 

        if (active_hover == 1 || active_hover % 2 == 1) {  



        // toggle visibility of previous popup

           $('#pop' + (active_hover - 1)).toggleClass('popup');

         // toggle visibility of current popup

            $('#pop' + active_hover).toggleClass('popup4_line2');



            //

         }



        else {

        // for tabbing into box from box2 

        // toggle visibility of previous popup

        $('#pop' + (active_hover - 1)).toggleClass('popup4_line2');

        // toggle visibility of current popup

        $('#pop' + active_hover).toggleClass('popup');



  //

        }



        // ??????

      //



        // if (window.event.keyCode == "shift&9") { }

    }

}





}







    </script>