1. #1
    Membre habitué
    Profil pro
    Developpeur web et Access VBA
    Inscrit en
    janvier 2003
    Messages
    435
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Developpeur web et Access VBA
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2003
    Messages : 435
    Points : 196
    Points
    196

    Par défaut Changer une image en background d'un DIV

    Bonjour,
    Je ne connais pas grand chose au javascript...
    Je cherche un script capable de me changer une image dans un div qui est en background...
    Il peut y a avoir de 1 à 5 images...
    image-1.jpg
    image-2.jpg
    image-3.jpg
    image-4.jpg
    image-5.jpg
    Le script doit changer les images avec un effet de fade toutes les 3 secondes et boucler...

    Voici le DIV où les images doivent être changées...
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    <div style="background-image:url(../image/image-1.jpg);" id="indeximg" class="indextop"></div>

    J'ai trouvé ça, mais il n'y a que 2 images et de plus j'aimerai qu'il y ait un effet de fade entre l'affichage des photos...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <script type="text/javascript">
    var rotate = false;
    function setbackground(){
      window.setTimeout( "setbackground()", 3000);
      newImage = rotate ? 'url(<?=$datafi['image1']?>)' : '<?=$datafi['image2']?>';
      rotate = !rotate;
      document.getElementById('indeximg').style.backgroundImage = newImage;
    }
    // Charge la fonction
    window.onload = function(){
    setbackground();
    }
    </script>
    Je n'utilise pas de "carousel" car dans le div il y a plein de textes et un menus, il faut juste que l'image de fond du DIV change...
    Précision, dans ma page j'ai Jquery, au cas où...

    J'ai cherché sans rien trouvé, car je ne suis pas assez fort pour modifier tout les codes trouvés...
    Merci pour votre aide !
    VrroOOOAAAAAPPPPPPPPPP !!!

  2. #2
    Membre émérite Avatar de psychadelic
    Profil pro
    Inscrit en
    mai 2010
    Messages
    1 491
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2010
    Messages : 1 491
    Points : 2 980
    Points
    2 980

    Par défaut

    https://api.jquery.com/fadeIn/

    il existe des tutoriels sur jQuery,HTML, CSS
    personne n'a la science infuse et n'imagine pas que tu puisse te passer du moindre apprentissage...
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  3. #3
    Membre averti
    Homme Profil pro
    Analyse système
    Inscrit en
    mai 2014
    Messages
    265
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : mai 2014
    Messages : 265
    Points : 401
    Points
    401

    Par défaut

    Bonjour,

    Ci-dessous, un exemple de solution à adapter, pas optimisée mais fonctionnelle...

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <script>
          page_active=1;
          tourne=function() {
            if (page_active==1) {
               document.getElementById('page1').style.display="none";
               document.getElementById('page2').style.display="block";
               document.getElementById('page3').style.display="none";
               page_active=2;
               return;
            }
            if (page_active==2) {
               document.getElementById('page1').style.display="none";
               document.getElementById('page2').style.display="none";
               document.getElementById('page3').style.display="block";
               page_active=3;
               return;
            }
            if (page_active==3) {
               document.getElementById('page1').style.display="block";
               document.getElementById('page2').style.display="none";
               document.getElementById('page3').style.display="none";
               page_active=1;
               return;
            }
          };
          onload=function() { setInterval(tourne,1000); };
        </script>
        <style>
          #page1 {
            background-color: #26a;
          }
          #page2 {
            background-color: #2a6;
            display: none;
          }
          #page3 {
            background-color: #a26;
            display: none;
          }
        </style>
      </head>
      <body>
        <div id="page1">Page 1! <img src="..."></div>
        <div id="page2">Page 2! <img src="..."></div>
        <div id="page3">Page 3! <img src="..."></div>
      </body>
    </html>

  4. #4
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 906
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 906
    Points : 21 544
    Points
    21 544
    Billets dans le blog
    50

    Par défaut



    Un exemple (il suffit de copier-coller le code de la page web pour tester) avec beaucoup de choses à apprendre pour un débutant !

    L'image de fond est centrée au milieu d'une division. Rotation des images (7) par un setInterval() toutes les 3 secondes. L'utilisateur peut arrêter la rotation en cliquant sur un bouton.

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    <!DOCTYPE html>
    <html lang="fr" dir="ltr">
    <head>
    	<!-- cache-control avec max-age=60 pour le développement uniquement -->
      <meta http-equiv="cache-control" content="public, max-age=60">
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
      <meta name="author" content="Daniel Hagnoul">
      <title>test</title>
      <style>
                    *,
                    *:after,
                    *:before {
                            box-sizing: border-box;
                    }
                    
                    /* CSS du test */
                    
                    #indeximg {
                            background-image: url("../images/boule1.png");
                            background-repeat: no-repeat;
                            background-position: center;
                            height: 20rem;
                            width: 20rem;
                            border: 1pt dotted grey;
                    }
                    #btnStopBackgroundImage {
                            margin: 2rem;
                    }
     
                    /* Fin CSS du test */
     
            </style>
    	<script>
                    'use strict';
                    
                    document.addEventListener( "DOMContentLoaded", ev => {
                            // le DOM est construit, la page web n'est pas visible
                            // code du test
                            
                            
                            // fin code du test
                    
                    }, false );
                    
                    window.addEventListener( "load", ev => {
                            // le DOM est construit et la page web est visible
                            // code du test
                            
                            let
                                    index = 0;
                            
                            const
                                    elemIndexImg = document.querySelector( "#indeximg" ),
                                    elemBtnStopBackgroundImage = document.querySelector( "#btnStopBackgroundImage" ),
                                    arBoules = [
                                            "http://danielhagnoul.developpez.com/images/boule2.png",
                                            "http://danielhagnoul.developpez.com/images/boule3.png",
                                            "http://danielhagnoul.developpez.com/images/boule4.png",
                                            "http://danielhagnoul.developpez.com/images/boule5.png",
                                            "http://danielhagnoul.developpez.com/images/boule6.png",
                                            "http://danielhagnoul.developpez.com/images/boule7.png",
                                            "http://danielhagnoul.developpez.com/images/boule1.png",
                                    ],
                                    indexLength = arBoules.length - 1,
                                    setIntervalID = setInterval( () => {
                                            
                                            // debug, console, touche F12
                                            // console.log( index, arBoules[ index ] );
                                            
                                            elemIndexImg.style.backgroundImage = "url('" + arBoules[ index++ ] + "')";
                                            
                                            if ( index > indexLength ){
                                                    index = 0;
                                            };
                                    }, 3000 );
                                    
                            elemBtnStopBackgroundImage.addEventListener( "click", ev => {
                                    window.clearInterval( setIntervalID );
                            }, false );
                            
                            // fin code du test
                    
                    }, false );
      </script>
    </head>
    <body>
    	<main>
     
    		<div id="indeximg"></div>
    		<button id="btnStopBackgroundImage">Arrêt du défilement des images</button>
     
    	</main>
    </body>
    </html>

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  5. #5
    Membre habitué
    Profil pro
    Developpeur web et Access VBA
    Inscrit en
    janvier 2003
    Messages
    435
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Developpeur web et Access VBA
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2003
    Messages : 435
    Points : 196
    Points
    196

    Par défaut

    Merci beaucoup !!

    j'avoue que la reponse de psychadelic ne m'a plus donné envie de revenir ici, à quoi bon parler d'un forum d'entre aide pour avoir droit à ce genre de remarque ???
    D'autant que quand je peux je donne des bouts de codes...

    J'ai modifié le code pour mon besoin et ça tourne parfaitement bien !
    Mais je cherche à avoir un effet plus souple avec un effet "fadeIn" pour passer d'une photo à une autre.
    Je pense avoir compris le code dans son ensemble mais je ne vois où placer la commande pour avoir cet effet

    Merci pour encore un petit coup de pouce...

    Voici mon code

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
     
     <style>
    	#indeximg {
    		    background-image: url(image1);
    	}
    </style>
    <script>
                    'use strict';
                    document.addEventListener( "DOMContentLoaded", ev => {
                            // le DOM est construit, la page web n'est pas visible
                            // code du test
                            // fin code du test
     
                    }, false );
     
                    window.addEventListener( "load", ev => {
                            // le DOM est construit et la page web est visible
                            // code du test
     
                            let
                                    index = 0;
     
                            const
                                    elemIndexImg = document.querySelector( "#indeximg" ),
                                    elemBtnStopBackgroundImage = document.querySelector( "#btnStopBackgroundImage" ),
                                    arBoules = [
                                            "image2",
                                            "image1",
                                    ],
                                    indexLength = arBoules.length - 1,
                                    setIntervalID = setInterval( () => {
     
                                            // debug, console, touche F12
                                            // console.log( index, arBoules[ index ] );
     
                                            elemIndexImg.style.backgroundImage = "url('" + arBoules[ index++ ] + "')";
     
                                            if ( index > indexLength ){
                                                    index = 0;
                                            };
                                    }, 3000 );
     
     
                    }, false );
      </script>
    VrroOOOAAAAAPPPPPPPPPP !!!

  6. #6
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 906
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 906
    Points : 21 544
    Points
    21 544
    Billets dans le blog
    50

    Par défaut

    Comment réaliser un "fading" sur une image en "background" ? Je ne sais pas, je crois même que c'est impossible !

    Même avec les évolutions de transition et d'animation du CSS3, je ne sais pas comment faire !

    Je peux uniquement réaliser un "fading" sur le contenu (inclus background) de la division.

    Exemple (je vous conseille de commencer par tester mon code sans le modifier) :

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    <!DOCTYPE html>
    <html lang="fr" dir="ltr">
    <head>
    	<!-- cache-control avec max-age=60 pour le développement uniquement -->
      <meta http-equiv="cache-control" content="public, max-age=60">
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
      <meta name="author" content="Daniel Hagnoul">
    	<title>Test</title>
      <style>
                    *,
                    *:after,
                    *:before {
                            box-sizing: border-box;
                    }
                    
                    /* CSS du test */
                    
                    #indeximg {
                            background-image: url("../images/boule1.png");
                            background-repeat: no-repeat;
                            background-position: center;
                            height: 20rem;
                            width: 20rem;
                            border: 1pt dotted grey;
                            opacity: 1;
                            transition: opacity 1s; 
                    }
                    #indeximg.fadeOut {
                            opacity:0;
                            transition: opacity 1s; 
                    }
                    #btnStopBackgroundImage {
                            margin: 2rem;
                    }
                    
                    /* Fin CSS du test */
     
      </style>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/locale/fr.js"></script>
    	<script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.5.1.js"></script>
    	<script>
        'use strict';
                    
                    document.addEventListener( "DOMContentLoaded", ev => {
                            // le DOM est construit, la page web n'est pas visible
                            moment.locale( "fr" );
                            klog( `DOM ready   : ${ new kDvjhDate() }` );
                            
                            // code du test
                            
                            
                            // fin code du test
                            
                    }, false );
        
        window.addEventListener( "load", ev => { 
                            // le DOM est construit et la page web est visible
                            klog( `Window load : ${ new kDvjhDate() }` );
                            
          // code du test
                            
                            let
                                    index = 0;
                                    
                            const
                                    elemIndexImg = document.querySelector( "#indeximg" ),
                                    elemBtnStopBackgroundImage = document.querySelector( "#btnStopBackgroundImage" ),
                                    arBoules = [
                                            "http://danielhagnoul.developpez.com/images/boule2.png",
                                            "http://danielhagnoul.developpez.com/images/boule3.png",
                                            "http://danielhagnoul.developpez.com/images/boule4.png",
                                            "http://danielhagnoul.developpez.com/images/boule5.png",
                                            "http://danielhagnoul.developpez.com/images/boule6.png",
                                            "http://danielhagnoul.developpez.com/images/boule7.png",
                                            "http://danielhagnoul.developpez.com/images/boule1.png",
                                    ],
                                    indexLength = arBoules.length - 1,
                                    setIntervalID = setInterval( () => {
                                            
                                            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;
                                            };
                                    }, 4000 ); // 1s fadeout + 1s fadein + 2s visible
                            
                            elemBtnStopBackgroundImage.addEventListener( "click", ev => {
                                    window.clearInterval( setIntervalID );
                            }, false );
                                                                    
                            // fin code du test
                            
          kIDUnique();
        }, false );                 
      </script>
    </head>
    <body>
    	<main>
     
    		<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>
    		<button id="btnStopBackgroundImage">Arrêt du défilement des images</button>
     
    	</main>
    </body>
    </html>

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  7. #7
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 906
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 906
    Points : 21 544
    Points
    21 544
    Billets dans le blog
    50

    Par défaut

    C'est possible !

    C'est souvent comme cela que ça se passe pour moi, je ne trouve pas, j'abandonne et quelques minutes ou heures plus tard je reprends courage, je cherche, je teste et je trouve !

    Il suffit de remplacer le CSS du code précédent par celui-ci :

    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    #indeximg {
    	background-image: url("../images/boule1.png");
    	background-repeat: no-repeat;
    	background-position: center;
    	height: 20rem;
    	width: 20rem;
    	border: 1pt dotted grey;
    	transition: background-image 1s ease-in 0.5s; 
    }
    #indeximg.fadeOut {
    	transition: background-image 1s ease-out 0.5s; 
    }
    #btnStopBackgroundImage {
    	margin: 2rem;
    }

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  8. #8
    Membre habitué
    Profil pro
    Developpeur web et Access VBA
    Inscrit en
    janvier 2003
    Messages
    435
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Developpeur web et Access VBA
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2003
    Messages : 435
    Points : 196
    Points
    196

    Par défaut

    danielhagnoul tu es un génie !!!
    Merci mille mille fois !

    VrroOOOAAAAAPPPPPPPPPP !!!

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 9
    Dernier message: 11/05/2016, 14h22
  2. Centrer un DIV contenant une image de background?
    Par Maitrekou dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 08/10/2008, 22h48
  3. code HTML pour mettre une image en background dans un menu
    Par Link14 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 16/10/2005, 12h11
  4. changer une image
    Par lemmings dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 20/09/2005, 15h43
  5. [JLabel] changer une image
    Par dadg dans le forum Composants
    Réponses: 5
    Dernier message: 28/09/2004, 10h28

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo