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

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Замена одного IMG на другой, IE тег меняет, изображение не показывает 
:(
    Опции темы
Sattu
Дата 14.5.2007, 11:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 133
Регистрация: 7.8.2002
Где: Західна Україна

Репутация: нет
Всего: 4
Довольно простой код не хочет работать коректно в ИЕ, в ФФ все ок.

Код

<html><head>
<script>
    function show_img(i){
        var p = document.getElementById("show_place");

        var img1 = new Image();
        img1.src = i;
        p.replaceChild(img1, p.firstChild);
    }
</script>
</head><body>

<a href='javascript:void(0)' onclick="show_img('img/LG1B3382_home.jpg')"><img src="img/thumbs/LG1B3382_home.jpg" /></a>
---
<a href='javascript:void(0)' onclick="show_img('img/Radom.jpg')"><img src="img/thumbs/Radom.jpg" /></a>

<hr>

<p id='show_place'><img src='img/LG1B3382_home.jpg' /></p>

</body></html>


Потестить можно тут -- http://sattu.net/_stuff/test/1.html

При клике на превью, картинка снизу должна меняться. В ФФ все работает на ура. В ИЕ же виден баг -- картинка меняется, но не грузится. Тоесть если нажать Ctrl+A то обьект видно, но само изображение не показывается. Если же вибрать "Show picture" картинка покажется. Также картинку видно сразу, если она уже есть в кеше.

Проблема наблюдается и при использовании DOMа и при переписывании "в лоб" с помощью innerHTML.

Решить проблему подгрузкой изображений также не удалось. Использовать onLoad на странице не является возможным, поэтому вставил в конец страницы код 
Код

...
</body>

<script>
    var i001 = new Image();
    i001.src = 'img/LG1B3382_home.jpg';
    
    var i002 = new Image();
    i002.src = 'img/LG1B3382_home.jpg';
</script>

</html>
 

Потестить можно тут -- http://sattu.net/_stuff/test/2.html

Куда копать? Как заствить ИЕ правильно работать?

Добавлено через 1 минуту и 48 секунд
Пробовал также обращаться в img напрямую, в ИЕ всеравно не работает

Код

<html><head>
<script>
    function show_img(i){
        var u = document.getElementById("show_i");
        u.src = i;
    }
</script>
</head><body>

<a href='javascript:void(0)' onclick="show_img('img/LG1B3382_home.jpg')"><img src="img/thumbs/LG1B3382_home.jpg" /></a>
---
<a href='javascript:void(0)' onclick="show_img('img/Radom.jpg')"><img src="img/thumbs/Radom.jpg" /></a>

<hr>

<p id='show_place'><img id='show_i' src='img/LG1B3382_home.jpg' /></p>

</body>

<script>
    var i001 = new Image();
    i001.src = 'img/LG1B3382_home.jpg';
    
    var i002 = new Image();
    i002.src = 'img/LG1B3382_home.jpg';
</script>

</html>


--------------------
тссссс.... «ЖЖ»
PM WWW ICQ AOL   Вверх
Burrr
Дата 14.5.2007, 12:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 10
Всего: 20
width, height явно задай


--------------------
JavaScript на fastcoder, sqlinfo.ru
PM MAIL ICQ   Вверх
Sattu
Дата 14.5.2007, 12:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 133
Регистрация: 7.8.2002
Где: Західна Україна

Репутация: нет
Всего: 4
Цитата(Burrr @ 14.5.2007,  09:36)
width, height явно задай

Тоже в голову приходило. Пробовал, непомогает.
--------------------
тссссс.... «ЖЖ»
PM WWW ICQ AOL   Вверх
12345c
Дата 14.5.2007, 12:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101
Да, странный глюк. Размеры обрамления не помогли. Наоборот, показали, что размеры картинки приходят, но отображения нет. Прямое внесение в img дало то же самое. Помогает только предзагрузка. Хотя раньше у меня без предзагрузки работала такая система без проблем. Может быть его смущает знак "_" в УРЛе?

Пример, который будет работать отовсюду, используя рисунки с сервера.
Код

<html><head>
<script>
  //var img1 = new Image();
        //img1.src = 'http://sattu.net/_stuff/test/img/LG1B3382_home.jpg';

    function show_img(i){
        document.getElementById("show_place_img").src = i
    }
</script>
</head><body>

<a href='javascript:void(0)' onclick="show_img('http://sattu.net/_stuff/test/img/LG1B3382_home.jpg')"><img src="http://sattu.net/_stuff/test/img/thumbs/LG1B3382_home.jpg" /></a>
---
<a href='javascript:void(0)' onclick="show_img('http://sattu.net/_stuff/test/img/Radom.jpg')"><img src="http://sattu.net/_stuff/test/img/thumbs/Radom.jpg" /></a>

<hr>

<p id='show_place' style=width:100%;height:200px><img 
  style="border:1px solid blue" id='show_place_img' src='http://sattu.net/_stuff/test/img/Radom.jpg' /></p>

</body></html>
Если раскомментировать строчки 3, 4 (предзагрузку), то заработает.

Добавлено через 4 минуты и 6 секунд
А, вот что пошло! (Говорил же я раньше - не пользуйтесь этим псевдоурлом, он непонятно где исполняется - не в окне, а неизвестно где - вот пример глюка из-за него.) : )
Код

<html><head>
<script>
    function show_img(i){
        document.getElementById("show_place_img").src = i
    }
</script>
</head><body>

<a href=# onclick="show_img('http://sattu.net/_stuff/test/img/LG1B3382_home.jpg');return!1"><img src="http://sattu.net/_stuff/test/img/thumbs/LG1B3382_home.jpg" /></a>
---
<a href=# onclick="show_img('http://sattu.net/_stuff/test/img/Radom.jpg');return!1"><img src="http://sattu.net/_stuff/test/img/thumbs/Radom.jpg" /></a>

<hr>

<p id='show_place' style=width:100%;height:200px><img 
  style="border:1px solid blue" id='show_place_img' src='http://sattu.net/_stuff/test/img/Radom.jpg' /></p>

</body></html>
PM WWW   Вверх
Sattu
Дата 14.5.2007, 13:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 133
Регистрация: 7.8.2002
Где: Західна Україна

Репутация: нет
Всего: 4
Цитата(12345c @  14.5.2007,  09:58 Найти цитируемый пост)
Если раскомментировать строчки 3, 4 (предзагрузку), то заработает.

Да, работает, но непойму почему тогда http://sattu.net/_stuff/test/2.html не работает? Тот же код, но описан снизу страницы.


Цитата(12345c @  14.5.2007,  09:58 Найти цитируемый пост)
А, вот что пошло! (Говорил же я раньше - не пользуйтесь этим псевдоурлом, он непонятно где исполняется - не в окне, а неизвестно где - вот пример глюка из-за него.) : )


Эх, без него будет туго =( ибо страница большая, и будет "скакать" при нажатии на ссилку. Хотелось бы чтобы пользователя визуально оставляло там где он и был.

Добавлено @ 13:16
Цитата(Sattu @ 14.5.2007,  10:09)
Цитата(12345c @  14.5.2007,  09:58 Найти цитируемый пост)
А, вот что пошло! (Говорил же я раньше - не пользуйтесь этим псевдоурлом, он непонятно где исполняется - не в окне, а неизвестно где - вот пример глюка из-за него.) : )


Эх, без него будет туго =( ибо страница большая, и будет "скакать" при нажатии на ссилку. Хотелось бы чтобы пользователя визуально оставляло там где он и был.

хм, я ошибся, не скачет, видимо return!1 помог этому. спасибо что помог разобраться. +

Добавлено @ 13:22
Расскажи плз что такое return!1? Это return !1 (return 0 ,return false)? Тогда почему без пробела?

Или интерпритатор настолько умный что воспринимает правильно и без ошибки?

Впервые такое выражение встречаю. Гуглом ничего нарыть не удалось.

Это сообщение отредактировал(а) Sattu - 14.5.2007, 13:26
--------------------
тссссс.... «ЖЖ»
PM WWW ICQ AOL   Вверх
12345c
Дата 14.5.2007, 13:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101
return!1 - это то же самое, что return false; , это самая короткая запись для экономии ресурса клавиатуры smile. Возвращает событию false, что означает отмену действия по умолчанию - в данном случае перехода по ссылке с "#", т.е. на начало страницы. Если Вы этого ещё не знаете, то очень многого не знаете, читайте учебник, главу по событиям.

Добавлено через 5 минут и 45 секунд
Да, p.firstChild.src = i; тоже будет работать, только придётся не делать пробелов и переноса строки после <p> из-за 2 остальных браузеров. 
PM WWW   Вверх
Sattu
Дата 14.5.2007, 14:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 133
Регистрация: 7.8.2002
Где: Західна Україна

Репутация: нет
Всего: 4
Цитата(12345c @  14.5.2007,  10:31 Найти цитируемый пост)
return!1 - это то же самое, что return false; , это самая короткая запись для экономии ресурса клавиатуры smile. Возвращает событию false, что означает отмену действия по умолчанию - в данном случае перехода по ссылке с "#", т.е. на начало страницы. Если Вы этого ещё не знаете, то очень многого не знаете, читайте учебник, главу по событиям.

Спасибо. Не знал что можно писать без пробела.

Цитата(12345c @  14.5.2007,  10:31 Найти цитируемый пост)
Да, p.firstChild.src = i; тоже будет работать, только придётся не делать пробелов и переноса строки после <p> из-за 2 остальных браузеров.  

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

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


 




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


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

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