Bonjour à tous,

Je suis nouvelle sur le forum, et complètement novice en javascript.
Je m'en remets à vous pour cette question toute bête, mais pour laquelle j'ai retourné le web sans parvenir à mes fins… Smiley ohwell

Voilà, je souhaiterai afficher une image et que celle-ci change au scroll.
Avoir une liste d'images, dans un ordre précis, qui apparaissent grâce au scrolling, les unes à la suite des autres.

Merci à vous!
Bonjour,

Sans donner le code exact, qui dépend aussi de la structure exacte de la page, la méthode est la suivante :

l'évènement onscroll permet... d'intercepter le scroll !, donc il faut ajouter un attribut
onscroll='ajouterimage()'

sur la première image, ainsi que sur toutes les images qui seront elles-mêmes ajoutées.

le code html contiendra une première image elle-même contenue dans une div , donc :
<div id='divimage'>
<img src='....' onscroll='ajouterimage()'>
</div>

pour ajouter une image en javascript :
function ajouterimage()
{
limage =  document.createElement("img");
limage.setAttribute("src","............");
limage.setAttribute("onscroll","ajouterimage()");
document.getElementById("divimage").appendChild(limage);
}
Bonjour,

C'est pas très clair mais globalement :

- "Voilà, je souhaiterai afficher une image"
Le plus simple est de l'insérer directement via HTML ou CSS (si tu ne sais pas quoi choisir il y a une astuce sur alsacreations pour ça Smiley smile ). Vous pouvez aussi l'insérer en javascript comme l'a précisé jlon, mais ça n'est pas toujours pertinent, ça dépend de ce que vous voulez faire. Pour la changer via javascript c'est assez simple :
* Si l'image est inséré via HTML :
<img src="image1.png" id="monImage" alt="Mes vacances à Tahiti"/>
Le code javascript permettant de la modifier ressemblera à ceci :
function changerImage(nom){
    document.getElementById('monImage').src = nom;
}
changerImage('image2.png');

* Si l'image est inséré via CSS :
<div id="zone"></div>
Ici j'ai créé un div, mais s'il s'agit du background du body le principe est le même...
#zone{
    width:500px;
    height:500px;
    background:url('image1.png') no-repeat;
}
Le javascript :
function changerImage(nom){
    document.getElementById('zone').style.background = "url('"+nom+"') no-repeat";
}
changerImage('image2.png');


- "et que celle-ci change au scroll"
Là il faut juste ajouter un événement javascript :
window.onscroll = function () {
            changerImage('image2.png');
        };

Encore une fois tu peux appliquer ça à un div en particulier. Le problème ici c'est que dès que l'internaute scrollera l'image changera et c'est tout, c'est pas terrible, surtout que l'événement se répétera constamment. Je ne sais pas ce que tu veux faire mais on peut par exemple tenir compte de la position du scroll :
var positionScroll = window.scrollY || window.scollTop || document.getElementsByTagName("html")[0].scrollTop;

// Si vous utilisez jQuery :
var positionScroll = $("window").scrollTop();
Ensuite en fonction de la valeur de cette variable vous affichez une image différente.

Je vous donne un exemple si vous ne comprenez pas : admettons que vous vouliez modifier l'image de fond du body en fonction de la position du scroll. Le code javascript pourrait être celui-ci :
window.myBackground = function (listeDesImagesAAfficher) { // la liste des images à afficher se présente sous la forme d'un tableau.
  'use strict';
  
  var nbImages = listeDesImagesAAfficher.length + 1,
      body = document.getElementsByTagName("body")[0],
      html = document.getElementsByTagName("html")[0],
      hauteurBody = parseInt(getComputedStyle(body, null).height.replace(/px/, '')),
      numeroImageActuelle = 0;
  
// La fonction qui se chargera de changer les images :
  var changerImage = function (nomImage) {
    body.style.background = "url('" + nomImage + "')";
  };
  
// Initialisation (on affiche la première image) :
  changerImage(listeDesImagesAAfficher[0]);
  
// Puis l'événement javascript au scroll :
  window.onscroll = function () {
    var positionScroll = window.scrollY || window.scollTop || html.scrollTop,
        numeroImageCorrespondante = 0;
    while (numeroImageCorrespondante < nbImages - 1 && numeroImageCorrespondante * (hauteurBody / nbImages) < positionScroll) {
      numeroImageCorrespondante++;
    }
    numeroImageCorrespondante--; // on obtient le numéro (c'est-à-dire l'indice du tableau listeDesImagesAAfficher) de l'image à afficher
    if (numeroImageCorrespondante != numeroImageActuelle) { // si l'image n'est pas déjà celle qui est actuellement affichée on la change
      changerImage(listeDesImagesAAfficher[numeroImageCorrespondante]);
      numeroImageActuelle = numeroImageCorrespondante;
    }
  };
};
myBackground(['image1.jpg', 'image2.jpg', 'image3.jpg']); // on teste avec 3 images: ça fonctionne ! (heureusement ^^) 

Voilà c'est assez simple, je ne sais pas ce que vous vouliez faire mais si vous comprenez ça vous ne devriez pas avoir de problème pour votre projet. On pourrait l'améliorer en mettant des transitions fondues mais là j'ai la flemme Smiley lol

Les images sont placées de façon basique et en no-repeat, ça ne correspondra surement pas à vos attentes du coup si vous ne savez pas comment faire vous pouvez regarder ces tutos : celui-là pour un arrière plan étirable, celui-ci pour un background multiple en CSS3, ou encore celui-là pour un arrière plan extensible intelligent.

Il y a l'effet parallaxe aussi avec encore une fois un tuto pour apprendre Smiley smile

Voilà je pense avoir fait le tour, si vous avez des questions n'hésitez pas. Smiley smile
Modifié par Didodu258 (17 Jun 2014 - 23:20)
Salut Didodu258,
j'essai de mettre ton système en place mais je n'ai pas de fond qui s'affiche.
Aurais tu un codepen ou autre en exemple ?