DOMでのイベントの割り当ては、IEではattachEvent、GeckoやOperaではaddEventListenerを使うため、いちいちブラウザごとに振り分けなければなりません。
そこで、振り分けを行ってイベントを割り当てる関数を作成します。

function AddEvent() {
  if(arguments.length<3) return;
  var args=new Array();
  for(var i=0;i<arguments.length;i++){
    args.push(arguments[i]);
  }
  var en = args.shift();
  var ev = args.shift();
  var func =args.shift();
  var el=document.getElementById(en);
  if(!el) return;
  for(var i=0;i<args.length;i++){
    if(args[i]==='this'){
      args[i]=el;
    }
  }
  ev=ev.replace(/^on/i,'');
  ev=ev.toLowerCase();
  if(!!el.addEventListener){
    el.addEventListener(ev, function(){func.apply(this,args)},false);
  }else if(!!el.attachEvent){
    el.attachEvent('on'+ev, function(){func.apply(this,args)});
  }else{
//  非DOMブラウザは未対応
  }
}

AddEvent( "イベントを割り当てたいオブジェクト" , "イベントの種類" , "呼び出す関数名" , 呼び出す関数への引数（可変長）);
という形で利用できます。
オブジェクトのclassNameを変更して、スタイルを変更する関数、ChgStyle()を割り当てる場合は、以下のようになります。

<style type="text/css">
<!--
.on {
background-color: #ace8db;
color: #ff0000;
}
.off {
background-color: #ffffff;
color: #000000;
}
-->
<div id="test1" class="off" >テスト１</div>

<script type="text/javascript"><!--
// ChgStyle関数。引数のHTMLエレメントのスタイル（スタイルシートのクラス名）を変更する
funtion ChgStyle(div, cName){
  div.className=cName;
}
// ページのロードが完了したときに実行
window.onload=function(){
  var div=document.getElementById('test1'); // ID='test1'のエレメントを取得
  AddEvent(div, 'mouseover', ChgStyle, div, 'on'); // AddEventを呼び出して、mouseoverとmouseoutにそれぞれChgStyleを割り当てる。
  AddEvent(div, 'mouseout', ChgStyle, div, 'off');
}

ここにマウスカーソルを重ねると色が変わります。

別の場所にある画像を変更するように変更したものです。

function ChgImage(img, newImage){
  img.src=newImage;
}

window.onload=function(){
  var div=document.getElementById('test2');
  var img=document.getElementById('the_Image');
  AddEvent(div, 'mouseover', ChgImage, img, 'mouseover.jpg');
  AddEvent(div, 'click', ChgImage, img, 'click.jpg');
  AddEvent(div, 'mouseout', ChgImage, img, 'image.jpg');
}

この場所をマウスを重ねたり、クリックしてください。

download : addevent.js