Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.07.2009, 10:24
Новичок на форуме
Отправить личное сообщение для pismenov Посмотреть профиль Найти все сообщения от pismenov
 
Регистрация: 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() прекращает вывод. В данном случае выводится только последняя картинка... Где загвоздка?
Ответить с цитированием
  #2 (permalink)  
Старый 09.07.2009, 10:50
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 14.05.2009
Сообщений: 4,021

addEventListener - для ИЕ нужет attachEvent
...

Последний раз редактировалось B~Vladi, 09.07.2009 в 12:27.
Ответить с цитированием
  #3 (permalink)  
Старый 09.07.2009, 10:53
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 14.05.2009
Сообщений: 4,021

И ещё совет: предпочтительнее использовать только одинарные кавычки в коде
Ответить с цитированием
  #4 (permalink)  
Старый 09.07.2009, 11:06
Новичок на форуме
Отправить личное сообщение для pismenov Посмотреть профиль Найти все сообщения от pismenov
 
Регистрация: 09.07.2009
Сообщений: 8

Я смотрел здесь http://javascript.ru/tutorial/events...deventlistener.
Ни mozilla ни opera
addEventListener(img[i],'mouseover',function (e) {Tip(str[i]).call;},false);
не воспринимают(
Ответить с цитированием
  #5 (permalink)  
Старый 09.07.2009, 11:37
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 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.
Ответить с цитированием
  #6 (permalink)  
Старый 09.07.2009, 11:37
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 14.05.2009
Сообщений: 4,021

Сообщение от pismenov
не воспринимают
Воспринимают
Ответить с цитированием
  #7 (permalink)  
Старый 09.07.2009, 11:51
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 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.
Ответить с цитированием
  #8 (permalink)  
Старый 09.07.2009, 12:00
Кандидат Javascript-наук
Отправить личное сообщение для `p r o x y Посмотреть профиль Найти все сообщения от `p r o x y
 
Регистрация: 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(){ /*..*/ });
}
Ответить с цитированием
  #9 (permalink)  
Старый 09.07.2009, 12:08
Новичок на форуме
Отправить личное сообщение для pismenov Посмотреть профиль Найти все сообщения от pismenov
 
Регистрация: 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;
}
?
Ответить с цитированием
  #10 (permalink)  
Старый 09.07.2009, 12:12
Кандидат Javascript-наук
Отправить личное сообщение для `p r o x y Посмотреть профиль Найти все сообщения от `p r o x y
 
Регистрация: 04.05.2009
Сообщений: 105

Цитата:
А можно поподробнее про эти строки:
в статьях
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Кросс-браузерные функции B~Vladi Ваши сайты и скрипты 128 01.09.2009 17:11
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 14:37
Паралельное выполнение одной и той-же функции Сеня AJAX и COMET 3 24.01.2009 20:59
владелец функции diagnost Общие вопросы Javascript 6 30.10.2008 15:04
Проблема с вызовом функции prophet Общие вопросы Javascript 1 26.09.2008 12:26