Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Не правильно отображаются img в Firefox, подгрузка в src 
:(
    Опции темы
Pankon
  Дата 9.1.2008, 18:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 739
Регистрация: 2.6.2005

Репутация: нет
Всего: 5
У меня два анимированных gif (без loop): expand_small.gif, expand_small.gif.
Требуется при click на gif - скрыть/показать часть HTML и подменить соответствующий gif на противоположный.
В IE все работает без проблем. А вот Firefox при click по gif заменяет не только "кликнутый gif", но и второй, по которому не кликал. Это видно потому, что гиф анимириванный - кликаешь по одному, а оба "анимируются"...

тестовый код:
Код
<span onclick="Test('5460');">
    <img src="expand_small.gif" id="img5460" />
</span>
<div id="test5460">
    5460
</div>
<br/>
<span onclick="Test('5461');" >
    <img src="expand_small.gif" id="img5461" />
</span>
<div id="test5461">
    5461
</div>
Код
function Test(id)
{  
    var testElement = document.getElementById('test' + id);
    var imgElement = document.images['img' + id];
    var src = imgElement.src;
    if(testElement.style.display == 'none') 
    {
        imgElement.src = src.replace('expand','collapse');
        testElement.style.display = ''; 
    }
    else 
    {
        imgElement.src = src.replace('collapse','expand');
        testElement.style.display = 'none';
    }
    return;
}
PM MAIL   Вверх
solenko
Дата 9.1.2008, 19:35 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1473
Регистрация: 15.1.2006
Где: Украина

Репутация: 9
Всего: 67
Работает. Выложите пример куда-то, может у вас не эта часть кода глючит...
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11


--------------------
Ла-ла-ла-ла
Заметьте, нет официального подтверждения, что это не просто четыре слога.
PM MAIL WWW ICQ Skype   Вверх
Pankon
Дата 9.1.2008, 19:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 739
Регистрация: 2.6.2005

Репутация: нет
Всего: 5
solenko, у меня тоже Firefox/2.0.0.11 

Присоединённый файл ( Кол-во скачиваний: 7 )
Присоединённый файл  testImg.rar 1,10 Kb
PM MAIL   Вверх
solenko
Дата 9.1.2008, 20:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1473
Регистрация: 15.1.2006
Где: Украина

Репутация: 9
Всего: 67
С чем связано -- понятия не имею. 
Как быстрое решение:
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
.colapsed, .expanded {
    width: 10px;
    height: 10px;
}

.expanded {
    background-image: url(expand_small.gif);
}

.colapsed {
    background-image: url(collapse_small.gif);
}
</style>
<script language="JavaScript" type="text/javascript">
function Test(id)
{  
    var testElement = document.getElementById('test' + id);
    if(testElement.style.display == 'none') 
    {
        document.getElementById('span' + id).className = 'colapsed';
        testElement.style.display = ''; 
    }
    else 
    {
        document.getElementById('span' + id).className = 'expanded';
        testElement.style.display = 'none';
    }
    return;
}
</script> 
</head>

<body>
<div onclick="Test('5460');" class="expanded" id="span5460">
</div>
<div id="test5460">
    5460
</div>
<br/>
<div onclick="Test('5461');"  class="expanded" id="span5461">
</div>
<div id="test5461">
    5461
</div>
</body>
</html>




--------------------
Ла-ла-ла-ла
Заметьте, нет официального подтверждения, что это не просто четыре слога.
PM MAIL WWW ICQ Skype   Вверх
ksnk
Дата 9.1.2008, 23:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386
Цитата(Pankon @  9.1.2008,  18:56 Найти цитируемый пост)
 кликаешь по одному, а оба "анимируются"...

Работает-то правильно , а вот все одинаковые картинки одновременно анимируются - это такая фича FireFox'а... 
solenko, отчего-то на вашем примере в FF неанимируется "стрелка вниз", мистика, какая-то . А в IE вообще прикольно ;)

Это сообщение отредактировал(а) ksnk - 9.1.2008, 23:12


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Pankon
Дата 10.1.2008, 10:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 739
Регистрация: 2.6.2005

Репутация: нет
Всего: 5
Цитата(ksnk @  9.1.2008,  23:06 Найти цитируемый пост)
это такая фича FireFox'а
 если это действительно так, то где бы порыться, что бы про это почитать(ссылку, please)
PM MAIL   Вверх
ksnk
Дата 10.1.2008, 12:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386
Вопрос, скорее риторический ;-) Где-то тут была тема про багофичи разных броузеров. Возможно, эта там тоже присутствует.
Проверить ее довольно просто 
Код

<img src="expand_small.gif"><img src="expand_small.gif"><img src="expand_small.gif"><img src="expand_small.gif"><img src="expand_small.gif"><img src="expand_small.gif"><img src="expand_small.gif"><img src="expand_small.gif"><img src="expand_small.gif"><img src="expand_small.gif"><img src="expand_small.gif"><img src="expand_small.gif"><img src="expand_small.gif"><img src="expand_small.gif"><img src="expand_small.gif"><img src="expand_small.gif"><img src="expand_small.gif"><img src="expand_small.gif"><img src="expand_small.gif"><img src="expand_small.gif"><img src="expand_small.gif"><img src="expand_small.gif"><img id="one" src="expand_small.gif">
<input type="button" onclick='var el=document.getElementById("one");el.src="";el.src="expand_small.gif"'>

Вот такой код при нажатии на кнопку в FF вызывает ре-анимацию всех картинок, в IE только одна картина анимируется, в Опере - не анимирует второй раз вообще... разнообразие реализаций поражает... Так что пользоваться таким эффектом вообще говоря нельзя.

Решением было бы создание неанимированой картинки expand_na_small.gif и  collapse_na_small.gif, и по таймауту подмена src на его. Как нибудь так:
Код

function Test(id)
{  
    var plug_na=false,
        reg=/(.*)(expand|collapse)(_na)?(.*)$/,
        ts = document.getElementById('test' + id).style,
        is = document.getElementById('img' + id); // я чего-то document.images опасаюся... 
    function replace($0,$1,$2,$3,$4){
        $3=plug_na?'_na':'';
        if (ts.display=='') return $1+'expand'+$3+$4;
        else return $1+'collapse'+$3+$4;
    }
    ts.display = ts.display=='none'?'':'none'; 
    is.src = is.src.replace(reg,replace);
    setTimeout(function(){
        plug_na=true; 
        is.src = is.src.replace(reg,replace);
    },1000);
}


Это сообщение отредактировал(а) ksnk - 10.1.2008, 12:56


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Pankon
Дата 10.1.2008, 12:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 739
Регистрация: 2.6.2005

Репутация: нет
Всего: 5
Цитата(ksnk @  10.1.2008,  12:09 Найти цитируемый пост)
разнообразие реализаций поражает
 это точно

Цитата(ksnk @  10.1.2008,  12:09 Найти цитируемый пост)
пользоваться таким эффектом вообще говоря нельзя
 :(
PM MAIL   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0590 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.