Visualizzazione dei risultati da 1 a 8 su 8
  1. #1
    Utente di HTML.it
    Registrato dal
    May 2006
    Messaggi
    19

    cambiare immagine di background e onclickevent in un div

    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

  2. #2
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    149
    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 :

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

    Potresti gestire i dati con un array di oggetti.

  3. #3
    Utente di HTML.it
    Registrato dal
    May 2006
    Messaggi
    19
    Quote Originariamente inviata da ninja72 Visualizza il messaggio
    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 :

    codice:
    <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.
    Ultima modifica di lippa64; 01-12-2020 a 10:24

  4. #4
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    149
    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.

  5. #5
    Utente di HTML.it
    Registrato dal
    May 2006
    Messaggi
    19
    Quote Originariamente inviata da ninja72 Visualizza il messaggio
    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ì.

  6. #6
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,077
    Ma non hai bisogno di due array ne basta una voce_img = Valore_immagine, voce_url = valore_url
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  7. #7
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    149
    potresti utilizzare una cosa del genere e modificarla per le tue esigenze:

    codice:
    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);
        })()
    })
    Ultima modifica di ninja72; 01-12-2020 a 14:08

  8. #8
    Utente di HTML.it
    Registrato dal
    May 2006
    Messaggi
    19
    Quote Originariamente inviata da ninja72 Visualizza il messaggio
    potresti utilizzare una cosa del genere e modificarla per le tue esigenze:

    codice:
    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.

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.