<ul id="nav">
  <li><a href="#">These aren't images!</a></li>
  <li><a href="#">And they aren't made with flash!</a></li>
  <li><a href="#">It's all dynamic javascript!</a></li>
</ul>

#nav {
  margin:1em;
  list-style:none;
}
#nav a {
  font-size:24px;
  font-weight:bold;
  color:#f60;
  text-decoration:none;
  position:relative;
}
#nav a span.hover {
  color:#06f;
  position:absolute;
  top:0;
  left:0;
  cursor:pointer;
}

window.addEvent('load', function () {
  $$("#nav li a").each( function (el) {
      var height = el.offsetHeight;
      var width = el.offsetWidth;
      var mid = (width / 2).round();
      var hover = new Element('span', {
        "class": 'hover',
        "styles": {
          "clip": [0,mid,height,mid]
        },
        "text": el.get('text'),
        "tween": {
          "link": 'cancel',
          "duration": 600,
          "transition": 'quint:out'
        }
      }).inject(el, 'inside');
 
      el.addEvents({
        "mouseover": function () {
          hover.tween('clip', [0, width, height, 0].join(' '));
        },
        "mouseout": function () {
          hover.tween('clip', [0, mid, height, mid].join(' '));
        }
      });
    });
});