Показать сообщение отдельно
  #9 (permalink)  
Старый 26.01.2011, 13:21
Кандидат Javascript-наук
Отправить личное сообщение для Иваннн Посмотреть профиль Найти все сообщения от Иваннн
 
Регистрация: 31.05.2010
Сообщений: 106

Написал как понял из задания
Как я понял, изначально галочки должны быть выставленны. Если нет, т.е. когда ставишь галочку не видишь рисунке к ней относяшегося, перепишу код.
Так вот, не нужные галочки снимаешь, с ними скрывается соответствующий рисунок. Остаются нужные.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
   <head>
      <title>Пример</title>
	  <style type='text/css'>
	  .table1 {border:0; margin:0; width:100%; text-align:center}
	  #scalable {width:200px; text-align:left}
	  a{border:0; margin:3px}
	  a img{width:50px;height:50px;}
	  </style>
<script type="text/javascript">
	  var arrayOfA=[];
	  /*назначаем всем элементам класса chekbox обработчик события и свойвство checked ставим в true*/
		function init() {
			for (var i=0; i<document.forma.chekbox.length; i++){
				document.forma.chekbox[i].checked=true;
				
				document.forma.chekbox[i].onclick=doUnvisible;
				}
		}
		function doUnvisible() {
		/*при клике на галочке составляется имя класса элементов, свойвство visibility которых должно измениться и после проверки данное свойвство меняется*/
			var classOfA="class_"+this.id;
			
			for (var j=0; j<document.getElementById('imges').childNodes.length; j++){
				if (document.getElementById('imges').childNodes[j].nodeType!=1||document.getElementById('imges').childNodes[j].className!=classOfA) {continue}
				if(this.checked==false){
				document.getElementById('imges').childNodes[j].style.visibility='hidden';
				
				}
				else {document.getElementById('imges').childNodes[j].style.visibility='visible';
				}
			}
		}
 
      </script>
</head>
   <body onload='init()'>
		<table class='table1'>
			<tr>
				<td id='scalable' width='200'>
					<form name='forma'>
						<input  name='chekbox' type="checkbox" id='a1' > <label for='a1'>Текст1</label><br>
						<input name='chekbox' type="checkbox" id='a2' > <label for='a2'>Текст1</label><br>
						<input name='chekbox' type="checkbox" id='a3' > <label for='a3'>Текст1</label><br>
						<input name='chekbox' type="checkbox" id='a4' > <label for='a4'>Текст1</label><br>
						<input name='chekbox' type="checkbox" id='a5' > <label for='a5'>Текст1</label><br>
						<input name='chekbox' type="checkbox" id='a6' > <label for='a6'>Текст1</label><br>
						<input name='chekbox' type="checkbox" id='a7' > <label for='a7'>Текст1</label><br>
						<input type="submit" value='Отправка'  > 
					</form>
				</td>
				<td id='imges'>
					<a class='class_a1' href='#'><img src='gif1.gif' alt='gif1'></a>
					<a class='class_a1' href='#'><img src='gif2.gif' alt='gif1'></a>
					<a class='class_a2' href='#'><img src='gif3.gif' alt='gif1'></a>
					<a class='class_a2' href='#'><img src='gif4.gif' alt='gif1'></a>
					<a class='class_a3' href='#'><img src='gif5.gif' alt='gif1'></a>
					<a class='class_a4' href='#'><img src='gif6.gif' alt='gif1'></a>
					<a class='class_a4' href='#'><img src='gif7.gif' alt='gif1'></a>
					<a class='class_a5' href='#'><img src='gif8.gif' alt='gif1'></a>
					<a class='class_a5' href='#'><img src='gif9.gif' alt='gif1'></a>
					<a class='class_a6' href='#'><img src='gif10.gif' alt='gif1'></a>
					<a class='class_a6' href='#'><img src='gif11.gif' alt='gif1'></a>
					<a class='class_a7' href='#'><img src='gif12.gif' alt='gif1'></a>
					<a class='class_a7' href='#'><img src='gif13.gif' alt='gif1'></a>
					<a class='class_a1' href='#'><img src='gif1.gif' alt='gif1'></a>
					<a class='class_a1' href='#'><img src='gif2.gif' alt='gif1'></a>
					<a class='class_a2' href='#'><img src='gif3.gif' alt='gif1'></a>
					<a class='class_a2' href='#'><img src='gif4.gif' alt='gif1'></a>
					<a class='class_a3' href='#'><img src='gif5.gif' alt='gif1'></a>
					<a class='class_a4' href='#'><img src='gif6.gif' alt='gif1'></a>
					<a class='class_a4' href='#'><img src='gif7.gif' alt='gif1'></a>
					<a class='class_a5' href='#'><img src='gif8.gif' alt='gif1'></a>
					<a class='class_a5' href='#'><img src='gif9.gif' alt='gif1'></a>
					<a class='class_a6' href='#'><img src='gif10.gif' alt='gif1'></a>
					<a class='class_a6' href='#'><img src='gif11.gif' alt='gif1'></a>
					<a class='class_a7' href='#'><img src='gif12.gif' alt='gif1'></a>
					<a class='class_a7' href='#'><img src='gif13.gif' alt='gif1'></a>
				</td>		
		
		
        </body>
</html>


Можно другой вариант,чтобы на click браузер не тормазил, если картинок много- после загрузки создаются объекты с именами равными(похожими) на имена классов элемента A с массивом ссылок на соответсвуюшие элементы картинок с идентичным class. а при clicke выбирается объект и в цикле всем его определеным свойвствам без разбора меняется значение visibilyty

Если написаное-ответ на вопрос 10 рубликов вполне хватит
Ответить с цитированием