Проблемы с вызовом функции
Привет всем... Изучаю потихоньку 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, время: 01:14. |