JSFiddle - React, Tailwind, and code Playground

by molily

HTML

<ul id="vereine">
<li><img src="http://molily.de/img/dokumentmodelle-i.png" data-highlight="http://molily.de/img/dokumentmodelle-t.png" alt="BVB"></li>
<li><img src="http://molily.de/img/dokumentmodelle-i.png" data-highlight="http://molily.de/img/dokumentmodelle-t.png" alt="FCB"></li>
<li><img src="http://molily.de/img/dokumentmodelle-i.png" data-highlight="http://molily.de/img/dokumentmodelle-t.png" alt="KSC"></li>
<li><img src="http://molily.de/img/dokumentmodelle-i.png" data-highlight="http://molily.de/img/dokumentmodelle-t.png" alt="MSV"></li>
</ul>

CSS

img { border: 1px solid #eee; }

JavaScript

var initLogoHover = function() {
    
  // Speichert das Element des aktiven Logos
  var activeLogo;
    
  // Helferfunktion: Wechsle in den Highlight-Status
  var highlight = function(logo) {
    logo.src = logo.getAttribute('data-highlight');
  };
  // Helferfunktion: Wechle in den Normal-Status
  var normal = function(logo) {
    logo.src = logo.getAttribute('data-normal');
  };

  // Event-Handler für mouseenter
  var mouseenter = function(event) {
    var logo = event.target;
    if (logo !== activeLogo) {
      highlight(logo);
    }
  };
  // Event-Handler für mouseleave
  var mouseleave = function(event) {
    var logo = event.target;
    if (logo !== activeLogo) {
      normal(logo);
    }
  };
  // Event-Handler für click
  var click = function(event) {
    var logo = event.target;
    if (logo !== activeLogo) {
      // Setze das aktive Logo auf normal
      if (activeLogo) {
        normal(activeLogo);
      }
      // Aktiviere das geklickte Logo
      highlight(logo);
      activeLogo = logo;
    }
  }; 

  // Hole alle img-Elemente als Liste
  var logos = document.querySelectorAll('#vereine img');
  // Durchlaufe die Liste
  for (var i = 0, l = logos.length; i < l; i++) {
    var logo = logos[i];
    // Speichere das initiale src-Attribut in einem data-Attribut für später
    logo.setAttribute('data-normal', logo.src);
    // Registriere Event-Handler
    logo.addEventListener('mouseenter', mouseenter, false);
    logo.addEventListener('mouseleave', mouseleave, false);
    logo.addEventListener('click', click, false);
  }
};

// Start
initLogoHover();