images de fond defilantes diaporama

obtenir ces boutons

Créer son diaporama : 11° partie

Images de fond défilantes

Mis à jour le 25.3.2012.

Il est possible, comme sur cette page, d'ajouter sur un blog des images de fond remplacées par une autre à intervalles réguliers.

En plus, la taille des images s'adapte automatiquement à la résolution de l'écran du visiteur : l'image est toujours visible intégralement.

Code : coller les instructions qui suivent dans un gadget HTML/JavaScript.

Il suffit de changer les adresses des images dans l'instruction dia13Image[0] = 'http://3.bp.blogspot.com/-e755Y2UHo9c/T1993MX5mUI/AAAAAAAABNs/96-DFYHvzFI/s1600/fond%2Bneige%2B4.JPG'; et les 9 suivantes. On peut aussi en ajouter.

Utiliser de préférence des images au format JPEG de moins de 150 ko.

Pour changer la durée de l'affichage de chaque image, modifier éventuellement 7000 dans : setTimeout("dia13compteurmax()",7000);.

<script language="JavaScript">

var dia13Image = new Array();

dia13Image[0] = 'http://3.bp.blogspot.com/-e755Y2UHo9c/T1993MX5mUI/AAAAAAAABNs/96-DFYHvzFI/s1600/fond%2Bneige%2B4.JPG';
dia13Image[1] = 'http://4.bp.blogspot.com/-GYBlessfwRg/T1izGtdHMoI/AAAAAAAABNI/e5_DKDkjHGk/s1600/combi.JPG';
dia13Image[2] = 'http://2.bp.blogspot.com/-mmvZbxMPwNk/T1-22cx3T0I/AAAAAAAABOg/xllcW6GUmcE/s1600/fond%2Bvert2.JPG';
dia13Image[3] = 'http://2.bp.blogspot.com/-6Q9EXL7AKR4/T2BfTdYu-gI/AAAAAAAABOs/Kh0Tge36m6g/s1600/reverberes.JPG';
dia13Image[4] = 'http://4.bp.blogspot.com/-VgF_aPV1Vu0/T2JbqO4zl3I/AAAAAAAABO4/A-Ey2JGxK3k/s1600/fond%2Btelephones.JPG';
dia13Image[5] = 'http://3.bp.blogspot.com/-2jJ2TjFARIU/T2X0gd4egiI/AAAAAAAABP4/2bKc4krIB6M/s1600/fond%2Bparlement.JPG';
dia13Image[6] = 'http://4.bp.blogspot.com/-UsqZcbWNxWA/T1-FnLNKFLI/AAAAAAAABOI/rkWsDb0dPkE/s1600/batavia2.JPG';
dia13Image[7] = 'http://1.bp.blogspot.com/-d42ZGHMJ8yg/T2Xy9FwZfbI/AAAAAAAABPs/9lfP-ZIF6xo/s1600/fond%2Btrain.JPG';
dia13Image[8] = 'http://1.bp.blogspot.com/-nhhSWideSpg/T2XyIHl5l7I/AAAAAAAABPg/UzrYwLzlCoM/s1600/fond%2Bverriere.JPG';
dia13Image[9] = 'http://4.bp.blogspot.com/-AWXCwNSSRQQ/T2X5TwyBfnI/AAAAAAAABQQ/sWaK7JycFpw/s1600/fond%2Bferry.JPG';

var dia13compteur = parseInt(Math.random()*dia13Image.length);
var dia13compteur2 = 0;
var dia13defiler = 16;
var dia13debut=1;
function dia13defilement() {document.write('<img style="display:none;" border="0" name="dia13defil2" />');document.write('<img style="position:fixed; left: 0px; top:0px; z-index:-1;width: 100%;" name="dia13defil" />');dia13compteurmax();}
function dia13compteurmax(){dia13intervalle = setTimeout("dia13compteurmax()",7000);if (dia13defiler == 16) dia13compteur++;if (dia13compteur == (dia13Image.length+1)) {dia13compteur = 1;};
if (dia13debut==1) {document.dia13defil2.src = dia13Image[dia13compteur-1]};dia13debut=0;
dia13compteur2=dia13compteur+1;
if (dia13compteur2 == (dia13Image.length+1)) {dia13compteur2 = 1;};
document.dia13defil2.src = dia13Image[dia13compteur2-1];
document.dia13defil.src = dia13Image[dia13compteur-1];}
</script><center><script language="javascript">dia13defilement()</script></center>

Comment ajouter un gadget HTML/JavaScript sur un blog.

10 commentaires:

Josée L a dit…

Merci pour ce gadget et ce site

Josée L a dit…

Un de mes visiteurs m'a informer que sur IE 8, le blog n’apparaît pas sauf le gadget. Autrement sur google chrome, C'est parfait.

Anonyme a dit…

y a t il une solution pour IE?
Merci

Josée L a dit…

Merci pour cet information. Comme je n'aime pas trop jouer avec le code du blog. Je vais en rester là. Ce sera utile pour les plus habile.

Meiser a dit…

1) Pour ce site, le code fonctionne parfaitement avec IE7.

2) La position en arrière-plan est déterminée par la valeur de l'instruction :
z-index:-1;

Les autres éléments ont soit une valeur pour "z-index", soit une valeur par défaut de 0. Ils doivent donc apparaître au-dessus des images de fond.


Chris a dit…

Bonjour et merci pour ce gadget. Est-il possible d'ajouter un fondu entre les images ? Merci

Laurent a dit…

Bonjour et bravo pour ce blog, très utile.
Ce message concerne les images, pas directement les images de fond, mais le mode lightbox.

Il y a apparemment un problème avec le mode lightbox : avec FF ou IE8, un simple clic gauche fonctionne mais bug avec IE9 (on doit passer par la mollette et encore, le résultat est très médiocre).
Le pb est-il connu ? il serait intéressant d'uniformiser l'accès à la lightbox selon le même procédé quel que soit le navigateur (clic gauche).
Si quelqu'un peut m'éclairer , merci d'avance

Meiser a dit…

Bonjour.

Réponse à Chris.

L'insertion d'un fondu est prévue mais n'a pas encore été réalisée faute de temps.

Par contre, si quelqu'un a déjà ajouté le code nécessaire, qu'il le partage avec nous.


postertube a dit…

merci infiniment pour cette entreé. c est impicacable de votre part

docdoc a dit…

Merci pour ton suivi de l'actu Blogger j'ai appliqué tout vos consignes à la lettre sur mon blog couverture facebook et les résultats sont très positifs..