Javascript множественные ролловеры

Я пытаюсь сделать несколько одновременных нажатий клавиш с помощью Javascript. Я знаю, что многие люди говорят использовать css, но на этот раз это будет сделано на Javascript.

В любом случае, у меня много проблем с этой иерархией опрокидывания. У меня есть навигационная кнопка изображения с пятью кнопками. Когда вы наводите указатель мыши на одну из кнопок, кнопка меняет цвет И под ней появляется заголовок. Следующая часть заключается в том, что пользователь должен навести указатель мыши на заголовок, а затем появится ДРУГОЕ изображение с текстом, описывающим заголовок.

Так, например, кнопка может быть красной улыбкой, при наведении на нее она превращается в синюю улыбку, а затем под ней появляется заголовок с надписью Happy. Затем, если вы счастливы, вы получите изображение текста, описывающее, что значит быть счастливым. Так хочет клиент, и единственная причина, по которой я использую изображение текста, заключается в том, что в его тексте используется уникальный шрифт.

Итак, чтобы показать вам, что я пытался закодировать это и не искал ответа без работы, вот мой код. Это вроде работает, но не очень хорошо, и я не так хорошо знаком с javascript.

function rollover()
{
  var images = document.getElementsByTagName("img");
  var roll = new RegExp("roll");
  var header = new RegExp("_(?=roll)");
  var text = new RegExp("_(?=text)");
  var simple = new RegExp("simple");
  var currentRoll;
  var preload = [];
  var fileLoc = "images/rollovers/";

  for ( var i=0; i<images.length; i++)
  {
    if (images[i].id.match(roll))
    {
      currentRoll = images[i].id;
      preload[i] = new Image();
      preload[i].src = images[i].id + "_over.gif";
      images[i].onmouseover = function() 
      { 
        var button = this.id;
        this.src = fileLoc + this.id + "_over.gif";

        for ( var i=0; i<images.length; i++)
        {
          if (images[i].id.match(header))
          {
            var temp = images[i].id;
            if (images[i].id == "_" + this.id + "_header")
            {
              images[i].src = fileLoc + this.id + "_header.gif";
              images[i].style.visibility = "visible";
              images[i].onmouseover = function() 
              {
                  for ( var i=0; i<images.length; i++)
                  {
                    if (images[i].id.match(text))
                    {
                      var temp = images[i].id;
                      images[i].src = fileLoc + this.id + "_text.gif";
                      images[i].style.visibility = "visible";
                      break;

                    }
                  }  
              }
              break;
            }
            else
            {
              images[i].src = fileLoc + this.id + "_header.gif";
              images[i].setAttribute("id", 
              images[i].style.visibility = "visible";
              images[i].onmouseover = function() 
              {
                for ( var i=0; i<images.length; i++)
                {
                  if (images[i].id.match(text))
                  {
                    var temp = images[i].id;
                    images[i].src = fileLoc + this.id + "_text.gif";
                    images[i].style.visibility = "visible";
                    break;

                  }
                }  
              }
              break;
            }
          }
        }
        images[i].onmouseout = function() 
        { 
          this.src = fileLoc + this.id + "_org.gif"; 
          for ( var i=0; i<images.length; i++)
          {
            if (images[i].id.match(header))
            {

              images[i].style.visibility = "hidden"
            }
          } 

        }
      }  
    }

    else if (images[i].id.match(simple))
    {
      preload[i] = new Image();
      preload[i].src = images[i].id + "_over.gif";
      images[i].onmouseover = function() 
      {
        this.src = fileLoc + this.id + "_over.gif";  
      }
      images[i].onmouseout = function()
      {
        this.src = fileLoc + this.id + "_org.gif";
      }
    }
  }
}

window.onload = rollover;