SKift af billede ved mouse over

Den gamle måde:
<img src="start1-med.jpg" onmouseout="this.src='start1-med.jpg';" onmouseover="this.src='skift1-til.jpg';" alt="Billede med hover">
<img src="start2-med.jpg" onmouseout="this.src='start2-med.jpg';" onmouseover="this.src='skift2-til.jpg';" alt="Billede med hover">

onmouseover skifter til et andet billede, onmouseout skifter tilbage til det første


En nyere mode: (kræver lidt JavaScript)
<img src="start1.jpg" data-src-over="skift1.jpg" alt="Billede med hover">
<img src="start2.jpg" data-src-over="skift2.jpg" alt="Billede med hover">
<script>
const imgs = document.querySelectorAll('img[data-src-over]').forEach((img) => {
    ['mouseover', 'mouseout'].forEach((ev) => {
        img.addEventListener(ev, (e) => { // Toggle Src
            let srcOver = e.target.getAttribute('data-src-over');
            e.target.setAttribute('data-src-over', e.target.getAttribute('src'));
            e.target.setAttribute('src', srcOver);
        });
    });
});
</script>