Add event listener in javascript for IE 7 -

i want make list of menu using images. each menu has 2 images (filename.jpg & filename_active.jpg). everytime put mouse on image, image change other one. works okay in firefox , chrome, have problems in ie 7 , lower. problem is, javascript read last part (in case, read third menu only). code show below part of javascript code in ie. let me show code :

html :

<ul> <li class="caresoul_menu active" id="menuli_first"><a href="first.php"><img src="img_first_active.jpg" /></a></li> <li class="caresoul_menu" id="menuli_two"><a href="two.php"><img src="img_two.jpg" /></a></li> <li class="caresoul_menu" id="menuli_three"><a href="three.php"><img src="img_three.jpg" /></a></li> 

javascript :

var caresoul_menu = dom.getelementsbyclassname('caresoul_menu', 'li'); if(caresoul_menu.length > 0) {    for(var im in caresoul_menu) {       if (caresoul_menu[im].attachevent) {          caresoul_menu[im].attachevent('onmouseover', function(){             var liid = caresoul_menu[im].getattribute('id').split('menuli_')[1];             caresoul_menu[im].firstchild.firstchild.setattribute('src','/image/'+liid+'_active.png');          })       }    } } 

i'll explain: when mouseover event fired, for loop has ended im variable has last known value , value same <li> elements. try like:

  if (caresoul_menu[im].attachevent) {      (function (that) {         that.attachevent('onmouseover', function(){            var liid = that.getattribute('id').split('menuli_')[1];            that.firstchild.firstchild.setattribute('src','/image/'+liid+'_active.png');         });      })(caresoul_menu[im]);   } 

do really need use attachevent? if you'd attach event listeners dom0 way (element.onmouseover = function(){}), use this keyword in event listener.