Можно ли посавить метку <label> на изображение?

M_A_X · February 12, 2010

Всем доброго времени суток!

Подскажите, может кто знает, каким образом можно поставить метку <label> на изображение в форме?

Задача такова: есть форма, в ней необходимо выбрать одно из нескольких изображений, выбор организован при помощи элементов radio. Возможно ли сделать так, чтобы при наведении и кликании на изображении выделялся сам элемент формы (кружок radio)? У меня пока сделать такое не получается (((

mishka · February 14, 2010

чего это везде? В ие все ок. Вот теперь сделай условие чтобы этот джс отрабатывал только для ие и все будет ок.

Если неверишь, то покачто для проверки можешь подключить джс через кондишинал комментс, где укажешь

Edited February 14, 2010 by mishka2

psywalker · February 14, 2010

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

1) У меня в ИЕ нихрена не ок.

2) А как сделать условия?

mishka · February 14, 2010

Макс, пожалуйста перестань по форуму хрен разсаживать, скоро поле хрена будет.

И далеко не у всех он ассоциируется с таким растением из котороко делают вкусный соус до холодца.

Тем более что ты не простой юзер на этом форуме.

Как имено в ие у тебя неправильно работает?

Подключи через кондишинал, и сравни работу с мозиллой. У меня все одинаково.

насчет условия в джс то посмотри мой пример.

var _browser = navigator.userAgent.toLowerCase();
if(_browser.indexOf('msie')!=-1){
...
}

Edited February 14, 2010 by mishka2

psywalker · February 14, 2010

Макс, пожалуйста перестань по форуму хрен разсаживать, скоро поле хрена будет.
И далеко не у всех он ассоциируется с таким растением из котороко делают вкусный соус до холодца.
Тем более что ты не простой юзер на этом форуме.

Да хрен с ним :lol:

Как имено в ие у тебя неправильно работает?

У меня везде одно и тоже. Везде работает галимо, только по двойному щелчку.

Подключи через кондишинал, и сравни работу с мозиллой. У меня все одинаково.

Ты имеешь ввиду подключить эти условия?

var _browser = navigator.userAgent.toLowerCase();
if(_browser.indexOf('msie')!=-1){
...
}

?

А я не знаю, что это значит, для меня это тёмный лес.

mishka · February 14, 2010

ты что забыл уже что такое кондишинал комментс?

Вот твой пример, тесть. Только имгу я конечно свою вставлял.

Сравни с работой в мозиле.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bg</title>
<style type="text/css">
	*{ margin: 0; padding:0}

	html, body { background: #999; height: 100%; }
	div { padding: 5px 5px 30px; background: #fff; width: 100px;}
	img {

		margin-top: 20px;
		border: 1px solid #000;
		padding: 3px;

	}
	img{width:50px;height:50px;}

</style>

</head>

<body>
<form action="#" id="form">
	<fieldset id="checkbox">

		<input type="checkbox" id="check1" />
		<label for="check1"><img src="autumn.gif" /></label>

		<input type="checkbox" id="check2" />
		<label for="check2"><img src="autumn.gif" /></label>

		<input type="checkbox" id="check3" />
		<label for="check3"><img src="autumn.gif" /></label>

	</fieldset>
	<fieldset id="radio">

		<input type="radio" id="radio1" name="radio" />
		<label for="radio1"><img src="autumn.gif" /></label>

		<input type="radio" id="radio2" name="radio" />
		<label for="radio2"><img src="autumn.gif" /></label>

		<input type="radio" id="radio3" name="radio" />
		<label for="radio3"><img src="autumn.gif" /></label>

	</fieldset>
</form>
<!--[if ie]>
<script>
		var divCheckbox = document.getElementById('checkbox')
	var divRadio = document.getElementById('radio')
	var imgCheckbox = divCheckbox.getElementsByTagName('img')
	var inputCheckbox = divCheckbox.getElementsByTagName('input')
	var imgRadio = divRadio.getElementsByTagName('img')
	var inputRadio = divRadio.getElementsByTagName('input')

	for(var i = 0; i<imgCheckbox.length;i++)imgCheckbox.item(i).onclick=function(){test(this)}
	for(var k = 0; k<imgRadio.length;k++)imgRadio.item(k).onclick=function(){test(this)}
	function test(node){

		for(var i = 0; i<imgCheckbox.length;i++)imgCheckbox.item(i).input = inputCheckbox.item(i)
		for(var k = 0; k<imgRadio.length;k++)imgRadio.item(k).input = inputRadio.item(k)
		if(node.input.type == 'checkbox'){

			if(node.input.checked){

				node.input.checked=false
			}else{node.input.checked=true}
		}
		if(node.input.type == 'radio'){

			for(var i = 0; i<inputRadio.length;i++)inputRadio.item(i).checked=false
			if(node.input.checked == true){
				node.input.checked=false
			}else{node.input.checked=true}
		}
	}
</script>
<![endif]-->
</body>
</html>

Edited February 14, 2010 by mishka2

psywalker · February 14, 2010

В ИЕ галимо работает опять-же.

mishka · February 14, 2010

Почему у меня и в мозилле и в ие работает все одинаково, а у тебя только в ие плохо?

psywalker · February 14, 2010

Почему у меня и в мозилле и в ие работает все одинаково, а у тебя только в ие плохо?

А я думаешь знаю почему? :lol:

Надо подождать независимых экспертов тада.

psywalker · February 14, 2010

Смотри медведь, я обнаружил одну закономерность.

Значит когда я использую for/id, то JS вообще перестаёт действовать как будто и чекбоксы, радиобатонны и в общем форма начинает работать сама по себе. Т.е. видимо как должны работать эти вещи без JS.

А когда я НЕ использую for/id, то уже в дело вступает JS и всё работает нормал, везде кроме ИЕ.

Вот в чём прикол, я так и не пойму. Надеюсь, что кто нибудь сможет объяснить.

Sign In

Можно ли посавить метку <label> на изображение?

Question

Link to comment

Share on other sites

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

59 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information