molily: Bilder über onfocus laden

Beitrag lesen

Hallo,

Ich habe ein Formular und wenn ein bestimmtes input-Feld aktiviert ist über onfocus, dann sollen in der zweiten Spalte der Website alle dazugehörigen Produktbilder zu diesem input-feld geladen werden.

Ich würde alle Bilder ins HTML einbetten und sie standardmäßig verstecken. Die Container-Elemente mit den Bildern bekommen IDs:

<ul id="bilder1" class="hidden">  
<li><img src="" alt=""></li>  
</ul>  
  
<ul id="bilder2" class="hidden">  
<li><img src="" alt=""></li>  
</ul>

Die Input-Elemente wird mit den Bildern über diese ID verknüpft. Die zugehörige ID lässt sich in einem data-Attribut unterbringen:

<input type="text" class="feld-mit-bildern" data-images-id="bilder1">  
<input type="text" class="feld-mit-bildern" data-images-id="bilder2">  

~~~usw.  
  
Das ganze Event-Handling (beim Fokus tue dieses und jenes) sollte im JavaScript aufgesetzt werden. Das JavaScript am besten am Ende des Dokuments laden, damit das DOM und all seine Elemente verfügbar sind.  
  
~~~javascript
// Kapselung in selbstausführender Funktion  
(function() {  
  // Speichert das Element mit den aktuell sichtbaren Bildern  
  var activeImages;  
  
  // Event-Handling aufsetzen  
  var initInputImages = function() {  
    // Alle Elemente mit der Klasse »feld-mit-bildern« holen  
    var inputs = document.getElementsByClassName('feld-mit-bildern');  
    for (var i = 0, el; el = inputs[i]; i++) {  
      // Event-Handler registrieren  
      el.onfocus = showImages;  
    }  
  };  
  
  // Der Event-Handler  
  var showImages = function(event) {  
    // Lese data-Attribut aus, um an die zugehörige ID zu kommen  
    var imageClass = event.target.getAttribute('data-images-id');  
    // Verstecke die aktuell sichtbaren Bilder  
    if (activeImages) {  
      activeImages.className = 'hidden';  
    }  
    // Zeige die Bilder, die sichtbar werden sollen  
    // Hole das zugehörige Element  
    activeImages = document.getElementById(imageClass);  
    // Lösche die hidden-Klasse  
    activeImages.className = '';  
  };  
  
  // Start!  
  initInputImages();  
  
})();

Zum Verstecken wird die Klasse »hidden« verwendet. Die muss im CSS natürlich formatiert werden:

/* Einfache Variante */  
.hidden { display: none; }  
  
/* Bessere Variante (zugänglich) */  
.hidden {  
  position: absolute;  
  left: -9999px;  
  width: 0;  
  height: 0;  
  overflow: hidden;  
}

Das Ganze mag auf Anhieb etwas komplex wirken, und es ist auch komplizierter, als man es lösen könnte. Aber das ist eine bessere Herangehensweise als JavaScript-Code direkt im HTML und CSS-Code direkt im JavaScript unterzubringen.

Man könnte zusätzlich einen Link neben dem Eingabefeld zu den jeweiligen Bildern unterbringen, und die Bilder nur Verstecken, wenn JavaScript verfügbar ist. Dann wäre das Formular auch ohne JavaScript voll bedienbar und ließe sich auch benutzen, wenn z.B. der Bildschirm zu klein ist, um Formular und Bilder nebeneinander darzustellen.

Viele Grüße,
Mathias