Multiple Javascript rollovers

I am trying to do some rollover using Javascript. I know a lot of people say they use css, but this time it will be done in Javascript.

Anyway, I have a lot of problems with this rollover hierarchy. I have a navigation button with five buttons. When you hover over one of the buttons, the button changes color and a title appears below that button. The next part is that the user has to hover over the heading and then ANOTHER image appears with text in it that describes the heading.

So, for example, a button might be a red smile, when you flip it, it turns into a blue smile, and then a headline appears underneath that says "Happy." Then, if you are happy, you will receive a text image describing what it means to be happy. This is exactly what the client wants and the only reason I use an image of the text is because his text uses a unique font.

So, just to show you that I was trying to code this and not look for an answer with no work, here is my code. It seems to work, but it's not great and I'm not that familiar with 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;