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.
Comments
Post a Comment