Вход

Просмотр полной версии : Выбор изображения из списка


miles
21.02.2013, 11:57
Нужен скрипт, который автоматически изменяет изображение посредством выбора нужного через форму выпадающего списка.
Тоесть пользователь выбирает элемент в выпадающем списке, а изображение меняется в соответствии с тем элементом, которое выбрал пользователь в списке. Примерно вот так:
http://rghost.net/43957280/image.png
Такое часто можно встретить в интернет магазинах, но нужный скрипт я не смогу загуглить.
Заранее благодарен за любую помощь.

рони
21.02.2013, 12:06
miles,
напишите html код -- селектор -- элемент в котором будет показана картинка -- желательно массив тестовый самих ссылок на картинки -- сделайте хотябы первые шаги.

miles
21.02.2013, 13:53
miles,
напишите html код -- селектор -- элемент в котором будет показана картинка -- желательно массив тестовый самих ссылок на картинки -- сделайте хотябы первые шаги.
Рони, спасибо за ответ и совет. Я так и сделал.
Вот результат того, что я смог сделать сам: http://fortesting.comli.com/calc/option1.html
Но возникли другие сложности.

Нужно исходя из выбранных элементов подсчитать стоимость данного продукта. Например из трёх списков, пользователь выбрал первый, второй и первый элемент. допустим 1-ый элемент стоит 1$, а второй 2$. Тоесть сумма трёх выбранных элементов будет 1$+2$+1$ = 4$. Пользователю нужно вывести данную сумму. Задача простая, но я не знаю как осуществить её на java script. Пока добрался только до текущего момента.
Я не могу создать правильно второй и третий массивы, которые бы позволили выбирать другое изображение во второй колонке и третьей, где выбирается размер и правая сторона элемента.

ksa
21.02.2013, 13:57
из трёх списков, пользователь выбрал первый, второй и первый элемент
Где тестовый пример с теми "списками"?

miles
21.02.2013, 14:01
ksa,
http://fortesting.comli.com/calc/option1.html
Там три списка. Выбирая элемент каждого меняется изображение. Или я что-то не так понял?

ksa
21.02.2013, 14:21
Или я что-то не так понял?
Посмотри другие темы... Они просто изобилуют тестовыми примерами, которые прямо там же в сообщения можно запустить.

miles
21.02.2013, 14:34
ksa,
Тоесть тебя не устраивает мой пример, посмотреть который можно нажав на ссылку? И каким-то образом мне нужно встраивать мой пример в сообщение?
Если лень нажать CTRL+U в примере, то вот сохранил в виде файла.

miles
21.02.2013, 14:56
Вот код скрипта. Добавил несколько комментариев: http://pastebin.com/BMjzGhj4

ksa
21.02.2013, 15:07
посмотреть который можно нажав на ссылку?
Так что его смотреть-то? Его нужно как-то корректировать, дабы показать какой-то вариант решения...

рони
21.02.2013, 15:11
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>

ksa
21.02.2013, 15:18
И каким-то образом мне нужно встраивать мой пример в сообщение?
Да вот так. :)

<!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>