Форум

рони · #11 (**permalink**) 23.02.2017, 01:43

Борис К,

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .active{
     border: 5px #0000FF solid;
   }
   .hide{
     display: none;
   }

  </style>
</head>
<body>

<table id="content">
<tr>
<td><img src="https://www.toptal.com/designers/subtlepatterns/patterns/congruent_outline.png" width="150"></td><td><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSt_IzMTuDrclTeTYtP0QHnsjQaua7lhdlPwCxjW_sEnFLJlmWL" width="150"></td>
</tr>
<tr>
<td><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSt_IzMTuDrclTeTYtP0QHnsjQaua7lhdlPwCxjW_sEnFLJlmWL" width="150"></td><td><img src="https://www.toptal.com/designers/subtlepatterns/patterns/congruent_outline.png" width="150"></td>
</tr>
</table>
<script>
window.addEventListener("DOMContentLoaded", function() {
    var content = document.querySelector("#content"),
        a;
    content.addEventListener("click", function(event) {
        var img = event.target;
        if ("IMG" == img.tagName)
        if (!a) {
                a = img;
                img.classList.add("active")
            }
        else if (a != img && a.src == img.src) {
            img.classList.add("hide");
            a.classList.add("hide");
            a.classList.remove("active");
            a = null
            }
        else {
            a.classList.remove("active");
            a = img;
            img.classList.add("active")
        }
    })
});
</script>

</body>

Борис К · #12 (**permalink**) 23.02.2017, 16:46

Профессор Рони... Учитель!
Огромное спасибо за помощь!!! Обещаю изучать JS с мыслями о Вас...
Вы - настоящий Мужчина! Не знаю где Вы живёте, но сегодня 23 февраля... с Праздником Вас!!!
А мне это лучший подарок от Высокопрофессионального Незнакомца в завтрашний ДР...
Искренне желаю Вам Успехов и Побед во всех начинаниях!
С Уважением,
Борис К.

Форум

Справочник

Discord чат

Курсы javascript