cambiare immagine di background e onclickevent in un div

[lippa64]

Buongiorno

Devo inserire una serie di immagini in loop in un div e ogni immagine dovrebbe avere un onclick event ad un URL diverso.
Sia le immagini che gli URL sono in due array o in un obj.
Non so come ciclare i due array e inserirli nel div con un settimeout.

Grazie in anticipo per eventuali suggerimenti

[ninja72]

Alcune cose non sono chiare, tipo, cosa dovrebbe gestire onclick event ? Perche utilizzare un setTimeout ?

Fammi se capire la struttara html che vorresti realizzare è simile a questa :

<div id="container">
        <a href="">
            <img src="" alt="">
        </a>
    </div>

Potresti gestire i dati con un array di oggetti.

[lippa64]

Alcune cose non sono chiare, tipo, cosa dovrebbe gestire onclick event ? Perche utilizzare un setTimeout ?

Fammi se capire la struttara html che vorresti realizzare è simile a questa :

<div id="container">
        <a href="">
            <img src="" alt="">
        </a>
    </div>

Potresti gestire i dati con un array di oggetti.

In pratica in un tag img all'interno di un tag a che a sua volta si trova in un tag div esattamente come hai pubblicato tu, ogni tot tempo dovrebbe cambiare l'immagine nel tag img e l'href nel tag a. Tutti i dati si potrebbero ciclare da due array, uno per le immagini e uno per gli URL oppure il tutto in un obj.

[ninja72]

Dunque devi caricare un immagine alla volta con il relativo url, se non ho capito male ti serve una funzione che gestisca i banner pubblicitari presente nell'array/oggetto dati, dove ogni tot tempo cambia l'immagine con il relativo url.

[lippa64]

Dunque devi caricare un immagine alla volta con il relativo url, se non ho capito male ti serve una funzione che gestisca i banner pubblicitari presente nell'array/oggetto dati, dove ogni tot tempo cambia l'immagine con il relativo url.

Proprio così.

[cavicchiandrea]

Ma non hai bisogno di due array ne basta una voce_img = Valore_immagine, voce_url = valore_url

[ninja72]

potresti utilizzare una cosa del genere e modificarla per le tue esigenze:

document.addEventListener('DOMContentLoaded', () => {
    const container = document.getElementById("container");

    const banners = [
        {
            "image": "1.jpg",
            "url": "www.google.it"
        },
        {
            "image": "2.jpg",
            "url": "www.google2.it"
        },
        {
            "image": "3.jpg",
            "url": "www.google3.it"
        }
    ];

    const nBanners = banners.length;
    let countBanner = 0;
    const timeBanner = 3000; // milliseconds

    function initBanner() {
        countBanner < nBanners ? null : countBanner = 0;

        let img = Object.values(banners[countBanner])[0];
        let url = Object.values(banners[countBanner])[1];
        let aTag = document.createElement("a")
        let imgTag = document.createElement("img");

        aTag.setAttribute("href", `http://${url}`);
        imgTag.setAttribute("src", `${img}`);
        imgTag.setAttribute("alt", `${img}`);
        imgTag.className = "myImg";
        aTag.appendChild(imgTag);
        container.appendChild(aTag);
        container.removeChild(container.firstChild);
        countBanner++;
    }

    (() => {
        initBanner();
        setInterval(() => {
            initBanner();
        }, timeBanner);
    })()
})

[lippa64]

potresti utilizzare una cosa del genere e modificarla per le tue esigenze:

document.addEventListener('DOMContentLoaded', () => {
    const container = document.getElementById("container");

    const banners = [
        {
            "image": "1.jpg",
            "url": "www.google.it"
        },
        {
            "image": "2.jpg",
            "url": "www.google2.it"
        },
        {
            "image": "3.jpg",
            "url": "www.google3.it"
        }
    ];

    const nBanners = banners.length;
    let countBanner = 0;
    const timeBanner = 3000; // milliseconds

    function initBanner() {
        countBanner < nBanners ? null : countBanner = 0;

        let img = Object.values(banners[countBanner])[0];
        let url = Object.values(banners[countBanner])[1];
        let aTag = document.createElement("a")
        let imgTag = document.createElement("img");

        aTag.setAttribute("href", `http://${url}`);
        imgTag.setAttribute("src", `${img}`);
        imgTag.setAttribute("alt", `${img}`);
        imgTag.className = "myImg";
        aTag.appendChild(imgTag);
        container.appendChild(aTag);
        container.removeChild(container.firstChild);
        countBanner++;
    }

    (() => {
        initBanner();
        setInterval(() => {
            initBanner();
        }, timeBanner);
    })()
})

Grazie mille, provo ad utilizzarlo.