onmouseover problem

Jag försökte skapa en meny med knappar som ändrar färgar onmouseover
lyckades få en att funka men så fort jag la till fler så slutade alla funka

<div id="button4">
  <div><a href="index.html"
onMouseOver="handleOver();return true;" 
onMouseOut="handleOut();return true;" 
><img name=imgName width=92 height=26 border=0 
alt="img/red_me.jpg"
src="img/blue_me.jpg"
></a> 
<script language="JavaScript">
<!--
// PRELOADING IMAGES
if (document.images) {
 img_on =new Image();  img_on.src ="img/red_me.jpg"; 
 img_off=new Image();  img_off.src="img/blue_me.jpg"; 
}

function handleOver() { 
 if (document.images) document.imgName.src=img_on.src;
}

function handleOut() {
 if (document.images) document.imgName.src=img_off.src;
}

//-->
</script></div>
</div>

jag tänkte på nån möjlighet att man inte har seprata knappar med text på som i det här fallet utan bara kör en "tom" röd respektive en "tom" blå
om så är fallet kan man lägga javascriptet i en separat sida så som man gör med css.
Nått komando så den hämtar den koden som man gör i css?

Varför inte använda CSS till det här ?

<style type="text/css">
a.menu { background-image: url('img/red_me.jpg'); }
a.menu:hover { background-image: url('img/blue_me.jpg'); }
</style>

<a href="länken" class="menu">Menylänk</a>

<script type="text/javascript" src="fil.js"></script>

fil.js:

if (document.images) {
 img_on =new Image();  img_on.src ="img/red_me.jpg"; 
 img_off=new Image();  img_off.src="img/blue_me.jpg"; 
}

function handleOver(img) { 
 if (document.images) document.images[img].src=img_on.src;
}

function handleOut() {
 if (document.images) document.images[img].src=img_off.src;
}

.html:

onmouseover="handleOver([b]'bild1'[/b])" onmouseout="handleOut([b]'bild1'[/b])"><img [b]name="bild1"[/b]...

onmouseover="handleOver([b]'bild2'[/b])" onmouseout="handleOut([b]'bild2'[/b])"><img [b]name="bild2"[/b]...

Red./ Eller ännu hellre som sl0k föreslår :)

sl0k skrev:

Varför inte använda CSS till det här ?

<style type="text/css">
a.menu { background-image: url('img/red_me.jpg'); }
a.menu:hover { background-image: url('img/blue_me.jpg'); }
</style>

<a href="länken" class="menu">Menylänk</a>

det förslaget lät bäst problemet är att jag har färdiga knappar med text redan skriven på och att jag i det här fallet behöver ha en länktext och texten måste vara lika lång som knappen för hela knappen ska visas. finns det nått sätt att undkomma det?

width: 90px;
lr dyl...

<style type="text/css"> {
width: 92px;
height: 26px; }
a.menu { background-image: url('img/red_me.jpg'); }
a.menu:hover { background-image: url('img/blue_me.jpg'); }
</style>
    <a href="länken" class="menu">Menylänk</a></div>

om dessa nu e satta på rätt ställe funkar det fortfarande inte.
och hur kommer jag ifrån att använda länktexten?

<style type="text/css"> [b].menu[/b]{
width: 92px;.menu
height: 26px; 
[b]display: block;[/b]
}
a.menu { background-image: url('img/red_me.jpg'); }
a.menu:hover { background-image: url('img/blue_me.jpg'); }
</style>
    <a href="länken" class="menu">Menylänk</a></div>

/r Beroende på vad blue_me.jpg och red_me.jpg är för bilder kan det vara händigt att sätta display:block;

bilden blir inte större än vad länk texten är
och även om jag använder   så blir höjden på bilden ändå fel

http://iceyes.se/stuff/test.html

Se min redigering!

nu funkar iallafall längden perfekt på bilden nu återstår det bara höjden den är cirka 16-18px den ska vara 26 sen att första gången man har musen över försvinner allt!
men andra gången så funkar allt som det ska utom att height som sagt inte verkar funka. tesade sätta .menu efter den med men det gick inte

hade smygit sig in ett litet fel i ovanstående.. följande borde fungera bättre..

<style type="text/css">
.menu {
width: 92px;
height: 26px; 
display: block;
}
a.menu { background-image: url('img/red_me.jpg'); }
a.menu:hover { background-image: url('img/blue_me.jpg'); }
</style>

funkar perfekt tack för hjälpen :)