ToolTip bei MouseOver

[Elayna]

Hallo!

Ich stecke total fest! (Newbie)
Folgendes Problem:
Bei mehreren verschiedenen Button soll jeweils ein anderer erklärender Text erscheinen, wenn der Benutzer mit der Mouse darüberfährt. Gleichzeitig sollen die Button auch als Links fungieren. Bis jetzt habe ich ein Script und die Button in der gewünschten Anordnung.

<script type="text/javascript">

ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
v6 = (document.getElementById)? true:false

// Layer anzeigen
function showlayer(layerid)
  {
  if (ns4) document.layers[layerid].visibility = "show"
  else if (v6) document.getElementById(layerid).style.visibility = "visible";
  else if (ie4) document.all[layerid].style.visibility = "visible"
  }

// Layer verstecken
function hidelayer(layerid)
  {
  if (ns4) document.layers[layerid].visibility = "hide"
  else if (v6) document.getElementById(layerid).style.visibility = "hidden";
  else if (ie4) document.all[layerid].style.visibility = "hidden"
  }

</script>

<!--Button-->

<div style="position:absolut;margin-top:0px;margin-left:20;">

<a href="irgendwohin" onmouseover="showlayer('tip01');" onmouseout="hidelayer('tip01');"><img src="Button1.gif" width="122" height="78" border="0" alt="1" vspace="30"></a>

<img src="Button2.gif" width="122" height="78" border="0" alt="2" vspace="25">
<img src="Button3.gif" width="122" height="78" border="0" alt="3" vspace="20">
<img src="Button4.gif" width="122" height="78" border="0" alt="4" vspace="15">
<img src="Button5.gif" width="122" height="78" border="0" alt="5" vspace="10">
</div>

Aber wo oder wie muß ich den erklärenden Text für die Buttons definieren.

Meine Idee war:

<div id="tip01" style="position:absolute; left: 10px; top:20px; width:100px;">Tooltipp-Text</div>

Aber wo? Oder ist das alles sowieso falsch?

Bin für jede Hilfe dankbar!!!

Ciao Elayna