<select name="country-selector"> <option value="hi">Выбрать Страну Огня.</option> <option value="kaze">Выбрать Страну Ветра.</option> <option value="mizu">Выбрать Страну Воды.</option> <option value="kaminari">Выбрать Страну Молнии.</option> <option value="tsuchi">Выбрать Страну Земли.</option> <option value="ta">Выбрать Страну Рисовых Полей.</option> <option value="ame">Выбрать Страну Дождя.</option> <option value="taki">Выбрать Страну Водопада.</option> <option value="uzu">Выбрать Страну Водоворота.</option> <option value="kusa">Выбрать Страну Травы.</option> </select>
Этот код я хочу использовать при регистрации, но не знаю как сделать так, что бы при выборе нужной строки под выбором появлялась соответственная картинка. Буду признателен за помощь
На сколько я понимаю, для этого используется яваскрипт, если нет, то поправьте. Яваскрипт я начал изучать совсем недавно и сразу возникает вопрос. Есть ли что то подобное htmlbook только для яс?
Сообщение отредактировал NoExist - Среда, 15 Августа 2012, 07:13
Яваскрипт я начал изучать совсем недавно и сразу возникает вопрос
Вопросы это хорошо, но учи все по порядку и будут тебе печеньки Специалист "во всем" - специалист "ни в чем" ------------------------------------ Script Reference для Unity3D Помогу со скриптами for Unity3D
Сообщение отредактировал Racot - Среда, 15 Августа 2012, 10:11
switch(variable) { case value_1: { //блок операторов_1 break; } case value_2: { //блок операторов_2 break; } case value_n: { //блок операторов_n break; } default: { //блок операторов по умолчанию } }
Вместо (variable) нужно поставить переменную selecter`a country-selector, а вместо value_1 нужно поставить value "hi" из селектора. Правильно я понимаю? Скрипт подключил в пхп, но по всей видимости я не правильно думал...
Code
switch country-selector { case kaze: { document.myImage.src= "/images/Kaze.png"; break; } case mizu: { document.myImage.src= "/images/Mizu.png"; break; } case kaminari: { document.myImage.src= "/images/Kaminari.png"; break; } default: { document.myImage.src= "/images/hi.png"; } }
Не работает...
Сообщение отредактировал NoExist - Среда, 15 Августа 2012, 12:39
<html> <script> function val(a) { var x = a.selectedIndex; var path = "/images/"; var imgSrc = path + x + ".jpg"; document.getElementById("myImage").src=imgSrc; } </script> <select onchange="val(this)" name="country-selector"> <option value="hi">Выбрать Страну Огня.</option> <option value="kaze">Выбрать Страну Ветра.</option> <option value="mizu">Выбрать Страну Воды.</option> <option value="kaminari">Выбрать Страну Молнии.</option> <option value="tsuchi">Выбрать Страну Земли.</option> <option value="ta">Выбрать Страну Рисовых Полей.</option> <option value="ame">Выбрать Страну Дождя.</option> <option value="taki">Выбрать Страну Водопада.</option> <option value="uzu">Выбрать Страну Водоворота.</option> <option value="kusa">Выбрать Страну Травы.</option> </select> <img src = "/images/0.jpg" id="myImage" /> </html>
картинки назови соответственно "0.jpg" для hi, "1.jpg" для kaze ну и т.д Либо используй switch, переменная Х - номер выбранного элемента списка(hi = 0 kaze = 1 ... kusa = 9) Код выше ты сам привел, его просто чутка исправить
Добавлено (15.08.2012, 13:32) --------------------------------------------- Вот примерно так
Code
<html> <script> function val(a) { var x = a.selectedIndex; switch(x) { case 0: { document.getElementById("myImage").src="hi.jpg"; break; } case 1: { document.getElementById("myImage").src="kaze.jpg"; break; } case 2: { document.getElementById("myImage").src="miru.jpg"; break; } } } </script> <select onchange="val(this)" name="country-selector"> <option value="hi">Выбрать Страну Огня.</option> <option value="kaze">Выбрать Страну Ветра.</option> <option value="mizu">Выбрать Страну Воды.</option> <option value="kaminari">Выбрать Страну Молнии.</option> <option value="tsuchi">Выбрать Страну Земли.</option> <option value="ta">Выбрать Страну Рисовых Полей.</option> <option value="ame">Выбрать Страну Дождя.</option> <option value="taki">Выбрать Страну Водопада.</option> <option value="uzu">Выбрать Страну Водоворота.</option> <option value="kusa">Выбрать Страну Травы.</option> </select> <img src = "1.jpg" id="myImage" /> </html>
Сообщение отредактировал IIyxMASTER - Среда, 15 Августа 2012, 13:23
О спасибо! Значит, смотря на последний код, я чуть чуть ошибся) Ну яваскрипт я только учу, учу на ошибках =) А вот тоже самое, что с картинкой, можно сделать с текстом?
знаешь, я js не люблю и не знаю, он меня бесит, как салат Учись гуглить, все на поверхности лежит.
Code
<html> <script> function val(a) { var y = a.value; var image = document.getElementById("myImage"); var text = document.getElementById("text"); image.src="/images/"+y+".jpg"; text.innerHTML='Деревня ' + y; } </script> <select onchange="val(this)" name="country-selector"> <option value="hi">Выбрать Страну Огня.</option> <option value="kaze">Выбрать Страну Ветра.</option> <option value="mizu">Выбрать Страну Воды.</option> <option value="kaminari">Выбрать Страну Молнии.</option> <option value="tsuchi">Выбрать Страну Земли.</option> <option value="ta">Выбрать Страну Рисовых Полей.</option> <option value="ame">Выбрать Страну Дождя.</option> <option value="taki">Выбрать Страну Водопада.</option> <option value="uzu">Выбрать Страну Водоворота.</option> <option value="kusa">Выбрать Страну Травы.</option> </select> <img src = "a.jpg" id="myImage" /> <p id = "text">Деревня hi</li> </html>
Сообщение отредактировал IIyxMASTER - Среда, 15 Августа 2012, 14:02
<script id="country-selector"> function val(a) { var x = a.selectedIndex; var path = "/images/country-map/"; var imgSrc = path + x + ".png"; document.getElementById("country-selector").src=imgSrc; } </script> <select onchange="val(this)" name="country-selector"> <option value="hi">Выбрать Страну Огня.</option> <option value="kaze">Выбрать Страну Ветра.</option> <option value="mizu">Выбрать Страну Воды.</option> <option value="kaminari">Выбрать Страну Молнии.</option> <option value="tsuchi">Выбрать Страну Земли.</option> <option value="ta">Выбрать Страну Рисовых Полей.</option> <option value="ame">Выбрать Страну Дождя.</option> <option value="taki">Выбрать Страну Водопада.</option> <option value="uzu">Выбрать Страну Водоворота.</option> <option value="kusa">Выбрать Страну Травы.</option> <option value="kawa">Выбрать Страну Реки.</option> </select><br> <img src = "/images/country-map/0.png" id="country-selector" /> </table>
Поставил 2 этих кода, начинают конфликтовать... 1й код меняет картинку у 2го, а второй у себя... пробовал айдишки приписать, что то не выходит.
ааа значит val и есть id как у div`a спс) На счет текста не очень понял, он его выводит сразу, а как сделать в зависимости от картинки соответственный текст? На счет гугла, я не знаю как поиск сформулировать, ибо не знаю как называется этот скрипт)
<table align="center"> <b>Выберите страну</b><br> <span id="attention">Внимание! После выбора страны изменить ее нельзя! Выбирайте мудро!</span><br> <script id="country-selector"> function CountrySelector(a) { var x = a.selectedIndex; var path = "/images/country-map/"; var imgSrc = path + x + ".png"; document.getElementById("country-selector").src=imgSrc; } </script> <select onchange="CountrySelector(this)" name="country-selector"> <option value="hi">Выбрать Страну Огня.</option> <option value="kaze">Выбрать Страну Ветра.</option> <option value="mizu">Выбрать Страну Воды.</option> <option value="kaminari">Выбрать Страну Молнии.</option> <option value="tsuchi">Выбрать Страну Земли.</option> <option value="ta">Выбрать Страну Рисовых Полей.</option> <option value="ame">Выбрать Страну Дождя.</option> <option value="taki">Выбрать Страну Водопада.</option> <option value="uzu">Выбрать Страну Водоворота.</option> <option value="kusa">Выбрать Страну Травы.</option> <option value="kawa">Выбрать Страну Реки.</option> </select><br> <img src = "/images/country-map/0.png" id="country-selector" /> <br> </br> <b>Описание страны:</b> </table> <br> </br>
Вот код, в который я пытался твой вставить, после описания страны нужно собственно описание) В селекторе выбирается страна, показывается картинка и под ней описание. Так сложно
Сообщение отредактировал NoExist - Среда, 15 Августа 2012, 21:26
//Получаем данные из списка // countryName - название, указанное в value // countryIndex - индекс, нужный для switch, начинается с 0 var countryName = a.value; var countryIndex = a.selectedIndex;
// В самый конец я поставил надпись "Выберите страну" // После выбора деревни надпись должна удалиться // Для этого проверяем имя последнего элемента // И если оно равно "delete" - удаляем // P.S options - массив с набором элементов нажего объекта select // Для обращения к последнему элементу мы должны от его размера // a.options.length отнять 1, так как индекс деревни начинает свой счет с 0 // Говоря проще - если в массиве 2 деревни, то и размер будет равен 2, однако // Индекс первой деревни - 0, а второй - 1, тоесть индекс последней равен "размер - 1" // После того как получили индекс последнего элемента - узнаем его значение и сравниваем с эталонным "delete" if(a.options[a.options.length-1].value == "delete") { a.options[a.options.length-1] = null; } // Переменные, которые я ввел для удобства работы с текстом и картинкой // image дает нам доступ к картинке, text - к тексту, описывающим деревню var image = document.getElementById("myImage"); var text = document.getElementById("text");
// Путь до картинки первой деревни примерно "/images/hi.jpg" // Отличаются все картинки лишь именем самой деревни, "/images/" и ".jpg" неизменны // Нам нужно просто поменять "hi" на имя нужной нам деревни // Переменная countryName содержит в себе это имя, она берет его из списка, // Поэтому для формирования пути мы складываем // "/images/", который не меняется, // countryName , который мы получаем при каждом изменении селекта // и ".jpg" , который тоже неизменен
image.src="/images/" + countryName + ".jpg";
// Меняем текст в подписи, для этого получаем индекс нужной нам деревни // Первая деревня имеет индекс 0, вторая 1, третья 2, ну и так далее // И затем просто через свич меняем этот текст switch(countryIndex) { case 0: { // 0 - это первая страна в списке, деревня огня text.innerHTML='Страна Огня это, Уася, такая штука классная, да!'; break; } case 1: { // 1 - вторая страна в списке, страна ветра text.innerHTML='Страна Ветра это как Страна Огня, только Ветра.'; break; } case 2: { text.innerHTML='Страна Воды это как Страна Ветра, только Воды.'; break; } default: { text.innerHTML='Дальше влом писать'; break; } }