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

M_A_X · February 12, 2010

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

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

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

psywalker · February 12, 2010

Я не понял задачу, т.е. у тебя есть форма с инпутами radio, каждый из них отвечает за определённое изображение, картинку? И ты хочешь, чтобы при клике на картинку врубался определённый инпут? Или наоборот?

mishka · February 12, 2010

можна, но ие6 непоймет.

psywalker · February 12, 2010

mishka2 said:
можна, но ие6 непоймет.

Медведь, а объясни плиз задачу, покажи решение твоё, т.е. всё на ЦСС решается? Это же тока на JS реал сотворить?

Я себе это так примерно представлял

<!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>radio images</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	label { display: block;}
	input { margin-right: 5px;}

</style>

</head><body>
<img src="img1.png" id="one" onclick="img(this);" />
<img src="img2.png" id="two" onclick="img(this);"/>
<img src="img3.gif" id="three" onclick="img(this);"/>
<form action="#" id="form">

		<label><input type='radio' value='1'>Картинка 1</label>
		<label><input type='radio' value='2'>Картинка 2</label>
		<label><input type='radio' value='3'>Картинка 3</label>

</form>


<script type="text/javascript">

	function img(node){
		var form = document.getElementById('form')
		var formInput = form.getElementsByTagName('input')
		for(var i = 0; i<formInput.length;i++)formInput.item(i).checked=false
		if(node.getAttribute('id')=='one')formInput.item(0).checked=true
		if(node.getAttribute('id')=='two')formInput.item(1).checked=true
		if(node.getAttribute('id')=='three')formInput.item(2).checked=true
	}

</script>

</body></html>

M_A_X · February 12, 2010

to mishka2:

Такая вот конструкция, к сожалению, у меня не пашет ни в IE6, ни в IE8...

</form>

to psywalker:

Ваше решение понравилось, действительно работает. Спасибо!

mishka · February 12, 2010

да уж, действительно в ие7 тоже неработает... В ие8 нет возможности посмотреть.

Edited February 12, 2010 by mishka2

mishka · February 12, 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></title>
	<script type="text/javascript"><!--
		function initScript(){
			var _img = document.getElementsByTagName('img')
			var _inputs = document.getElementsByTagName('input')
			for(i=0;i<_img.length;i++){
				_img[i].onclick = function(){
					if(document.getElementById(this.getAttribute('alt'))){
						document.getElementById(this.getAttribute('alt')).checked=true
					}
				}
			}
		}
		if(window.addEventListener)window.addEventListener("load",initScript,false);
		else if(window.attachEvent)window.attachEvent("onload",initScript);
	//--></script>
</head>
<body>
<div id="wrapper">
	<form action="#">
		<fieldset>
			<input id="img1" type="radio" name="radiogroup" />
			<label for="img1"><img src="autumn.gif" alt="img1" width="50" height="50" /></label>
			<input id="img2" type="radio" name="radiogroup" />
			<label for="img2"><img src="autumn.gif" alt="img2" width="50" height="50" /></label>
		</fieldset>
	</form>
</div>
</body>
</html>

Жду комментов спецов.

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

ктонить поможет?

Edited February 12, 2010 by mishka2

psywalker · February 13, 2010

M_A_X said:
to psywalker:
Ваше решение понравилось, действительно работает. Спасибо!

Да не за что, мы ещё будет его обдумывать, нужно усовершенствовать.

s0rr0w · February 13, 2010

document.getElementsByTagName('img')

Выберет все картинки на странице. Это нехорошо.

mishka · February 13, 2010

Quote
document.getElementsByTagName('img')
Выберет все картинки на странице. Это нехорошо.

Что тут нехорошего?

Я же потом делаю проверку if(document.getElementById(this.getAttribute('alt'))).

Но зато более универсальный способ. И полностью джс выносится в отдельный файл. Это значит что его можна легко подключить.

Но проблема в том что с чекбоксами неправильно работает

if(document.getElementById(this.getAttribute('alt')))

Вероятность того что какойнить айдишник совпадет с альтом картинки не большая. Я бы сказал ничтожна.

s0rr0w · February 13, 2010

mishka2 said:
Что тут нехорошего?
Я же потом делаю проверку if(document.getElementById(this.getAttribute('alt'))).
Но зато более универсальный способ. И полностью джс выносится в отдельный файл. Это значит что его можна легко подключить.
Но проблема в том что с чекбоксами неправильно работает
if(document.getElementById(this.getAttribute('alt')))
Вероятность того что какойнить айдишник совпадет с альтом картинки не большая. Я бы сказал ничтожна.

Это не повод присваивать обработчик всем картинкам на странице.

mishka · February 13, 2010

Quote
Это не повод присваивать обработчик всем картинкам на странице.

Да я пытался вылавливать только те картинки которые находятся в лейбле, но столкнулся с тем что ие их невидит...

Все браузеры показывают сколько их, и их параметры посмотреть можна. А ие просто их невидит...

Предложи вариант более оптимальный.

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

Quote
Это не повод присваивать обработчик всем картинкам на странице.

Или предлагаешь вызов функции делать так:

Но где же принципы разделения отображения и содержания. Куда подевалась идея о чистом HTML

Edited February 13, 2010 by mishka2

s0rr0w · February 13, 2010

mishka2 said:
Да я пытался вылавливать только те картинки которые находятся в лейбле, но столкнулся с тем что ие их невидит...
Все браузеры показывают сколько их, и их параметры посмотреть можна. А ие просто их невидит...
Предложи вариант более оптимальный.
Также напомню что лейбл невсегда может находится в форме. Поэтому от идеи вылавливать только те картинки которые в форме, я сразу отказался.

Эту задачу можно решать несколькими способами

1. Ограничение зоны видимости скрипта, путем указания контейнера, внутри которого картинкам будет присвоен обработчик

2. Реагирование только на специальные картинки, у которых есть некий признак, что их нужно обрабатывать. Обычно используется className для этого

3. Картинкам присваивать обработчик, который сделает с ними все что нужно по какому-то событию. (StateController)

mishka2 said:
Но где же принципы разделения отображения и содержания. Куда подевалась идея о чистом HTML

У меня ее никогда не было. Я не сторонник бредовых идей.

mishka · February 13, 2010

s0rr0w said:
Эту задачу можно решать несколькими способами
1. Ограничение зоны видимости скрипта, путем указания контейнера, внутри которого картинкам будет присвоен обработчик
2. Реагирование только на специальные картинки, у которых есть некий признак, что их нужно обрабатывать. Обычно используется className для этого
3. Картинкам присваивать обработчик, который сделает с ними все что нужно по какому-то событию. (StateController)

1. Это не универсально

2. Этот способ, имхо, самый оптимальный.

3. Ну это, имхо, нехорошо. Как по мне это всеравно что стили писать прям в html

Это чтото типа <div style="..."></div>, нехорошо...

Но хватит спорить о том как делать. Давайте делать. Я так и несмог добится адекватной работы с чекбоксами.

Edited February 13, 2010 by mishka2

psywalker · February 13, 2010

mishka2 said:
Но хватит спорить о том как делать. Давайте делать. Я так и несмог добится адекватной работы с чекбоксами.

Опиши задачу по полочкам, я попробую сделать.

Вот смотри с чекбоксами, чем плохо?

<!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 { display: block; margin-top: 20px; border: 1px solid #000; padding: 3px;}

</style>

</head>

<body>

	<form id="form" action="#">
		<input type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />
	</form>

	<div id="divImg">
		<img src="img1.png" onclick="test(this)" />
		<img src="img2.png" onclick="test(this)" />
		<img src="img3.png" onclick="test(this)" />
	</div>

</div>
<script>

	var divImg = document.getElementById('divImg')
	var img = divImg.getElementsByTagName('img')

	var form = document.getElementById('form')
	var input = form.getElementsByTagName('input')


	img.item(0).input = input.item(0) 
	img.item(1).input = input.item(1) 
	img.item(2).input = input.item(2) 

	function test(node){
		for(var i = 0; i<input.length;i++) input.item(i).checked=false
		node.input.checked = true;
	}


</script>
</body>
</html>

mishka · February 13, 2010

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

Также к <img src="img2.png" onclick="test(this)" /> я отношусь аналогично как к <div style="..."></div>

psywalker · February 13, 2010

mishka2 said:
Плохо тем что чекбоксы это не радио. Их можна выбирать сразу несколько, они не связанны друг с другом. И еще при первом клике на чекбокс он становится активным, повторный клик должен снять галочку.
Также к <img src="img2.png" onclick="test(this)" /> я отношусь аналогично как к <div style="..."></div>

Не вопрос, а что ты скажешь на это?

<!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 { display: block; margin-top: 20px; border: 1px solid #000; padding: 3px;}

</style>

</head>

<body>

	<div id="conteiner">

		<input type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />

		<img src="img1.png" />
		<img src="img2.png" />
		<img src="img3.png" />


	</div>
<script>

	var div = document.getElementById('conteiner')
	var img = div.getElementsByTagName('img')
	var input = div.getElementsByTagName('input')
	for(var i = 0; i<img.length;i++)img.item(i).onclick=function(){test(this)}

	function test(node){
		for(var i = 0; i<img.length;i++)img.item(i).input = input.item(i)
		for(var i = 0; i<input.length;i++)input.item(i).checked=false
		node.input.checked=true
	}


</script>
</body>
</html>

mishka · February 13, 2010

Толи я чегото непонимаю, толи ты....

psywalker · February 13, 2010

mishka2 said:
Толи я чегото непонимаю, толи ты....

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

mishka · February 13, 2010

Макс, как должны работать чекбоксы? И как радиобоксы?

Edited February 13, 2010 by mishka2

psywalker · February 13, 2010

mishka2 said:
Макс, как должны работать чекбоксы? И как радиобоксы?

Ну вот же, то что ты хотел, нажимаешь на чекбокс, галочка появляется, отжимаешь - убирается, что ещё нужно?

mishka · February 13, 2010

чтото у меня при повторном клике на картинке галочка не пропадает...

psywalker · February 13, 2010

mishka2 said:
чтото у меня при повторном клике на картинке галочка не пропадает...

Аа, ну так бы и сказал, ща попробуем.

Лови, не вопрос

<!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 { display: block; margin-top: 20px; border: 1px solid #000; padding: 3px;}

</style>

</head>

<body>

	<div id="conteiner">

		<input type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />

		<img src="img1.png" />
		<img src="img2.png" />
		<img src="img3.png" />


	</div>
<script>

	var div = document.getElementById('conteiner')
	var img = div.getElementsByTagName('img')
	var input = div.getElementsByTagName('input')
	for(var i = 0; i<img.length;i++)img.item(i).onclick=function(){test(this)}

	function test(node){
		for(var i = 0; i<img.length;i++)img.item(i).input = input.item(i)


		if(node.input.checked==false){
			for(var i = 0; i<input.length;i++)input.item(i).checked=false
			node.input.checked=true
		}else{node.input.checked=false}
	}


</script>
</body>
</html>

mishka · February 13, 2010

Да что же ты такой невнимательный? Макс, как должны работать чекбоксы, и как радиобоксы. В чем их принципиальное отличие?

psywalker · February 13, 2010

mishka2 said:
Да что же ты такой невнимательный? Макс, как должны работать чекбоксы, и как радиобоксы. В чем их принципиальное отличие?

Да хрен его знает, твои отличия, ты мне сказал как сделать, я сделал.

Ставь задачу и всё, а дальше я сам.

радиобатонны - это когда мы один выбираем вариант, а чекбоксы- это если несколько.

mishka · February 13, 2010

Quote
Да хрен его знает, твои отличия, ты мне сказал как сделать, я сделал.
Ставь задачу и всё, а дальше я сам.

Несколько говоришь...

так вот попробуй выбрать несколько в своем варианте!

Ну вот мои ваяния прошу протестить и оставить отзывы

<!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></title>
	<script type="text/javascript"><!--
		function initScript(){
			var IE='\v'=='v';
			if(IE){
				var _imgLabel=document.getElementsByTagName('img')
				for (var i=0;i<_imgLabel.length;i++){
					if(_imgLabel[i].className.indexOf('label')!=-1){
						_imgLabel[i].onclick = function(){
							if(document.getElementById(this.getAttribute('alt')).checked==false&&document.getElementById(this.getAttribute('alt')).type=='checkbox'){
								document.getElementById(this.getAttribute('alt')).checked=true
							}else{document.getElementById(this.getAttribute('alt')).checked=false}
							if(document.getElementById(this.getAttribute('alt')).checked==false&&document.getElementById(this.getAttribute('alt')).type=='radio'){
								document.getElementById(this.getAttribute('alt')).checked=true
							}
						}
					}
				}
			}
		}
		if(window.addEventListener)window.addEventListener("load",initScript,false);
		else if(window.attachEvent)window.attachEvent("onload",initScript);
	//--></script>
</head>
<body>
<div id="wrapper">
	<form action="#">
		<fieldset>
			<input id="img1" type="radio" name="radiogroup" checked="checked" />
			<label for="img1"><img class="label" src="autumn.gif" alt="img1" width="50" height="50" /></label>
			<input id="img2" type="radio" name="radiogroup" />
			<label for="img2"><img class="label" src="autumn.gif" alt="img2" width="50" height="50" /></label>

			<input id="img3" type="radio" name="radiogroup2" />
			<label for="img3"><img class="label" src="autumn.gif" alt="img3" width="50" height="50" /></label>
			<input id="img4" type="radio" name="radiogroup2" checked="checked" />
			<label for="img4"><img class="label" src="autumn.gif" alt="img4" width="50" height="50" /></label>

			<input id="img5" type="checkbox" />
			<label for="img5"><img class="label" src="autumn.gif" alt="img5" width="50" height="50" /></label>
			<input id="img6" type="checkbox" checked="checked" />
			<label for="img6"><img class="label" src="autumn.gif" alt="img6" width="50" height="50" /></label>
		</fieldset>
	</form>
</div>
</body>
</html>

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

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

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