Совмещение формы(option) и css,html

[FiRеFоX]

Выберите картинку:
<input type="radio" name="img" value="1"><img src="img/1.jpg">
<input type="radio" name="img" value="2"><img src="img/2.jpg">
кнопка
Тут всё понятно, рядом с картинками будет списки выбора, через пост передадутся данные, ну и в дальнейшем их обработка и тд
Как сделать, что бы вместо этого, можно было кликать на картинку, она обведется рамкой каким то цветом, это будет означать что выбрали картинку?
Где то видел, что есть тоже самое, только выбирать прям картинку, нажимая на нее, ну и затем жмешь кнопку..

 

[Snickers]

без явы тут не обойтись наверно. по клику на картинку задавать хиден полю, ид этой картинки. можно ещё бордер нажатой картинке задавать, а когда нажимаешь на другую, то сбрасывать бордер у всех остальных. и все в принципе.

 

[FiRеFоX]

без явы тут не обойтись наверно. по клику на картинку задавать хиден полю, ид этой картинки. можно ещё бордер нажатой картинке задавать, а когда нажимаешь на другую, то сбрасывать бордер у всех остальных. и все в принципе.

А как задать бордер? Я только могу сделать при наведении, как ссылке.. это через цсс... а яву, наверное, такую не смогут телы поддерживать

 

[Snickers]

style картинке просто задавать

 

[Serg@NT]

Ну, примерно вот так:

<script type="text/javascript">
function select_image (img) {
 for(i=0;i<=[кол-во изображений];i++) {
   document.getElementById('img_'+i).style.border = 'none';
 }
 img.style.border = '3px solid #0000FF';
 document.getElementById('selImg').value = img.id;
}
</script>
...
<img id="img_1" ... onclick="select_image(this);" />
<img id="img_2" ... onclick="select_image(this);" />
<img id="img_3" ... onclick="select_image(this);" />
...
<input type="hidden" id="selImg" value="" />
...

Цикл можно организовать по-разному, конечно, в зависимости от того, знаете ли вы сколько всего изображений будет.

 

[FiRеFоX]

Ну, примерно вот так:

<script type="text/javascript">
function select_image (img) {
 for(i=0;i<=[кол-во изображений];i++) {
   document.getElementById('img_'+i).style.border = 'none';
 }
 img.style.border = '3px solid #0000FF';
 document.getElementById('selImg').value = img.id;
}
</script>
...
<img id="img_1" ... onclick="select_image(this);" />
<img id="img_2" ... onclick="select_image(this);" />
<img id="img_3" ... onclick="select_image(this);" />
...
<input type="hidden" id="selImg" value="" />
...

Цикл можно организовать по-разному, конечно, в зависимости от того, знаете ли вы сколько всего изображений будет.

Не работает

<script type="text/javascript">
function select_image (img) {
 for(i=0; i<=3; i++) {
   document.getElementById('img_'+i).style.border = 'none';
 }
 img.style.border = '3px solid #0000FF';
 document.getElementById('selImg').value = img.id;
}
</script>
<img id="img_1" src="images/icons/1.jpg" onclick="select_image(this);" />
<img id="img_2" src="images/icons/2.jpg" onclick="select_image(this);" />
<img id="img_3" src="images/icons/3.jpg" onclick="select_image(this);" />
<input type="hidden" id="selImg" value="1" />
<input type="hidden" id="selImg" value="2" />
<input type="hidden" id="selImg" value="3" />

Может вы меня не так поняли?
У меня раньше вот так было:

$rand=rand(0,5000);
<input type="radio" name="img" value="'.$rand.'"><img src="images/icons/1.jpg">
<input type="radio" name="img" value="'.$rand.'"><img src="images/icons/2.jpg">
<input type="radio" name="img" value="'.$rand.'"><img src="images/icons/3.jpg">

И вот рядом с этим изображением кружочек или как оно называется, вобщем выбрал кружочек и передел данные..
Мне над что бы кружочков не было, а выбирать можно было тыкая на изображение)
Во. Вот так можно сделать?

 

[Serg@NT]

Зачем вы столько hidden полей натыкали? Оно должно быть одно. Я, правда, name забыл указать там. Если у вас кружочки назывались "img", то вместо них поставьте 1 hidden поле. В него будет javascript'ом записываться id.

<input type="hidden" name="img" id="selImg" value="" />

 

[FiRеFоX]

Зачем вы столько hidden полей натыкали? Оно должно быть одно. Я, правда, name забыл указать там. Если у вас кружочки назывались "img", то вместо них поставьте 1 hidden поле. В него будет javascript9;ом записываться id.

<input type="hidden" name="img" id="selImg" value="" />

Всеравно не работает
Я яву плохо знаю, поэтому не знаю в чем ошибка Вроде всё правильно... 3 изображения поставил, в цикле их тож 3 поставил, изображения вылезли, кликаю на них и ничего

<script type="text/javascript">
function select_image (img) {
 for(i=0; i<=3; i++) {
   document.getElementById('img_'+i).style.border = 'none';
 }
 img.style.border = '3px solid #0000FF';
 document.getElementById('selImg').value = img.id;
}
</script>
<img id="img_1" src="images/icons/1.jpg" onclick="select_image(this);" />
<img id="img_2" src="images/icons/2.jpg" onclick="select_image(this);" />
<img id="img_3" src="images/icons/3.jpg" onclick="select_image(this);" />
<input type="hidden" name="this" id="selImg" value="" />

Всё)) сделал.
В цикле вместо i=0 надо поставить i=1
Вам плюсеГ
Ещё вопрос: Можно ли как то узнать поддерживает ли браузер яваскрипт? Ну или включен он или нет?

 

[Serg@NT]

да, пардон, хотел написать там ещё проверку на наличие объекта, но поленился В идеале надо бы так:

...
 for(i=1; i<=3; i++) {
  if(document.getElementById('img_'+i))
   document.getElementById('img_'+i).style.border = 'none';
 }
...

 

[ard4x]

а почему не воспользоваться jquery, чтобы избавиться от этого монструозного кода. в хтмл достаточно того. что в первом посте, и пара строчек кода jquery в хэде страницы

 

[Serg@NT]

а почему не воспользоваться jquery, чтобы избавиться от этого монструозного кода. в хтмл достаточно того. что в первом посте, и пара строчек кода jquery в хэде страницы

Действительно, давайте 2+2 на мейнфреймах считать, фигли мелочиться?