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

Поиск:

Закрытая темаСоздание новой темы Создание опроса
> Смена картинки без перезагрузки страницы 
:(
    Опции темы
The MASTER
Дата 21.6.2005, 13:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Old master)
**


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

Репутация: нет
Всего: 5



Привет всем!
У меня есть Форма:

Код

<form action='send.php' method='post'>
<input type=text name='name'><br>
                          <select name='type'>
                            <option  value='t1'>Type1
                            <option  value='t2' selected>Type2
                            <option  value='t3'>Type3
                            <option  value='t4'>Type4
                          </select><br>
<input type=submit value='Send'>
</form>


Рядом с формой у меня картинка, так вот вопрос, как сделать, чтобы когда человек выберет type из выпадающего меню, рядом без обновления страницы менялась картинка?

Это сообщение отредактировал(а) The MASTER - 21.6.2005, 14:03
PM MAIL WWW ICQ   Вверх
Рыжий
Дата 21.6.2005, 14:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Помешанный
***


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

Репутация: нет
Всего: 20



это вопрос в Java script
PM MAIL ICQ   Вверх
Black
Дата 21.6.2005, 16:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Web-Development
**


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

Репутация: 4
Всего: 45



Код

<!-- Над страницей химичил PHP-DIRECTOR -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>.: ДИНАМИЧЕСКАЯ СМЕНА КАРТИНКИ :.</title>

<script type='text/javascript'>
function change(select)
{
// определяем новые атрибуты картинки в зависимости от выбора пользователя в <select>
   switch (select) {
        case 't1': var img = 'img01.gif'; var height='90'; var width='120'; var alt='картинка 1'; break;
        case 't2': var img = 'img02.gif'; var height='200'; var width='160'; var alt='картинка 2'; break;
        case 't3': var img = 'img03.gif'; var height='150'; var width='200'; var alt='картинка 3'; break;
        case 't4': var img = 'img04.gif'; var height='50'; var width='30'; var alt='картинка 4'; break;
  }
// меняем атрибуты картинки
var ObjImg = document.getElementById('img');
ObjImg.src = img;
ObjImg.height = height;
ObjImg.width = width;
ObjImg.alt = alt;
}
</script>

</head>

<body>

<form action='send.php' method='post'>
<input type='text' name='name' />
<br />

<!-- Список -->
<select id='sel' onchange='change(document.getElementById("sel").value)' name='type'>
    <option value='t1'>Type1</option>
    <option value='t2' selected='selected'>Type2</option>
    <option value='t3'>Type3</option>
    <option value='t4'>Type4</option>
</select>
<!-- -->

<br />
<!-- Картинка которую будем менять -->
<img src='img.gif' id='img' height='100' width='100' alt='картинка по умолчанию' />
<!-- -->
<br />

<input type='submit' value='Send' />
</form>

</body>
</html>



Работает в MSIE 6.0, FireFox 1.0.4, Opera 8.01
В других не браузерах проверял. Но должно работать везде.

P.S: надеюсь это то, что надо было smile


--------------------
Могу все, но ничего не умею :-)
PM WWW   Вверх
Любитель
Дата 21.6.2005, 19:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Программист-романтик
****


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

Репутация: 1
Всего: 92



Желательно ещё добавить загрузку картинок (без отображения, конечно), а то все равно ещё грузится будет (если сайт не локально вивсит).


--------------------
PM MAIL ICQ Skype   Вверх
Black
Дата 21.6.2005, 20:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Web-Development
**


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

Репутация: 4
Всего: 45



Цитата
Желательно ещё добавить загрузку картинок (без отображения, конечно), а то все равно ещё грузится будет (если сайт не локально вивсит).

Если я правильно понял, то вы имеете ввиду загрузку картинок всех сразу, чтобы потом после выбора в select они моментом отображались, чтоб не ждать загрузки на медленных каналах.

Тогда посмотрите эту тему:

http://forum.vingrad.ru/index.php?showtopic=47159

P.S: хотя это на мой взгляд не корректно. Я возможно не буду все пункты вибирать, зачем вы будете мне лишний трафик создавать. А картинки я думаю не по 100 кб, а меньше так по 10, что позволяет их почти мгновенно загрузить и на медленных каналах.

Чем дольше будет грузится ваша страница, тем больше вероятности что с нее убегут. Лишнее грузить не стоит, если оно не нужно smile


--------------------
Могу все, но ничего не умею :-)
PM WWW   Вверх
The MASTER
Дата 21.6.2005, 22:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Old master)
**


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

Репутация: нет
Всего: 5



PHP-DIRECTOR Пасибо!!! Именно то, что я хотел. smile
PM MAIL WWW ICQ   Вверх
Aliance
Дата 24.6.2005, 12:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



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


 




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


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

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