Проблемы с вызовом функции
Привет всем... Изучаю потихоньку javascript. Не могу понять почему не работает данный код:
<html> <head> </head> <body> <img id="myimg" src="kia_spectra_1.jpg"> <img id="myimg2" src="top-left.jpg"> <script type="text/javascript" src="wz_tooltip.js"></script> <script type="text/javascript"> var stroka = 'myimg,myimg2'; var arr = stroka.split(","); for (i=0; i<arr.length; i++) { var img = new Array(); var e = new Array(); var str = new Array(); img[i] = document.getElementById(arr[i]); e[i] = img[i].getAttribute("src"); str[i] = '<img src="'+ e[i] +'" width="100">'; img[i].addEventListener('mouseover',function (e) {Tip(str[i]).call;},false); img[i].addEventListener('mouseout',function (e) { UnTip().call; },false); } </script> </body> </html> В скрипте wz_tooltip.js(http://www.walterzorn.com) описаны функции Tip(string) и UnTip(). Tip() плавно выводит окно с переданной строкой или рисунком, переданном в виде <img src="xxx" width="yyy">. UnTip() прекращает вывод. В данном случае выводится только последняя картинка... Где загвоздка? |
addEventListener - для ИЕ нужет attachEvent
... |
И ещё совет: предпочтительнее использовать только одинарные кавычки в коде;)
|
Я смотрел здесь http://javascript.ru/tutorial/events...deventlistener.
Ни mozilla ни opera addEventListener(img[i],'mouseover',function (e) {Tip(str[i]).call;},false);не воспринимают( |
Цитата:
Лучше поступить так: // Создадим в цикле для каждого img свойство str, которое сохранит строку img[i].str = '<img src="'+ e[i] +'" width="100">'; // и определим обработчик img[i].addEventListener('mouseover',getStr,false); // Создадим ф-цию, которая будет возвращать нам эту строку и вызывать твою ф-цию (вне цикла) function getStr(evt){ evt=evt||event; var target=evt.target||evt.srcElement; Tip(target.str).call; } Теперь массив str не нужен - удаляем соответствующие строки. И ещё... Tip(target.str).call - уверены, что вызывать нужно так?! |
Цитата:
|
А можно всё это дело апптимизировать:
var stroka = 'myimg,myimg2'; var arr = stroka.split(","); var img = new Array(); for (var i=0; i<arr.length; i++){ img[i] = document.getElementById(arr[i]); img[i].addEventListener('mouseover',getStr,false); img[i].addEventListener('mouseover',function(){UnTip().call;},false); } function getStr(evt){ evt=evt||event; var img=evt.target||evt.srcElement; Tip('<img src="'+ img.getAttribute('src') +'" width="100">').call; } |
если не ошибаюсь, вот такой кросс-браузерный вариант:
if(div.addEventListener){// not ie: div.addEventListener('mouseover', function(){ /*..*/ }, false); div.addEventListener('mouseout', function(){ /*..*/ }, false); }else{// ie: div.attachEvent('onmouseover', function(){ /*..*/ }); div.attachEvent('onmouseout', function(){ /*..*/ }); } |
Спасибо большое! Помогло! Теперь работает во всех браузерах.
Реализовал вот так: <html> <head> </head> <body> <img id="myimg" src="kia_spectra_1.jpg"> <img id="myimg2" src="top-left.jpg"> <script type="text/javascript" src="wz_tooltip.js"></script> <script type="text/javascript"> var stroka = 'myimg,myimg2'; var arr = stroka.split(","); for (i=0; i<arr.length; i++) { var img = new Array(); var e = new Array(); img[i] = document.getElementById(arr[i]); e[i] = img[i].getAttribute("src"); img[i].str = '<img src="'+ e[i] +'" width="100">'; if (img[i].addEventListener) { img[i].addEventListener('mouseover',getStr,false); img[i].addEventListener('mouseout',getStrUn,false); } else { img[i].attachEvent('onmouseover',getStr); img[i].attachEvent('onmouseout',getStrUn); } } function getStr(evt){ evt=evt||event; var target=evt.target||evt.srcElement; Tip(target.str); } function getStrUn(evt){ evt=evt||event; var target=evt.target||evt.srcElement; UnTip(); } </script> </body> </html> Ну не работает у меня addEventListener(img[i],'mouseover',function (e) {Tip(str[i]).call;},false);Firefox/3.5, Opera 9.63. А можно поподробнее про эти строки: function getStr(evt){ evt=evt||event; var img=evt.target||evt.srcElement; }? |
Цитата:
|
Часовой пояс GMT +3, время: 02:47. |