Выбор изображения из списка
Нужен скрипт, который автоматически изменяет изображение посредством выбора нужного через форму выпадающего списка.
Тоесть пользователь выбирает элемент в выпадающем списке, а изображение меняется в соответствии с тем элементом, которое выбрал пользователь в списке. Примерно вот так: ![]() Такое часто можно встретить в интернет магазинах, но нужный скрипт я не смогу загуглить. Заранее благодарен за любую помощь. |
miles,
напишите html код -- селектор -- элемент в котором будет показана картинка -- желательно массив тестовый самих ссылок на картинки -- сделайте хотябы первые шаги. |
Цитата:
Вот результат того, что я смог сделать сам: http://fortesting.comli.com/calc/option1.html Но возникли другие сложности.
|
Цитата:
|
ksa,
http://fortesting.comli.com/calc/option1.html Там три списка. Выбирая элемент каждого меняется изображение. Или я что-то не так понял? |
Цитата:
|
Вложений: 1
ksa,
Тоесть тебя не устраивает мой пример, посмотреть который можно нажав на ссылку? И каким-то образом мне нужно встраивать мой пример в сообщение? Если лень нажать CTRL+U в примере, то вот сохранил в виде файла. |
Вот код скрипта. Добавил несколько комментариев: http://pastebin.com/BMjzGhj4
|
Цитата:
|
miles, код лучше располагать здесь, так вам быстрее ответят.не особо понятно где три массива
Вариант ... (очередной дубликат зависимых селектов, которых множество на форуме) <!DOCTYPE html> <html> <head> <title>Пример работы калькулятора</title> <meta charset="UTF-8"> </head> <body> <table cols="2" width="40%"> <tr> <th><select name="item"> </select></th> <th><select name="item"> </select></th> </tr> <tr> <th><img name="tool"></th> <th id="total">1$</th> </tr> </table> <form> <script type="text/javascript"> var base = [ { src : "http://javascript.ru/forum/images/smilies/thank_you2.gif", height : [1, 2, 3, 4], price : [1, 1, 1, 1], text : "Оплеточные рукава" }, { src : "http://javascript.ru/forum/images/smilies/dance3.gif", height : [1, 2, 3, 4, 5], price : [2, 2, 2, 2, 1],//за 5 метров скидка text : "Навивочные рукава" } ] var select = document.getElementsByTagName('select')[0]; for (var k=0; k< base.length; k++) { select.options[k] = new Option(base[k]['text'], k); } function init() { var i = this.selectedIndex || 0 var img = document.getElementsByTagName('img')[0] var src = base[i]['src']; img.src = src; var select = document.getElementsByTagName('select')[1]; select.options.length=0 var height = base[i]['height']; var price = base[i]['price']; for (var k=0; k< height.length; k++) { select.options[k] = new Option(height[k]+"м", height[k]*price[k]); } var total = document.getElementById('total'); total.innerHTML = height[0]*price[0]+"$" } select.addEventListener('change', init); init(); select = document.getElementsByTagName('select')[1]; function count() { var i = this.selectedIndex || 0; var value = this.options[i].value ; var total = document.getElementById('total'); total.innerHTML = value+"$" } select.addEventListener('change', count); </script> </form> </body> </html> |
Цитата:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <!-- <link rel="stylesheet" type="text/css" href="tmp.css" /> --> <style type="text/css"> </style> <script type="text/javascript"> /** Последовательно создаю три массива для хранения изображений из трёх выпадающих списков **/ left = new Array() for(i=0;i<3;i++) { left[i] = new Image() if(i==0) left[i].src = "http://fortesting.comli.com/calc/img/calc/1l.gif" if(i==1) left[i].src = "http://fortesting.comli.com/calc/img/calc/2l.gif" } center = new Array() for(i=0;i<3;i++) { center[i] = new Image() if(i==0) center[i].src = "http://fortesting.comli.com/calc/img/calc/1m.gif" if(i==1) center[i].src = "http://fortesting.comli.com/calc/img/calc/2m.gif" } right = new Array() for(i=0;i<3;i++) { right[i] = new Image() if(i==0) right[i].src = "http://fortesting.comli.com/calc/img/calc/1r.gif" if(i==1) right[i].src = "http://fortesting.comli.com/calc/img/calc/2r.gif" } /** Инициализация смены изображения исходя из выбранного пункта **/ function l_image() { document.images[0].src = left[document.left_form.item.selectedIndex].src } function c_image() { document.images[1].src = center[document.center_form.item.selectedIndex].src } function r_image() { document.images[2].src = right[document.right_form.item.selectedIndex].src } function calc() { var o=document.getElementsByName('item'); var sum=0; for (var i=0; i<o.length; i++) { sum+=+o[i].value; }; alert(sum); } </script> </head> <body> <form method="post" action="calc.php" name=left_form> <TABLE COLS=2 WIDTH="40%" > <TR> <th> <select name='item' onChange=l_image()> <option value='1' selected>Оплеточные рукава</option> <option value='2'>Навивочные рукава</option> </select> </th> <th> <select name='item' onChange=c_image()> <option value='10' selected>1 метр</option> <option value='20'>2 метра</option> </select> </th> <th> <select name='item' onChange=r_image()> <option value='100' selected>Оплеточные рукава</option> <option value='200'>Навивочные рукава</option> </select> </th> </tr> <tr> <th> <IMG SRC="http://fortesting.comli.com/calc/img/calc/1l.gif" NAME="tool"> </th> <th> <IMG SRC="http://fortesting.comli.com/calc/img/calc/1m.gif" NAME="tool"> </th> <th> <IMG SRC="http://fortesting.comli.com/calc/img/calc/1l.gif" NAME="tool"> </th> </TR> </TABLE> <input type="button" value="Подсчитать стоимость" onclick='calc();'> </form> </body> </html> |
Часовой пояс GMT +3, время: 04:10. |