Вывод изображений и описания при выборе пункта select
Товарищи помогите! Как сделать чтоб при выборе из формы списка (select) появлялось рядом описание и картинка, как здесь http://www.fotoproekt.ru/port/msk/ru...ok/calculator/.
Я уже голову сломал. Подскажите решение |
кладёшь селект в див-див чуть больше по размерам чем селект. к диву вяжешь обработчики-онмаусовер онмаусоут. текст подсказки кладёшь в невидимый контейнер. при заходе на элемент делаешь див видимым при уводе с него опять скрываешь. если див один а подсказок должено отображаться несколько разных-меняешь теги внутри контейнера на новые с новым содержанием. лучше иннернтмл чем просто менять текст иннертехт-поскольку инертехт не во всех браузерах одинаково работает. проще так чем с наследственностью да и селекта есть свои обработчики-можешь все эти действия к ним привязать-что чуть сложнее чем создать контейнер и в него положить селект
|
Цитата:
|
в редакторе накидал пункты калькулятора по примерам какой то книги? если да то пролистай эти начальные страницы учебника и займись изучением языка тогда будет ясно что такое события и т.д и куда их вязать.пример-в пример в этом случае прийдётся поставить почти весь учебник скрипта-поскольку там каждое действие прийдётся объяснять. задача какую ты ставишь простая-но охватывает все аспекты языка
|
В общем у меня такая штука получилась
function price(form) {
if (form.kolvo.value){
var kolvo=parseFloat(form.kolvo.value);
}
else kolvo=0;
if (form.kolvoknig.value){
var kolvoknig=parseFloat(form.kolvoknig.value);
}
else kolvoknig=0;
if (form.design.checked){
var design=parseFloat(form.design.value);
}
else design=0;
function priceone(form){
var total = kolvo*25;
form.total_price.value=total;
}
if (form.faktura[0].selected){
var faktura=900;
form.proiz="Твердая обложка";
form.img.src="img/1.png";
}
else if (form.faktura[1].selected) {
var faktura=900;
form.proiz="Россия";
form.img.src="img/2.png";
}
var total=(kolvo*25+faktura)*kolvoknig+(design*kolvo);
document.getElementById("total_price").innerHTML=total;
}
<select name="faktura" class="sel"> <option name="faktura" id="1" selected="selected">Альбомная, цвет вишня</option> <option id="2">Альбомная, цвет жемчуг</option> </select> <br><br> <div align="left"> <img id="img" src="" title="Увеличить изображение" height="160" width="150" /> <p id="proiz"></p> </div> Картинки теперь показываются, только не выводит описание proiz. Как вывести? |
через innerHtml или innerText и по другому никак на уже загруженной странице без использования обращений к серверу
|
dmitriymar,
Подскажи как вывести |
набери в гугле их название или здесь в справочнике и будет вся инфа по использованию их.
|
|
Нашел выход. Спасибо за ссылку.
|
только лучше не текст а нтмл-он во всех браузерах одинаково работает в отличии от техт
|
dmitriymar,
Подскажи как еще прикрепить форму заказа и код отправки запроса на почту с captcha |
что подразумеваеш под формой отправки на почту?есть ведь разные варианты. а капча тебе для защиты от роботов или просто так? если для защиты то в любом случае это серверная реализация. а о именно отправки почты прочтёш в form языка.
|
смотри как работает капча в идеале чтобы робот её не мог прочитать. на сервере генериться какоето число или слово. затем оно ложиться на какнву(эт просто свойсто текст канвы). затем этот рисунок отправляеться клиенту. клиент вводит цифры-они идут на сервер где сравниваются с исходным числом . и одновременно туда же идёт почтовое сообщение с адресом-если цифры клиента и сервера совпали то поступает почтовой программе-она именно и отвечает за отправку.если нет(в любом случае клиент ждёт ответ от сервера) то вы ввели неправильно если правильно и ответ что отосланно успешно-клиенту -сообщение отосланно
|
Я передумал делать с капча. Вот готовый пример того чего я хотел http://www.tehnologia-nn.ru/calc/index.php
|
хочеш написать движок инет магазина?
|
Нет это простой калькулятор моих услуг для клиентов
|
У меня к тебе просьба, напиши пожалуйста код скрипта двух привязанных selectoв что можно было вписать там описание и вставить фотки/ Примерно как у меня. Чтоб я мог вставить в свой калькулятор только эти secectы
Вот содержимое sellectов Твердая «белая» обложка 290x200мм (Альбомная) 200x290мм (Книжная) 290x290мм (Квадратная) Тверда персональная обложка 290x200мм (Альбомная) 200x290мм (Книжная) 290x290мм (Квадратная) Переплет «Пружина» 250x200мм (Альбомная) 200x250мм (Книжная) Переплет «Скрепка» 205x140мм (Альбомная) 200x200мм (Квадратная)
if (form.color[0].selected){
var color=0;
form.img.src="img/aluminiy-small.jpg";
txt2.innerHTML="<strong>Цвет обложки</strong> - Алюминиевый";
}
else if (form.color[1].selected){
var color=0;
form.img.src="img/vishnya-small.jpg";
txt2.innerHTML="<strong>Цвет обложки</strong> - Вишневый";
}
else if (form.color[2].selected){
var color=0;
form.img.src="img/black-small.jpg";
txt2.innerHTML="<strong>Цвет обложки</strong> - Черный";
}
|
я тебя расстрою-я плохо орентируюсь в селектах. (были причины от них отказаться) но дам совет создай массивы где будут либо коэф увелечиния цены либо +к стоимости) и в зависимости от выбора в селекте работай с данным из массива. тоесть селект обложка
твырдая мягкая .... массив обложка цена(коэф)1 цена(коэф)2 .... и обращайся к нужному элементу массива тоесть если выбранна строка 1 то берёш элемент массива обложка[1] присваиваеш это дело допустим элементу цена_обложка и в конце после ваыбора всего просто выводиш результат формулы цена_обложка+цена_переплёт+ .... |
Для меня эти понятия как темный лес. Я практически не знаю java.
|
ну с селектами разобрался.посмотри здесь. пременная массив и формы-там описание селекта. селект при выборе возвращает номер выбранной строчки. и с такимже номером у тебя цена стоит в массиве.эту цену ты присваиваеш переменной какую будеш подставлять в формулу расчёта стоимости. ты практически сам сделал 90% работы по своей задаче-причём сложную часть и опустиш руки на простом?)
http://javascript.ru/manual |
ну а изображения подключать-посмотри у меня в профиле на днях уже отвечал на подобное-вывод изображений из массива предзагрузки
|
Вывод изображений я уже понял как делать и описаний тоже. Я только не могу понять как создать код привязанных списков. Смотрел даже похожие скрипты (Страны и города и т.д.) не могу понять как там прикрепить изображение и описание
Вот пример
function cGorod(strana_in, gorod_in)
{
this.gorod = gorod_in;
this.strana = strana_in;
}
Strani = new Array();
Strani["1"] = "Германия";
Strani["2"] = "Украина";
Strani["3"] = "Франция";
Goroda = new Array();
Goroda["Берлин"] = new cGorod(1,'Берлин');
Goroda["Гамбург"] = new cGorod(1,'Гамбург');
Goroda["Бонн"] = new cGorod(1,'Бонн');
Goroda["Москва"] = new cGorod(2,'Киев');
Goroda["Санкт-Петербург"] = new cGorod(2,'Львов');
Goroda["Нижний Новгород"] = new cGorod(2,'Харьков');
Goroda["Париж"] = new cGorod(3,'Париж');
Goroda["Марсель"] = new cGorod(3,'Марсель');
Goroda["Бордо"] = new cGorod(3,'Бордо');
function addgorod(key)
{
document.searchfrm.gorod.length++;
document.searchfrm.gorod[document.searchfrm.gorod.length-1].text = gorod[key];
document.searchfrm.gorod[document.searchfrm.gorod.length-1].value = key;
}
function chkkeyword(words,word) {
for(a in words) {
if(words[a]==word)
{
return true;
}
}
return false;
}
function checkall(strana,gorod,i)
{
if (strana=="")
{
if(chkkeyword(Goroda[i].gorod,gorod) || gorod==999)
return true;
}// end if
else {
if (Goroda[i].strana==strana || strana==999)
if(Goroda[i].gorod==gorod || gorod==999)
return true;
}//end else
return false;
}
function creategorod(strana,gorod)
{
document.searchfrm.gorod.length=2;
document.searchfrm.gorod[0].value = 999;
document.searchfrm.gorod[0].text = "все";
k=1;
for (i in Goroda)
{
if (checkall(strana,999,i))
{
document.searchfrm.gorod[k].value=i;
document.searchfrm.gorod[k].text=Goroda[i].gorod;
document.searchfrm.gorod.length=k+2;
k++;
}
}
document.searchfrm.gorod.length=k;
}
function createstrana(strana,gorod)
{
document.searchfrm.strana.length=2;
document.searchfrm.strana[0].value = 999;
document.searchfrm.strana[0].text = "все";
k=1;
for (i in Goroda)
{
if (checkall(999,gorod,i))
{if (document.searchfrm.strana[k-1].text!=Strani[Goroda[i].strana])
{
document.searchfrm.strana[k].value=Goroda[i].strana;
document.searchfrm.strana[k].text=Strani[Goroda[i].strana];
document.searchfrm.strana.length=k+2;
k++;
}
} //end if
}//end for
document.searchfrm.strana.length=k;
}
function reselect(field,check)
{
for (i=0;i<=field.length-1;i++)
{
if (field[i].value==check)
{
field.selectedIndex = i;
}
}
}
function change(what)
{
var selectedStrana = document.searchfrm.strana[document.searchfrm.strana.selectedIndex].value;
/*tmp = document.searchfrm.gorod.selectedIndex;
if(tmp >= 0)
selectedGorod = document.searchfrm.gorod[tmp].value;
else selectedGorod = 0;*/
var selectedGorod = document.searchfrm.gorod[document.searchfrm.gorod.selectedIndex].value;
createstrana(selectedStrana,selectedGorod);
creategorod(selectedStrana,selectedGorod);
reselect (document.searchfrm.strana,selectedStrana);
reselect (document.searchfrm.gorod,selectedGorod);
}
function makelist()
{
document.searchfrm.strana.length = 1;
document.searchfrm.strana[0].value = 999;
document.searchfrm.strana[0].text = "все";
for(i in Strani)
{
document.searchfrm.strana.length++;
l = document.searchfrm.strana.length;
document.searchfrm.strana[l-1].value = i;
document.searchfrm.strana[l-1].text = Strani[i];
}
}
|
через массивы номер данного в котором соответствует номеру выбранной строки в списке. смотри
var oblojka;-создаёш переменную для формулы var cena_oblojka; -создаёш переменную для массива cena_oblojka=[цена1,цена2,цена3...]; допустим в селекте в категории обложка у тебя выбрали третью строчку и эта цифра три допустим у тебя в пременной stroka_oblojka тогда при такой записи stroka_oblojka--; oblojka=cena_oblojka[stroka_oblojka]; ты получаеш стимость выбранной обложки и тоже самое с остальными селектами и составляющими формулы.0 строка в селекте помниться-это ничего не выбранно,ну а нумерация в массиве начинаеться с нуля поэтому строку нужно уменьшить на 1-чтобы обратиться к правильному элементу массива и при нажатии на кнопку посчитать цена окончательная=oblojka+другие составляющие(твоя формула-не знаю как ты там рассчитываеш сумируеш умножаеш и т.д) ну а как вывести эту цену окончательную ты знаеш. подобным образом ты выводиш изображение из массива изображений(либо массив предзагруженных изображений,либо текстовый массив с именами ссылок на изображения) |
Процентов 50 я не понял. К примеру как создать переменную для формулы и для массива? у меня в скрипте строка var color=0; в основном обозначатся цифрой. Мне в принципе надо только вывести привязаные списки. Чтоб к примеру при выборе в списке Пункт 1 загружались его подпункты. А уж поставить цены и описания я думаю справлюсь
Пункт 1 Подпункт 1-1 Подпункт 1-2 Подпункт 1-3 Пункт 2 Подпункт 2-1 Подпункт 2-2 Подпункт 2-3 Пункт 3 Подпункт 3-1 Подпункт 3-2 Пункт 4 Подпункт 4-1 Подпункт 4-2 |
ну вот подпункт 1-1-соответствеет элементу 0 массива 1. подпункт 1-2-соответствеет элементу 1 массива 1. подпункт 2-1-соответствеет элементу 0 массива 2. подпункт 2-2-соответствеет элементу 1 массива 2. с этим ясно? в гугле набери массив-и будет всё ясно(это набор связанных данных)
var oblojka;-создаёш переменную для формулы(цена обложки это) var cena_oblojka; -создаёш переменную для массива(это имя массива) cena_oblojka=[цена1,цена2,цена3...];(задаёш элементы массива -цену цифрой) допустим в селекте в категории обложка у тебя выбрали третью строчку и эта цифра три допустим у тебя в пременной stroka_oblojka тогда при такой записи stroka_oblojka--; oblojka=cena_oblojka[stroka_oblojka]; ты получаеш стимость выбранной обложки и почитай про селект-там всё это есть-и не один раз как пункты его создать и давай завязывать с этой темой-а то я получу по шее от админа сайта. |
Что-то на подобии этого?
var oblojka = new Array("oblojka", 1, true) var oblojka = ["oblojka", 1, true] Или я опять не так понял |
неправильно
var cena_oblojka=[цена1,цена2,цена3...]; почитай справочник-массив по английски array |
Вот, нашел в инете. Оно?
Пример 1. array_push()$stack = array ("orange", "banana"); array_push ($stack, "apple", "raspberry"); В результате выполнения этого примера переменная $stack будет содержать следующие элементы: Array ( [0] => orange [1] => banana [2] => apple [3] => raspberry ) |
|
http://informatics.mccme.ru/moodle/m...iew.php?id=531
здесь прочти общую информацию без заморачивания на язык и всё будет ясно-принципы одни для всех языков |
Это я видел, но все равно я не могу понять этих действий. Я попробую поискать примеры скриптов, может там что нибудь смогу понять
|
| Часовой пояс GMT +3, время: 16:36. |