dmitriy39reg,
... строки .parent() можно убрать
<!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;
}
.k1:focus:not(:active){
border: 2px solid #000;
opacity : 1;
}
td:hover
{
opacity: 1;
}
div{
width: 150px;
cursor: pointer;
}
.active{
opacity: 1;
border: 2px solid #000;
}
.active_hover{
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() {
var cls = [".class1", ".class2", ".class3"];
$.each(cls, function(indx, clsName) {
var el = $(clsName).not("div")
$("div" + clsName).click(function() {
el
.parent()
.toggleClass("active");
}).mouseenter(function() {
el
.parent()
.addClass("active_hover");
}).mouseleave(function() {
el
.parent()
.removeClass("active_hover");
})
});
});
</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>