Написал как понял из задания
Как я понял, изначально галочки должны быть выставленны. Если нет, т.е. когда ставишь галочку не видишь рисунке к ней относяшегося, перепишу код.
Так вот, не нужные галочки снимаешь, с ними скрывается соответствующий рисунок. Остаются нужные.
<!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 рубликов вполне хватит |
