Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Изменения изображения при выборе из списка (https://javascript.ru/forum/misc/6147-izmeneniya-izobrazheniya-pri-vybore-iz-spiska.html)

hayk 14.11.2009 00:28

Изменения изображения при выборе из списка
 
Дано изображение и выпадающий список:
<a  href="img/default.jpg" title="default"><img src="img/default.jpg"></a>
<br>
<select name="template">
<option value="default" selected="selected">default</option>
<option value="simple">simple</option>
<option value="other">other</option>
</select>


Как сделать так, чтобы javascript при выборе из списка брал значение value и подставлял в ссылку для изображения? Т.е. идея в том, чтобы при изменении значения в выпадающем списке менялась картинка.

Octane 14.11.2009 01:28

У селекта есть событие onchange. Добавьте обработчик этого события, который будет получать value селекта и изменять src изображения.

hayk 14.11.2009 15:10

я понимаю, я в принципе так и написал, просто javascript знаю очень плохо, а нужно очень срочно. Причём нужно сделать чисто на javascript без всяких библиотек.
Основной вопрос, как получать value и заменять src.

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

hayk 14.11.2009 15:41

Всё спасибо, догнал сам :)

$tmp= document.forms[0].template.value;
document.tmppic.src= "img/" + $tmp + ".jpg";

Kolyaj 14.11.2009 20:24

Зачем доллар в имени переменной?

hayk 14.11.2009 20:26

точно, спасибо, привычка из php :)

firs 02.06.2010 15:13

конечный вариант какой получится: код пожалуйста...

Sweet 02.06.2010 16:15

Что-то вроде того:
document.getElementsByName('template')[0].onchange = function(){
	document.getElementsByTagName('IMG')[0].src = document.getElementsByName('template')[0].value + '.jpg'
}

exec 02.06.2010 16:19

Цитата:

document.getElementsByName('template')[0].value
Можно заменить на this.value

gustovskiy 28.11.2010 00:46

Можно сделать как я себе

if (form.color[0].selected){
var color=0;
form.img.src="img/small1.jpg";
txt2.innerHTML="Описание";
}
else if (form.color[1].selected){
var color=0;
form.img.src="img/small2.jpg";
txt2.innerHTML="Описание";
}
else if (form.color[2].selected){
var color=0;
form.img.src="img/small3.jpg";
txt2.innerHTML="Описание";
}


Список select при этом должен выглядеть так
<option id="0" selected="selected">Первый</option>
<option id="1">Второй</option> 
<option id="2">Третий</option> 
<option id="3">Четвертый</option>


В картинке оставить пустым src=""
А если надо вставить описание то в форме прописывать id="txt2"
Пример <div id="txt2"></div>


Часовой пояс GMT +3, время: 19:43.