Всем здрасьте! Помогите чайнику!
Есть таблица. В каждой ячейке расположены полупрозрачные картинки. При наведении курсора на одну из них она (и все картинки с таким же классом) становятся не прозрачными (100% цвета). Убираешь курсор - цвет пропадает. Хочу сделать, что бы при нажатии на любую из подсвеченных картинок - подсветка оставалась на всех картинках. При нажатии на другую группу картинок она тоже приобретала полный цвет. При втором нажатии - возврат в исходное положение. Сейчас подсветка не фиксируется. Реализовано через скрипт:
<style type="text/css" media="screen">
span.hovered {
filter: alpha(Opacity=100); /* Полупрозрачность для IE */
opacity: 1.0; /* Полупрозрачность для других браузеров */
}
span {
filter: alpha(Opacity=40); /* Полупрозрачность для IE */
opacity: 0.40; /* Полупрозрачность для других браузеров */
}
</style>
Подсказали вот это: http://jsbin.com/yumiv/1/edit?output

Это как раз то, что мне хотелось бы реализовать!
Но не могу разобраться, что вставить в свой скрипт!
К сожалению не силен в создании сайтов! Знаю, что надо учится, но совершенно нет времени! Может кто поможет?

Програмёр,
Спасибо что откликнулись!
Добавил в css:
автор<style type="text/css" media="screen">
span.hovered {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
filter: alpha(Opacity=100); /* Полупрозрачность для IE */
opacity: 1.0; /* Полупрозрачность для других браузеров */
}
span {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
filter: alpha(Opacity=40); /* Полупрозрачность для IE */
opacity: 0.40; /* Полупрозрачность для других браузеров */
}
.clicked {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
filter:alpha(Opacity=100); /* Полупрозрачность для IE */
opacity: 1.0; /* Полупрозрачность для других браузеров */
}
</style>

Подключил javascript, но с полем data-class не много не разобрался! Дело в том, что каждой группе картинок уже присвоен class в общем выглядит таблица вот так:
автор<tr class="styletest3" id="wrap311" align="center">
<td align="center" colspan="2"><span class='c7z'><img src="c7z.png" width="30" height="30" border="0"></td>
<td align="center" colspan="2"><span class='c10z'><img src="c10z.png" width="30" height="30" border="0"></td>
<td align="center" colspan="2"><span class='c9z'><img src="c9z.png" width="30" height="30" border="0"></td>
<td align="center" colspan="2"><span class='c8v'><img src="c8v.png" width="35" height="35" border="0"></td>
<td align="center" colspan="2"><span class='c1v'><img src="c1v.png" width="30" height="30" border="0"></td>
</tr>

<tr class="styletest3" id="wrap31" align="center" 2>
<td align="center" colspan="2"><span class='c10z'><img src="c10z.png" width="30" height="30" border="0"></td>
<td align="center" colspan="2"><span class='c7z'><img src="c7z.png" width="30" height="30" border="0"></td>
<td align="center" colspan="2"><span class='c9z'><img src="c9z.png" width="30" height="30" border="0"></td>
<td align="center" colspan="2"><span class='c1v'><img src="c1v.png" width="30" height="30" border="0"></td>
<td align="center" colspan="2"><span class='c8v'><img src="c8v.png" width="35" height="35" border="0"></td>
</tr>

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