How is this done? (JavaScript or else?)

I somehow found this webpage and was absolutely stunned by the navigation bar. www.webdesignerwall.com

When you put your mouse over "Home", "About" or "Jobs" menu options, you get that awesome rollover effect in the brown field above. I like that very much and had a similar idea, but being an amateur, I can't really say what type of programming is that. I would say it uses Ajax or JavaScript per se, but I'd like some of you to explain it to me, or even share some similar examples.

Thank you

Solution

This is done by CSS. It places an extra <span> into every <a> link element. With CSS <span>s are hidden and positioned correctly above the menu elements (absolute). When one of the link is hovered the new style applies to the correct <span> which makes it visible.

HTML

<ul id="nav"> 
  <li id="nav-home"><a href="/>Home<span></span></a></li> 
  <li id="nav-about"><a href="/about/">About<span></span></a></li> 
  <li id="nav-jobs"><a href="/jobs/">Jobs<span></span></a></li> 
</ul>

CSS

#nav span {
 display: none;      /* hidden by default */
 position: absolute;
}

#nav a:hover span {  /* link:hover */
 display: block;     /* makes one of them visible */
}

#nav-home span {
 background: url(images/home-over.gif) no-repeat;
 width: 168px;   /* each has it's own image */
 height: 29px;   /* dimensions */
 top: -30px;     /* and coordinates */
 left: 35px;
}

#nav-about span {
 background: url(images/about-over.gif) no-repeat;
 width: 157px;
 height: 36px;
 top: -36px;
 left: 90px;
}
/* ... */