hi there all!
ok i am well out of my depth here so any help would be greatly appreciate.
I am trying to build a website and dont know much about html and coding i am learning by diving into the deep end, finding code on the internet and trying to hack them to work for me but only with partial success till now...

here is my test page:
its only the start, each menu item will bring on mouse click a list of subitems in the cell above - this i have figured out how to do (as you can see by clicking 'contact')

Now what i am strugling with is to get the menu items highlight on hover (or onmouseover) - i have a bad code to that extent on the menu item 'Showreel'.

I am using imagemap to frame the area around the words for the click element but i want all the menus to be grey and when the mouse hover above the words the text becomes brighter...

hopefully i explained it well enough... any ideas?

the source code you can see from your browser, the css code is:


* {
margin:0;
padding:0;
}


.sm {
list-style:none;
width:480px;
height:35px;
display:block;
overflow:hidden;
}


.sm li {
float:left;
display:inline;
overflow:hidden;
}


link {
color : #c20003;
}

img
{ border-style: none;
}


a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: }
the javascript page:

var slideMenu=function(){
var sp,st,t,m,sa,l,w,sw,ot;
return{
build:function(sm,sw,mt,s,sl,h){
sp=s; st=sw; t=mt;
m=document.getElementById(sm);
sa=m.getElementsByTagName('li');
l=sa.length; w=m.offsetWidth; sw=w/l;
ot=Math.floor((w-st)/(l-1)); var i=0;
for(i;i<l;i++){s=sa[i]; s.style.width=sw+'px'; this.timer(s)}
if(sl!=null){m.timer=setInterval(function(){slideMenu.slide(sa[sl-1])},t)}
},
timer:function(s){s.onmouseover=function(){clearInterval(m.timer);m.timer=setInterval(function(){sli deMenu.slide(s)},t)}},
slide:function(s){
var cw=parseInt(s.style.width,'10');
if(cw<st){
var owt=0; var i=0;
for(i;i<l;i++){
if(sa[i]!=s){
var o,ow; var oi=0; o=sa[i]; ow=parseInt(o.style.width,'10');
if(ow>ot){oi=Math.floor((ow-ot)/sp); oi=(oi>0)?oi:1; o.style.width=(ow-oi)+'px'}
owt=owt+(ow-oi)}}
s.style.width=(w-owt)+'px';
}else{clearInterval(m.timer)}
}
};
}();