// Fonctions pour fondu-enchaîné d'images // ====================================== // // Version améliorée du code trouvé à l'adresse ci-dessous : // // Source : http://www.javascriptfr.com/codes/FONDU-ENCHAINER-ENTRE-PLUSIEURS-IMAGES_38868.aspx // (ne pas corriger la faute d'orthographe dans l'adresse, sinon elle ne sera plus correcte) // // Autre endroit où ce même code a été trouvé : // Source : http://files.codes-sources.com/fichier.aspx?id=38868&f=index.html // // Ce code JS permet de faire défiler plusieurs images contenues dans un répertoire // => défilement des images les unes après les autres, avec un fondu-enchaîné. // - Il est compatible IE et Mozilla + amélioration pers. pour compatibilité avec Opéra, Safari, Konqueror // - Fonctionne avec GIF, JPEG, PNG // - Entièrement paramètrable (fluidité, temps de pause, nombres d'images, ...) // - Très simple à mettre en oeuvre // // Démo visible ici : http://www.3dxmakina.fr/demo/fondu/fondu.html // ------------------------------------------------------------------------- // Voir à la fin de ce fichier un exemple d'utilisation de ce fondu-enchaîné // ------------------------------------------------------------------------- // ************************************************************************************ // IMPORTANT : Il faut au minimum de 4 images pour que ce programme marche correctement // ************************************************************************************ // // Variables globales // ================== var coeff = 0.05 ; // avancement de l'opacité var temps_transition = 50 ; // temps entre chaque pas de changement d'opacité => lié à la durée de la transition // (à ne pas confondre avec duree_pause_affichage, qui est la durée d'affichage de chaque image) // Ces quatre valeurs seront initialisées par les arguments transmis à la fonction init_fondu_images(..., ..., ..., ...) // N.B. : Le suffixe transmis à init_fondu_images(...) ne comprendra pas de point de l'extension, // ce point sera ajouté et contenu dans la variable globale suffixe_images. var nombre_images // nombre d'images à utiliser dans ce fondu-enchaîné var prefixe_images // chemin + préfixe du nom des images var suffixe_images // suffixe + '.extension' du nom des images var duree_pause_affichage = 2000; // pause avant un nouveau changement d'image (en ms) = durée d'affichage de chaque image // pas touche var indice = 2; // les 2 premières images sont déjà chargées dans le HTML, on commence à la 3ème var isIE = navigator.userAgent.toLowerCase().indexOf('msie')!=-1 ; var img1 = null; var img2 = null ; var sens = 1; var tabImg; // tableau contenant les images var navigateur = ""; // contiendra le nom du navigateur utilisé function init_fondu_images(nombre_images_init, prefixe_images_init, extension_images_init, duree_affichage_secondes) { // Fonction à appeler dans la balise : par ex. // // (le dernier argument, duree_affichage_secondes, est optionnel et vaudra 2 s'il n'a pas été défini) // // Les images s'appelleront prefixe_images_init + x + "." + extension_images_init // où x est un nombre qui va de 1 à nombre_images_init // // Exemple : appel init_fondu_images(5, "images/essai", "jpg") // pour utiliser les images "images/essai1.jpg" à "images/essai5.jpg" // // Nom du navigateur navigateur = cherche_navigateur(); // Initialisation des variables globales à partir des arguments transmis nombre_images = nombre_images_init; prefixe_images = prefixe_images_init; suffixe_images = "." + extension_images_init; // Si la durée d'affichage en secondes (dernier argument, optionnel) n'a pas été définie, elle vaut 2 secondes // (valeur par défaut = 2000, donnée plus haut, lors de la définition de cette variable globale) if (duree_affichage_secondes > 0) { duree_pause_affichage = 1000*duree_affichage_secondes; } img1 = document.getElementById("defilement1") ; // première image img2 = document.getElementById("defilement2") ; // deuxième image init_opacity_fondu_images(); // Fonction qui va donner l'opacité de départ aux images 1 et 2 prechargement_images_fondu_images(); change_opacity_fondu_images(); // Fin de la fonction init_fondu_images (initialisation des variables globales + préchargement images + opacité initiale) } function init_opacity_fondu_images(){ // Au départ, attribution du style donnant l'opacité initiale aux deux images : // => opacité de 0 à la première image et de 1 à la deuxième // (pour IE, ces valeurs seront multipliées par 100 par la fonction modifie_valeur_opacity) // // Cette initialisation s'effectue ici, car si elle est insérée dans le HTML, le CSS de la page n'est pas valide. modifie_valeur_opacity(img1, 0); modifie_valeur_opacity(img2, 1); // Fin de la fonction init_opacity_fondu_images } function prechargement_images_fondu_images(){ // Fonction de préchargement des images, appelée par la fonction d'initialisation init_fondu_images(...) tabImg = new Array(nombre_images); for (i=0; i<=nombre_images -1; i++) { tabImg[i]=new Image(); tabImg[i].src = prefixe_images + (i+1) + suffixe_images; } } function cherche_navigateur() { // Fonction de recherche du navigateur (version simple, il en existe de beaucoup plus compliquées) // Renvoie le nom du navigateur : "Opera", "Konqueror", "Safari", "MSIE", "Mozilla", "autre" // Attention, l'ordre de recherche est important !! //Parce que IE reprend la mention 'Mozilla' et Opera reprend la mention 'MSIE' !! // // Recherche d'une chaîne de caractères dans le nom du navigateur // if ( navigator.userAgent.indexOf('Opera') != -1 ) { return 'Opera'; } else if ( navigator.userAgent.indexOf('Konqueror') != -1 ) { return 'Konqueror'; } else if ( navigator.userAgent.indexOf('Safari') != -1 ) { return 'Safari'; } else if ( navigator.userAgent.indexOf('MSIE') != -1 ) { return 'MSIE'; } else if ( navigator.userAgent.indexOf('Mozilla') != -1 ) { return 'Mozilla'; } // Et si ce n'est pas un de ceux-là, c'est alors un autre navigateur else { return 'autre'; } // Fin de la fonction cherche_navigateur } function valeur_actuelle_opacity(obj) { // Renvoie la valeur actuelle de l'opacité affectée à l'objet obj (par ex. une image) // sous la forme d'une valeur entre 0 et 1 (donc en divisant par 100 la valeur obtenue pour le navigateur IE) // [utilise la variable globale navigateur, déjà initialisée avec le nom du navigateur utilisé] switch (navigateur) { // case "MSIE": return parseFloat(obj.filters.alpha.opacity)/100; break; case "Mozilla": return parseFloat(obj.style.MozOpacity); break; case "Opera": case "Konqueror": case "Safari": case "autre": // return parseFloat(obj.style.KHTMLOpacity); pour anciennes versions basées sur Konqueror (dont les anciennes versions d'Opera) return parseFloat(obj.style.opacity); break; } // Fin de la fonction valeur_actuelle_opacity } function modifie_valeur_opacity(obj, nouv_opacity) { // Modifie la valeur de l'opacité affectée à l'objet obj (par ex. une image) // avec la valeur nouv_opacity, comprise entre 0 et 1 (cette fonction la multipliera par 100 pour IE) // [utilise la variable globale navigateur, déjà initialisée avec le nom du navigateur utilisé] switch (navigateur) { case "MSIE": obj.style.filter = 'alpha(opacity=' + (nouv_opacity*100) + ')'; break; case "Mozilla": obj.style.MozOpacity = nouv_opacity; break; case "Opera": case "Konqueror": case "Safari": case "autre": // obj.style.KHTMLOpacity = nouv_opacity; pour anciennes versions basées sur Konqueror (dont les anciennes versions d'Opera) obj.style.opacity = nouv_opacity; break; } // Fin de la fonction modifie_valeur_opacity } function change_opacity_fondu_images() { // Valeur actuelle d'opacité des deux images var opacity1 = valeur_actuelle_opacity(img1) ; var opacity2 = valeur_actuelle_opacity(img2) ; if (sens) { coefficient = + coeff; } else { coefficient = - coeff; } // sens prend alternativement les valeurs 1 et 0 // sens=1 => augmentation de l'opacité pour l'image img1, diminution de l'opacité pour l'image img2 // sens=0 => le contraire modifie_valeur_opacity(img1,opacity1 + coefficient); modifie_valeur_opacity(img2,opacity2 - coefficient); // Récupération de la nouvelle opacité de chacune des deux images en cours var opacity1 = valeur_actuelle_opacity(img1) ; var opacity2 = valeur_actuelle_opacity(img2) ; // Le sens d'opacité du bazar sera changé : // - dès que opacity2 arrive à zéro (cas où sens est égal à 1) // - ou sinon, dès que opacity1 arrive à zéro (c'est le cas où sens est égal à 0) if (opacity2 <= 0) // cas où sens vaut 1 { img2.src = tabImg[indice++].src; sens = 0; if (indice == (tabImg.length)) indice=0; window.setTimeout("change_opacity_fondu_images()",duree_pause_affichage) ; // attente (affichage de l'image pendant un instant, avant de recommencer) return 0; } else if (opacity1 <= 0) // cas où sens vaut 0 { img1.src = tabImg[indice++].src; sens = 1; if (indice == (tabImg.length)) indice=0; window.setTimeout("change_opacity_fondu_images()",duree_pause_affichage) ; // attente (affichage de l'image pendant un instant, avant de recommencer) return 0; } window.setTimeout("change_opacity_fondu_images()",temps_transition) ; // récursion toutes les x millisecondes (augmentation/diminution de l'opacité de la valeur coeff) // Fin de la fonction change_opacity_fondu_images } /* Exemple d'utilisation de ce fondu-enchaîné dans un fichier HTML =============================================================== Dans l'en-tête (entre et , appel de ce fichier Javascript : Puis la balise fait appel à la fonction init_fondu_images : Ensuite, les images peuvent être placées en position absolue (position: absolute; top: 0; left: 0;) dans un bloc
, à condition que ce bloc
soit lui-même positionné (avec par exemple : position: relative;) [Attention : dans ce cas (images en position absolue dans un
), le bloc
a une hauteur nulle, donc il faut lui attribuer par exemple un padding-bottom: ...px; de la hauteur des images]
bandeau1.jpg bandeau2.jpg
IMPORTANT : Les deux images doivent avoir OBLIGATOIREMENT comme NOM : "defilement1" et "defilement2" (sans accent) (attribué avec id="..." ou avec name="...") Remarque : Si l'internaute a désactivé le Javascript ou s'il utilise un navigateur avec lequel ce programme ne fonctionne pas, c'est la deuxième image qui apparaîtra, fixe. Classement des images : si possible, établir une progression d'images plus claires -> plus sombres -> plus claires, ou alors classer les images dans la logique d'un déroulement ou d'une histoire. */