Bei Click oder mouseover auf kleinem Bild Vergrößerung anzeigen.

[Gunnar Bittersmann]

@@Peter Z.

Bei Click oder mouseover auf kleinem Bild Vergrößerung anzeigen.

Das funktioniert aber nur mit Maus; nicht mit Tastatur; img-Elemente sind nicht anclickbar.

… wo das große Bild in CSS zunächst über width-Angaben verkleinert wurde und dann bei Hover die Normalgröße angezeigt wurde. Da wird aber doch sofort das große Bild geladen?

Ja.

Kann man eventuell wenn die Seite mit den kleinen Bildern aufgebaut ist im Hintergrund schon die Originalbilder laden?

Ja.

Kann so aussehen:

<ul id="myGallery">
	<li>
		<a href="https://upload.wikimedia.org/wikipedia/commons/5/5b/Mandel_zoom_03_seehorse.jpg">
			<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5b/Mandel_zoom_03_seehorse.jpg/320px-Mandel_zoom_03_seehorse.jpg" alt="Mandel zoom 03 seehorse"/>
		</a>
	</li>
	<li>
		<a href="https://upload.wikimedia.org/wikipedia/commons/8/82/Mandel_zoom_05_tail_part.jpg">
			<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Mandel_zoom_05_tail_part.jpg/320px-Mandel_zoom_05_tail_part.jpg" alt="Mandel zoom 05 tail part"/>
		</a>
	</li>
	<li>
		<a href="https://upload.wikimedia.org/wikipedia/commons/b/b3/Mandel_zoom_07_satellite.jpg">
			<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Mandel_zoom_07_satellite.jpg/320px-Mandel_zoom_07_satellite.jpg" alt="Mandel zoom 07 satellite"/>
		</a>
	</li>
	<li>
		<a href="https://upload.wikimedia.org/wikipedia/commons/a/a4/Mandel_zoom_11_satellite_double_spiral.jpg">
			<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Mandel_zoom_11_satellite_double_spiral.jpg/320px-Mandel_zoom_11_satellite_double_spiral.jpg" alt="Mandel zoom 11 satellite double spiral"/>
		</a>
	</li>
</ul>
<footer>Images created by Wolfgang Beyer with the program Ultra Fractal 3.</footer>

<script>
	const myGalleryLinks = document.querySelectorAll('#myGallery a');
	
	for (let i = 0; i < myGalleryLinks.length; i++)
	{
		fetch(myGalleryLinks[i].href);
	}
</script>

a-Elemente sind per Tastatur (Tab-Taste) erreichbar; du kannst click-Events dafür registrieren und mittels Event.preventDefault() das Aufrufen einer neuen Seite unterbinden und stattdessen bspw. ein Lightbox-Script laufen lassen.

Ohne JavaScript würde jetzt auch das große Bild geladen und dargestellt werden.

LLAP 🖖