1. #1
    Membre habitué
    Profil pro
    Developpeur web et Access VBA
    Inscrit en
    janvier 2003
    Messages
    433
    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 : 433
    Points : 191
    Points
    191

    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 089
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2010
    Messages : 1 089
    Points : 2 402
    Points
    2 402

    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...
    https://www.grafikart.fr/
    «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
    244
    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 : 244
    Points : 366
    Points
    366

    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 793
    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 793
    Points : 21 249
    Points
    21 249
    Billets dans le blog
    42

    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.)

Discussions similaires

  1. Réponses: 9
    Dernier message: 11/05/2016, 15h22
  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, 23h48
  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, 13h11
  4. changer une image
    Par lemmings dans le forum JavaScript
    Réponses: 2
    Dernier message: 20/09/2005, 16h43
  5. [JLabel] changer une image
    Par dadg dans le forum Composants
    Réponses: 5
    Dernier message: 28/09/2004, 11h28

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