• Sprite

    Je profite de cette page pour revenir sur un principe qui fonctionne chez moi mais pas chez un visiteur.

    Le but premier de cette page est d'utiliser le principe du "sprite"; un sprite est le regroupement en un seule image de plusieurs images.

    Avantage: l'image "sprite" est plus légère et donc chargée plus vite chez votre visiteur; dans mon exemple de 6 images: le total des 6 images hébergées individuellement est de 1100ko et le poids de l'image qui les regroupe est de 624ko.

    De plus, lorsque vous appelez 6 images, votre programme fait 6 requêtes auprès de l'hébergeur alors que le sprite ne demande qu'une seule requête donc, gain de vitesse d'affichage.

    Pour constituer un sprite avec mes 6 images, j'ai utilisé un logiciel de traitement d'image; pour moi, The Gimp.

    Je place ce sprite dans un cadre de la dimension d'une seule image et je le déplace au clic sur des boutons invisibles, placés dessus.

    Double clic pour commencer pour faire passer le bouton 2 au premier plan; ensuite, clic simple.

     

    <div style="width: 800px; height: 450px; margin: 10px auto; border: 4px ridge white; overflow: hidden;"><input id="g0" class="ssp" type="text" /><input id="g1" class="ssp" type="text" /><input id="g2" class="ssp" type="text" /><input id="g3" class="ssp" type="text" /><input id="g4" class="ssp" type="text" /><input id="g5" class="ssp" type="text" />
    <p id="spr">&nbsp;</p>
    </div>

    <style><!--
    #spr{width:4800px; height:450px; transform:translate(0px,0px); background:url('http://ekladata.com/XVVD6nquUFMAKFH44chrvWWVguQ.jpg'); transition:all 0.5s linear;}
    .ssp{position:absolute; width:800px; height:450px; background:none;}
    #g0{ z-index:5; transform:translate(0px,0px);}
    #g1, #g2,#g3,#g4,#g5{z-index:4;}

    #g0:focus ~ #spr{transform:translate(0px,0px);}
    #g1:focus ~ #spr{transform:translate(-800px,0px);}
    #g2:focus ~ #spr{transform:translate(-1600px,0px);}
    #g3:focus ~ #spr{transform:translate(-2400px,0px);}
    #g4:focus ~ #spr{transform:translate(-3200px,0px);}
    #g5:focus ~ #spr{transform:translate(-4000px,0px);}

    #g0:focus ~ #g1,#g1:focus ~ #g2,#g2:focus ~ #g3,#g3:focus ~ #g4,#g4:focus ~ #g5{z-index:6;}
    --></style>

     

    L'adresse du sprite, et les boutons qui passent en premier plan au clic du précédent. et où chacun fait avancer le sprite de 800px vers la gauche.