Javascript multiple rollovers

Question

I am trying to do a multi rollover with Javascript. I know a lot of people say to use css, but it's going to be done in Javascript this time around.

Anyway, I am having much trouble with this rollover hierarchy. I have a button image nav with five buttons. When you mouseover one of the buttons, the button changes color AND a heading appears underneath for 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, the button might be a red smile, when you rollover it, it becomes a blue smile and then a heading appears underneath that says Happy. Then if you rollover happy, you get an image of text describing what it means to be happy. This is the way the client wants it and the only reason I am using an image of text, is because his text uses a unique font.

So, just to show you that I have been trying to code this and not looking for answer without the work, here's my code so far. It kind of works, but it's not great and I'm not so familar 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;

Answer 1

Cripes..

You should look into using jQuery.

For example..

$(
    function() {
     $("img.rollover").hover(
      function() {
       this.src = this.src.replace("_org","_over");
      },
      function() {
       this.src = this.src.replace("_over","_org");
      }
     );
    }
)

Inside the functions you can also play around with the visibility and do whatever else you want.