09.07.2009, 10:24
|
|
Новичок на форуме
|
|
Регистрация: 09.07.2009
Сообщений: 8
|
|
|
Проблемы с вызовом функции
Привет всем... Изучаю потихоньку 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() прекращает вывод. В данном случае выводится только последняя картинка... Где загвоздка?
|
|
09.07.2009, 10:50
|
 |
Модератор Всея Форума
|
|
Регистрация: 14.05.2009
Сообщений: 4,021
|
|
|
addEventListener - для ИЕ нужет attachEvent
...
Последний раз редактировалось B~Vladi, 09.07.2009 в 12:27.
|
|
09.07.2009, 10:53
|
|
Модератор Всея Форума
|
|
Регистрация: 14.05.2009
Сообщений: 4,021
|
|
И ещё совет: предпочтительнее использовать только одинарные кавычки в коде  |
|
09.07.2009, 11:37
|
|
Модератор Всея Форума
|
|
Регистрация: 14.05.2009
Сообщений: 4,021
|
|
|
Сообщение от pismenov
|
img[i].addEventListener('mouseover',function (e) {Tip(str[i]).call;},false);
|
Насколько я понимаю, у вас при вызове обработчика str[i] - undefined.
Лучше поступить так:
// Создадим в цикле для каждого 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 - уверены, что вызывать нужно так?!
Последний раз редактировалось B~Vladi, 09.07.2009 в 12:27.
|
|
09.07.2009, 11:37
|
|
Модератор Всея Форума
|
|
Регистрация: 14.05.2009
Сообщений: 4,021
|
|
|
Сообщение от pismenov
|
|
не воспринимают
|
Воспринимают  |
|
09.07.2009, 11:51
|
|
Модератор Всея Форума
|
|
Регистрация: 14.05.2009
Сообщений: 4,021
|
|
А можно всё это дело апптимизировать:
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;
}
Последний раз редактировалось B~Vladi, 09.07.2009 в 12:28.
|
|
09.07.2009, 12:00
|
|
Кандидат Javascript-наук
|
|
Регистрация: 04.05.2009
Сообщений: 105
|
|
если не ошибаюсь, вот такой кросс-браузерный вариант:
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(){ /*..*/ });
}
|
|
09.07.2009, 12:08
|
|
Новичок на форуме
|
|
Регистрация: 09.07.2009
Сообщений: 8
|
|
Спасибо большое! Помогло! Теперь работает во всех браузерах.
Реализовал вот так:
<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;
}
?
|
|
09.07.2009, 12:12
|
|
Кандидат Javascript-наук
|
|
Регистрация: 04.05.2009
Сообщений: 105
|
|
|
Цитата:
|
|
А можно поподробнее про эти строки:
|
в статьях |
|
|
|
