マウスオーバー(背景画像)

.j1-box      { text-align: center }
.j1-box1     { margin:0px auto;
               text-align:left;
               width:300px;
             }
.j1          { float: left;
               width:100px;
               background: url(images/e0.gif);
               margin-right: 1px;
               text-align: center;
               height: 30px;
             }
.j11         { margin-top: 9px }
a.menu       { color: #fff;
               text-decoration: none;
               padding: 9px 0px;
               width: 100px;
               height: 21px;
               display: block;
             }
a:hover.menu { color: #039 }
a:active.menu{ color: #900 }
.j1-moji     { clear: left; padding:5px }

var img = new Array();
img[0]=new Image();img[0].src="images/e0.gif";
img[1]=new Image();img[1].src="images/e1.gif";

function b(x,y){
 if(document.getElementById){
  document.getElementById(x).style.backgroundImage=
   'url('+img[y].src+')';
 }
 else if(document.all){
  document.all(x).style.backgroundImage=
   'url('+img[y].src+')';
 }
}

<div class="j1-box">
 <div class="j1-box1">
  <div id="um1" class="j1">
   <div class="j11">
    <a href="#" onMouseOver="b('um1','1')"
     onMouseOut="b('um1','0')" class="menu">
     menu1</a></div>
  </div>
  <div id="um2" class="j1">
   <div class="j11">
    <a href="#" onMouseOver="b('um2','1')"
     onMouseOut="b('um2','0')" class="menu">
     menu2</a></div>
  </div>
  <div id="um3" class="j1">
   <div class="j11">
    <a href="#" onMouseOver="b('um3','1')"
     onMouseOut="b('um3','0')" class="menu">
     menu3</a></div>
  </div>
  <div class="j1-moji">JavaScriptに〜</div>
 </div>
</div>