alt tag like behavior?

Hi guys,

I am pretty new to DHTML and have a question regarding a specific
behavior. I have created a menu using a friends script. It uses an
input file to read the items for the menu, and creates the links. What
I want to accomplish is that when I rollover the mouse over the
specific button, it displays some text, (like when you rollover the
image, it shows whatever is in the alt tag).
Can this be done without me creating images? I am attaching my files
for you to see. Thanks in advance.

************************************************** *********************
menu.js
************************************************** *********************
var menus = [];

// --- menu class ---
function menu (item_struct, pos, styles) {
// browser check
this.item_struct = item_struct;
this.pos = pos;
this.styles = styles;
this.id = menus.length;
this.items = [];
this.children = [];

this.add_item = menu_add_item;
this.hide = menu_hide;

this.onclick = menu_onclick;
this.onmouseout = menu_onmouseout;
this.onmouseover = menu_onmouseover;
this.onmousedown = menu_onmousedown;

var i;
for (i = 0; i < this.item_struct.length; i++)
new menu_item(i, this, this);
for (i = 0; i < this.children.length; i++)
this.children[i].visibility(true);
menus[this.id] = this;
}
function menu_add_item (item) {
var id = this.items.length;
this.items[id] = item;
return (id);
}
function menu_hide () {
for (var i = 0; i < this.items.length; i++) {
this.items[i].visibility(false);
this.items[i].switch_style('onmouseout');
}
}
function menu_onclick (id) {
var item = this.items[id];
return (item.fields[1] ? true : false);
}
function menu_onmouseout (id) {
this.hide_timer = setTimeout('menus['+ this.id +'].hide();',
this.pos['hide_delay'][this.active_item.depth]);
if (this.active_item.id == id)
this.active_item = null;
}
function menu_onmouseover (id) {
this.active_item = this.items[id];
clearTimeout(this.hide_timer);
var curr_item, visib;
for (var i = 0; i < this.items.length; i++) {
curr_item = this.items[i];
visib = (curr_item.arrpath.slice(0, curr_item.depth).join('_') ==
this.active_item.arrpath.slice(0, curr_item.depth).join('_'));
if (visib)
curr_item.switch_style (
curr_item == this.active_item ? 'onmouseover' : 'onmouseout');
curr_item.visibility(visib);
}
}
function menu_onmousedown (id) {
this.items[id].switch_style('onmousedown');
}
// --- menu item Class ---
function menu_item (path, parent, container) {
this.path = new String (path);
this.parent = parent;
this.container = container;
this.arrpath = this.path.split('_');
this.depth = this.arrpath.length - 1;
// get pointer to item's data in the structure
var struct_path = '', i;
for (i = 0; i <= this.depth; i++)
struct_path += '[' + (Number(this.arrpath[i]) + (i ? 2 : 0)) + ']';
eval('this.fields = this.container.item_struct' + struct_path);
if (!this.fields) return;

// assign methods
this.get_x = mitem_get_x;
this.get_y = mitem_get_y;
// these methods may be different for different browsers (i.e. non
DOM compatible)
this.init = mitem_init;
this.visibility = mitem_visibility;
this.switch_style = mitem_switch_style;

// register in the collections
this.id = this.container.add_item(this);
parent.children[parent.children.length] = this;

// init recursively
this.init();
this.children = [];
var child_count = this.fields.length - 2;
for (i = 0; i < child_count; i++)
new menu_item (this.path + '_' + i, this, this.container);
this.switch_style('onmouseout');
}
function mitem_init() {
document.write (
'<a id="mi_' + this.container.id + '_'
+ this.id +'" class="m' + this.container.id + 'l' + this.depth
+'o" href="' + this.fields[1] + '" style="position: absolute; top:
'
+ this.get_y() + 'px; left: ' + this.get_x() + 'px; width: '
+ this.container.pos['width'][this.depth] + 'px; height: '
+ this.container.pos['height'][this.depth] + 'px; visibility:
hidden;'
+' background: black; color: white; z-index: ' + this.depth + ';" '
+ 'onclick="return menus[' + this.container.id + '].onclick('
+ this.id + ');" onmouseout="menus[' + this.container.id +
'].onmouseout('
+ this.id + ');" onmouseover="menus[' + this.container.id +
'].onmouseover('
+ this.id + ');" onmousedown="menus[' + this.container.id +
'].onmousedown('
+ this.id + ');"><div class="m' + this.container.id + 'l' +
this.depth + 'i">'
+ this.fields[0] + "</div></a>\n"
);
this.element = document.getElementById('mi_' + this.container.id +
'_' + this.id);
}
function mitem_visibility(make_visible) {
if (make_visible != null) {
if (this.visible == make_visible) return;
this.visible = make_visible;
if (make_visible)
this.element.style.visibility = 'visible';
else if (this.depth)
this.element.style.visibility = 'hidden';
}
return (this.visible);
}
function mitem_get_x() {
var value = 0;
for (var i = 0; i <= this.depth; i++)
value += this.container.pos['block_left'][i]
+ this.arrpath[i] * this.container.pos['left'][i];
return (value);
}
function mitem_get_y() {
var value = 0;
for (var i = 0; i <= this.depth; i++)
value += this.container.pos['block_top'][i]
+ this.arrpath[i] * this.container.pos['top'][i];
return (value);
}
function mitem_switch_style(state) {
if (this.state == state) return;
this.state = state;
var style = this.container.styles[state];
for (var i = 0; i < style.length; i += 2)
if (style[i] && style[i+1])
eval('this.element.style.' + style[i] + "='"
+ style[i+1][this.depth] + "';");
}
// that's all folks

************************************************** *********************
menu_items.js
************************************************** *********************
// menu_items.js file
// comments block here

var MENU_ITEMS =[
["Cascade ", "cascade.html"]
];

************************************************** *********************
menu_tpl.js
************************************************** *********************
/* --- geometry and timing of the menu --- */
var MENU_POS = new Array();

// item sizes for different levels of menu
MENU_POS['height'] = [22];
MENU_POS['width'] = [175];

// menu block offset from the origin:
// for root level origin is upper left corner of the page
// for other levels origin is upper left corner of parent item
MENU_POS['block_top'] = [50];
MENU_POS['block_left'] = [15];

// offsets between items of the same level
MENU_POS['top'] = [23];
MENU_POS['left'] = [0];

// time in milliseconds before menu is hidden after cursor has gone
out
// of any items
MENU_POS['hide_delay'] = [200];

/* --- dynamic menu styles ---
note: you can add as many style properties as you wish but be not all
browsers
are able to render them correctly. The only relatively safe properties
are
'color' and 'background'.
*/

var MENU_STYLES = new Array();

// default item state when it is visible but doesn't have mouse over
MENU_STYLES['onmouseout'] = [
'background', ['#8ec5f8'],
'color', ['#ffffff'],
];

// state when item has mouse over it
MENU_STYLES['onmouseover'] = [
'background', ['#569ee2'],
'color', ['#000000'],
];

// state when mouse button has been pressed on the item
MENU_STYLES['onmousedown'] = [
'background', ['#569ee2'],
'color', ['#000000'],
];

************************************************** *********************
And this is how I call it in the left.html file
************************************************** *********************

<div style="height: 300px;">&nbsp;
<script language="JavaScript" src="menu.js"></script>
<script language="JavaScript" src="menu_items.js"></script>
<script language="JavaScript" src="menu_tpl.js"></script>
<script language="JavaScript">
<!--//
new menu (MENU_ITEMS, MENU_POS, MENU_STYLES);
//-->
</script>
</div>
************************************************** *********************

Thanks again.