Avatar billede Boddicker Juniormester
18. september 2021 - 23:41 Der er 1 løsning

SKift af billede ved mouse over

Så skrevet står. ;) Jeg kan sagtens finde et script til at ændre eet billede, men når det kommer flere til, står min hjerne af.

Nogen der er hjælpe?
Avatar billede Henrik Hansen Forsker
19. september 2021 - 10:37 #1
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>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester