<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.k1 {
border: 2px dotted #000;
border-radius: 16px 16px 16px;
background:red;
opacity: 0.6;
}
.k2 {
border: 2px dotted #000;
border-radius: 16px 16px 16px;
background:green;
opacity: 0.6;
}
.k3 {
border: 2px dotted #000;
border-radius: 16px 16px 16px;
background:orange;
opacity: 0.6;
}
td:hover
{
opacity: 1;
}
div{
width: 150px;
cursor: pointer;
}
.active{
opacity: 1;
border: 2px solid #000;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
$('div[class^="class"]').each(function(i, elem) {
var el = $('.' + elem.className).not(elem).parent(), add;
$(elem).on('click mouseover mouseleave', function(e) {
e.type == 'click' && (add = !add);
el.toggleClass('active', add || e.type == 'mouseover')
});
});
});
</script>
</head>
<body><div class="class1"><img class="class1" src="http://javascript.ru/forum/images/smilies/dance3.gif" title="ZZZ"/>Текст1</div><br>
<div class="class2"><img class="class2" src="http://javascript.ru/forum/images/smilies/write.gif" title="ZZZ"/>Текст2</div><br>
<div class="class3"><img class="class3" src="http://javascript.ru/forum/images/smilies/victory.gif" title="ZZZ"/>Текст3</div><br>
<table width="200" border="0">
<tr>
<td class="k1" tabindex="0"><img class="class1" src="http://javascript.ru/forum/images/smilies/dance3.gif" title="ZZZ"/></td>
<td class="k2"><img class="class2"src="http://javascript.ru/forum/images/smilies/write.gif" title="ZZZ"/></td>
<td class="k1" tabindex="0"><img class="class1"src="http://javascript.ru/forum/images/smilies/dance3.gif" title="ZZZ"/></td>
</tr>
<tr>
<td class="k2"><img class="class2"src="http://javascript.ru/forum/images/smilies/write.gif" title="ZZZ"/></td>
<td class="k1" tabindex="0"><img class="class1"src="http://javascript.ru/forum/images/smilies/dance3.gif" title="ZZZ"/></td>
<td class="k2"><img class="class2"src="http://javascript.ru/forum/images/smilies/write.gif" title="ZZZ"/></td>
</tr>
<tr>
<td class="k3"><img class="class3"src="http://javascript.ru/forum/images/smilies/victory.gif" title="ZZZ"/></td>
<td class="k3"><img class="class3"src="http://javascript.ru/forum/images/smilies/victory.gif" title="ZZZ"/></td>
<td class="k1" tabindex="0"><img class="class1"src="http://javascript.ru/forum/images/smilies/dance3.gif" title="ZZZ"/></td>
</tr>
</table>
</body>
</html>