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

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Вопрос по интерактивной замене картинок 
:(
    Опции темы
givi
Дата 5.7.2006, 09:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
Имеем код:
Код

<HTML>
<HEAD>
<title>Тест</title>
<script type="text/javascript">
function change_image(chooser) {
var elem = document.getElementById("picture");
var db = chooser.options[chooser.selectedIndex].value;
if (db !== "") {
  elem.src = db;
}
}
</script>
</HEAD>
<BODY>

<IMG src="" id="picture"></br>

<select name="s1" onchange="change_image(this)">
 <option name="pict" value="pict1.jpg">Первая</option>
 <option name="pict" value="pict2.jpg">Вторая</option>
</select>

</BODY>
</HTML>

Можно ли сделать так , чтобы в <IMG src="вот сюда" id="picture"> вставлялось значение из первой строки select, в данном случае pict1.gif?





 
PM MAIL   Вверх
Burrr
Дата 5.7.2006, 09:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 10
Всего: 20
А что, если немного поправить верстку, вот так?
Код

<HTML>
<HEAD>
<title>Тест</title>
<script type="text/javascript">
function change_image(chooser) {
var elem = document.getElementById("picture");
if (chooser.selectedIndex == 0) return;
var db = chooser.options[chooser.selectedIndex].value;
if (db !== "") {
  elem.src = db;
}
}
</script>
</HEAD>
<BODY>

<IMG src="" id="picture"></br>

<select name="s1" onchange="change_image(this)">
 <option>Выберите картинку</option>
 <option name="pict" value="pict1.jpg">Первая</option>
 <option name="pict" value="pict2.jpg">Вторая</option>
</select>

</BODY>
</HTML>

Или я неправильно понял вопрос?  

Это сообщение отредактировал(а) Burrr - 5.7.2006, 09:46


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


I ♥ <script>
****


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

Репутация: 55
Всего: 137
Поясни конкретно, на сколько ты хочешь динамики: чтобы в тупую читалось первое значение и вставлялось куда нужно, либо чтобы читались все значения из селекта, кроме нулевого и вставлялись.
Если второй вариант, то Burrr тебе уже написал решение. Если первый, то это элементарно. 


--------------------
• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript
PM MAIL WWW ICQ Skype   Вверх
givi
Дата 5.7.2006, 10:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
Вариант от Burrr неподходит!

Мне нужно чтобы при загрузке страницы показывалась первая картинка из select. Вставить в img pict1.jpg не предлагайте. :-) 

Это сообщение отредактировал(а) givi - 5.7.2006, 10:29
PM MAIL   Вверх
Aliance
Дата 5.7.2006, 11:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


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

Репутация: 55
Всего: 137
Какие проблемы?
Поставь на событие нужное (загрузка, в твоем случае) код:
Код

document.getElementById("picture").src = document.getElementById("s1").options[0].value;
 


--------------------
• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript
PM MAIL WWW ICQ Skype   Вверх
givi
Дата 5.7.2006, 11:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
А можно все это грамотно (а то я новичек) воткнуть в приведенный мной выше код? 
PM MAIL   Вверх
givi
Дата 5.7.2006, 12:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
Сделал так, вроде работает.

Код

<HTML>
<HEAD>
<title>Тест</title>
<script type="text/javascript">

function loadImage(src) {
  document.getElementById("picture").src = document.getElementById("s1").options[0].value;
}
function change_image(chooser) {
var elem = document.getElementById("picture");
var db = chooser.options[chooser.selectedIndex].value;
if (db !== "") {
  elem.src = db;
}
}
</script>

</HEAD>

<BODY OnLoad="loadImage(this)">

<IMG src="" id="picture"></br></br><span id="picture"></span></br>

<select name="s1" onchange="change_image(this)">

 <option name="pict" value="pict1.jpg">Первая</option>
 <option name="pict" value="pict2.jpg">Вторая</option>
</select>




</BODY>
</HTML>
  

Это сообщение отредактировал(а) givi - 5.7.2006, 12:55
PM MAIL   Вверх
givi
Дата 5.7.2006, 13:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
По ходу дела назрел еще один вопрос:

Как, имея приведенный выше код, можно в код ссылки <a href="/files.php?m=view&v=_вот сюда_><img src="_и вот сюда_" id="picture"> вставлять значение из select  

Это сообщение отредактировал(а) givi - 5.7.2006, 13:39
PM MAIL   Вверх
Aliance
Дата 5.7.2006, 14:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


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

Репутация: 55
Всего: 137
А зачем ты функции loadImage() передаешь аргументом this?
Далее, кто тебя учил HTML? Нельзя давать двум элементам одинаковый ID, иначе он теряет смысла УНИКАЛЬНОГО индификатора!
Так же у тега переноса строки нет закрывающего тега.

Код

<HTML>
<HEAD>
<title>Тест</title>
<script type="text/javascript">

function loadImage() {
   document.getElementById("picture").src = document.getElementById("s1").options[0].value;
}

function change_image(chooser) {
   var elem = document.getElementById("picture");
   var db = chooser.options[chooser.selectedIndex].value;
   if (db !== "") {
      elem.src = db;
   }
}
function fill_link(chooser) {
   var elem = document.getElementById("link");
   var db = chooser.options[chooser.selectedIndex].value;
   if (db !== "") {
      elem.href = "files.php?m=view&v=" + db;
   }
}
</script>

</HEAD>

<BODY OnLoad="loadImage()">

<a href="" id="link"><img src="" id="picture" /></a>

<select name="s1" id="s1" onchange="change_image(this); fill_link(this);">
<option name="pict" value="pict1.jpg">Первая</option>
<option name="pict" value="pict2.jpg">Вторая</option>
</select>

</BODY>
</HTML>
   

Это сообщение отредактировал(а) Aliance - 5.7.2006, 15:44


--------------------
• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript
PM MAIL WWW ICQ Skype   Вверх
givi
Дата 5.7.2006, 15:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
Почему то ссылки не заработали. :-( 
PM MAIL   Вверх
Aliance
Дата 5.7.2006, 15:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


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

Репутация: 55
Всего: 137
Подредактировал код... 


--------------------
• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript
PM MAIL WWW ICQ Skype   Вверх
givi
Дата 9.7.2006, 15:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
Aliance , большое спасибо за помощь!
Возник еще один вопрос в продолжении темы:
Как можно выбирая поля в  select, под картинкой менять текст заключенный в теги option (в данном случае "Первая" <option name="pict" value="pict1.jpg">Первая</option>).
 
PM MAIL   Вверх
12345c
Дата 9.7.2006, 23:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


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

Репутация: 57
Всего: 101
Код

document.form1.pict.text="Вторая";


http://js2.ru/files/js/OPTION.html#text 

Это сообщение отредактировал(а) 12345c - 3.3.2008, 14:52


--------------------
Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go
PM WWW   Вверх
givi
Дата 12.7.2006, 07:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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

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


 




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


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

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