Javascript Random Background Image (hover link)

Bonjour,

Je cherche de l'aide pour pouvoir coder un Javascript qui me permettrait à chaque fois que ma souris passe au dessus d'un mot lien qu'il déclenche l'apparition d'une image background de la div dans laquelle il se trouve mais en choisissant au hasard parmi plusieurs images de fond.

Cela est-il facilement réalisable ?

Merci pour votre aide
Modifié par Jazzma (21 Jul 2018 - 14:24)

Salut

Voici un exemple qui modifie l'image de fond lorsque l'utilisateur entre dans la division. Il vous reste à le modifier selon vos besoins.

#indeximg {
    background-image: url("https://danielhagnoul.developpez.com/images/boule1.png");
    background-repeat: no-repeat;
    background-position: center;
    height: 20rem;
    width: 20rem;
    transition: background-image 1s ease-in 0.5s;
}

#indeximg.fadeOut {
    transition: background-image 1s ease-out 0.5s;
}

<div id="indeximg">
    <p>Haec subinde Constantius audiens et quaedam referente Thalassio doctus, quem eum odisse iam conpererat
    lege communi, scribens ad Caesarem blandius adiumenta paulatim illi subtraxit, sollicitari se simulans ne,
    uti est militare otium fere tumultuosum, contentum palatinis et protectorum cum Scutariis et Gentilibus,
    et mandabat Domitiano, ex comite largitionum, praefecto ut cum in Syriam venerit.</p>
    <p>Haec dum oriens diu perferret, caeli reserato tepore Constantius consulatu suo septies et Caesaris ter
    egressus Arelate Valentiam petit, in Gundomadum et Vadomarium fratres Alamannorum reges arma </p>
</div>

window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible

    // début code du test

    let
        index = 0;

    const
        elemIndexImg = document.querySelector("#indeximg"),
        arBoules = [
            "https://danielhagnoul.developpez.com/images/boule2.png",
            "https://danielhagnoul.developpez.com/images/boule3.png",
            "https://danielhagnoul.developpez.com/images/boule4.png",
            "https://danielhagnoul.developpez.com/images/boule5.png",
            "https://danielhagnoul.developpez.com/images/boule6.png",
            "https://danielhagnoul.developpez.com/images/boule7.png",
            "https://danielhagnoul.developpez.com/images/boule1.png",
        ],
        indexLength = arBoules.length - 1;

    elemIndexImg.addEventListener('mouseenter', ev => {
        elemIndexImg.classList.add("fadeOut");

        setTimeout(function () {
            elemIndexImg.style.backgroundImage = "url('" + arBoules[index++] + "')";
            elemIndexImg.classList.remove("fadeOut");
        }, 1000); // 1s pour le fadeout

        if (index > indexLength) {
            index = 0;
        };
    }, {
        capture: false,
        passive: true,
        once: false
    });

    // fin code du test

}, {
    capture: false,
    passive: true,
    once: false
});