DIAPO EN FONDU ENCHAINE

cs_jjdagadir Messages postés 127 Date d'inscription lundi 7 avril 2003 Statut Membre Dernière intervention 6 mars 2009 - 26 sept. 2008 à 12:26
samoxus Messages postés 2 Date d'inscription samedi 12 septembre 2009 Statut Membre Dernière intervention 14 juillet 2011 - 14 juil. 2011 à 19:10
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.

https://codes-sources.commentcamarche.net/source/48063-diapo-en-fondu-enchaine

samoxus Messages postés 2 Date d'inscription samedi 12 septembre 2009 Statut Membre Dernière intervention 14 juillet 2011
14 juil. 2011 à 19:10
C'est bon ! Je viens de trouver! Merci super script !!!! 10/10 !!
samoxus Messages postés 2 Date d'inscription samedi 12 septembre 2009 Statut Membre Dernière intervention 14 juillet 2011
14 juil. 2011 à 19:05
Bonjour! Super ce code! Mais comment personnaliser les dimensions des images ?!
cs_demarc Messages postés 1 Date d'inscription jeudi 23 juin 2011 Statut Membre Dernière intervention 13 juillet 2011
13 juil. 2011 à 11:47
Exactement ce que je cherchais, simple, facile à paramétrer... superbe travail, un grand merci
franklinternaute Messages postés 3 Date d'inscription samedi 14 mai 2011 Statut Membre Dernière intervention 18 mai 2011
18 mai 2011 à 10:41
RE
Je n'ai pu resoudre le probleme du cadre apparaissant lors de mon fondu sur le diaporama pares les deux premieres images. J'avais inclu le code, et je serais pret a mettre le site en ligne si je pouvais resoudre ce probleme
franklinternaute Messages postés 3 Date d'inscription samedi 14 mai 2011 Statut Membre Dernière intervention 18 mai 2011
16 mai 2011 à 11:49
RE
Merci pour ta reponse, j'apprecie, cependant, je me suis mal exprime. l'image est chargee mais lors de son chargement apparait tres rapidement un cadre gis en son pourtour et un logo image au centre.

je te joins le code si ca peut t'aider!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>###</title>
<style type="text/css">
<!--
#container {
height: 650px;
width: 1024px;
}
#header {
float: left;
height: 90px;
width: 300px;
margin-top: 60px;
margin-left: 63px;
}
#contenu {
float: left;
height: 500px;
width: 1024px;
margin-top: 25px;
}
#menusousmenu {
float: left;
height: 400px;
width: 270px;
color: #CCC;
}
#image {
float: right;
height: 450px;
width: 500px;
margin-right: 100px;
margin-top: 3px;
}
body {
background-color: #000;
}
#image2 {
height: 333px;
width: 500px;
}
-->
</style>
<link href="../CSS/MENU.css" rel="stylesheet" type="text/css" />
<link href="../CSS/SOUS MENU.css" rel="stylesheet" type="text/css" />
<link href="../CSS/BLOC5.css" rel="stylesheet" type="text/css" />
</head>
<script>

tbimage=new Array('ROOFTOP_AT_IL_GAMBERO _003','JIMMY_JAMZ _001','PARAGON_003','LAVAZZA_MARQUEE_2009_001','LAVAZZA_2010_001','CATALANO_HOUSE_LIVING_001') //tableau des image mettre le nom de toutes les images
preImages=new Array
var opaa=0;
var opab=25;
var compteur=1
var vitesse=4000

function precharge() {
for (i = 0; i < tbimage.length; i++) {
preImages[i] = new Image()
preImages[i].src = '../IMAGES/HOME/'+tbimage[i]+'.jpg'
}
setTimeout(defilmage,vitesse);
}

function defilmage(reg){
oxo=reg;
if(compteur==tbimage.length-1){
compteur=-1
}
if(oxo==1){
compteur++
opaa=10;
document.getElementById('divimageb').src="../IMAGES/HOME/"+tbimage[compteur]+".jpg";
oxo=0;
}
var imacibleb=document.getElementById('divimagea');
var imaciblea=document.getElementById('divimageb');

opaa+=3;
opab-=4;
if(document.all && !window.opera){
imaciblea.style.filter = 'alpha(opacity=' + opaa + ');' ;
imacibleb.style.filter = 'alpha(opacity=' + opab + ');';
}
else{
imaciblea.style.opacity = opaa/100;
imacibleb.style.opacity = opab/100;
}
if(opaa>=100){
opaa=10;
opab=100;
var xcc=imaciblea.src.length-4
var cxx=imaciblea.src.lastIndexOf("/")+1
var nomimg=imaciblea.src.substring(cxx,xcc)
imacibleb.src='images/'+nomimg+'.jpg'
setTimeout("defilmage(1)",vitesse);
return false
}
setTimeout("defilmage()",25);
}
if(navigator.appName.substring(0,3)=="Mic"){
attachEvent("onload",precharge);
}
else{
addEventListener("load", precharge, false);
}
</script>
</head>


















<li>[HOME.html HOME]</li>
<li>[ABOUT.html PROFILE]</li>
<li>[INTERIOR.html INTERIOR]</li>
<li>[INTERIOR_RESIDENTIAL.html RESIDENTIAL]</li>
<li>[INTERIOR_COMMERCIAL.html COMMERCIAL]</li>
<li>[INTERIOR_HOSPITALITY.html HOSPITALITY]</li>
<li>[INTERIOR_RETAIL.html RETAIL]</li>
<li>[INTERIOR_EXHIBITION&INSTALLATION.html EXHIBITION AND INSTALLATION]</li>
<li>[PRODUCT_LIST.html PRODUCT]</li>
<li>[PRESS_001.html PRESS]</li>
<li>[CONTACT.html CONTACT]</li>




</html>
@karamel Messages postés 1856 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 11 juin 2024 153
16 mai 2011 à 11:13
les images n'on pas ete trouvé le chemin pour les images doit etre incorecte
franklinternaute Messages postés 3 Date d'inscription samedi 14 mai 2011 Statut Membre Dernière intervention 18 mai 2011
16 mai 2011 à 09:54
Bonjour,
je realise un site actuellement en tant que debut. jai utilise le code de fondu pour diaporama.
Je l'ai inserer a ma page mais depuis au chargement des deux premieres images pas de pb mais aux suivantes, un cadre apparait au chargement avec un logo image.
Quel peut etre le probleme?
je peux envoyer le code de ma page si ca peut aider.
merci d'avance et bravo pour le code!!
boer87 Messages postés 1 Date d'inscription mardi 8 septembre 2009 Statut Membre Dernière intervention 17 novembre 2010
17 nov. 2010 à 03:14
Bonjour,
Merci pour ce code excellent.
Je suis débutant, et j'aimerai savoir comment peut on faire pour rendre la transition plus longue.
Cordialemnt.
frederik83 Messages postés 4 Date d'inscription lundi 14 juin 2010 Statut Membre Dernière intervention 17 juin 2010
17 juin 2010 à 07:36
bonjour

j'ai mis des photos mais elles sont cote a cote et aucun fondu

alors j'ai peut etre fait une mauvaise manip
j'ai mis les url en bas du javascript

merci de m'aider
finkely Messages postés 2 Date d'inscription lundi 5 novembre 2007 Statut Membre Dernière intervention 7 mai 2010
7 mai 2010 à 16:11
heu mea culpa j'avais pas vu le commentaire de Kazma un peu plus haut et merci encore c'est exactement ce dont j'avais besoin
dsl d'avoir fait mon boulet...
finkely Messages postés 2 Date d'inscription lundi 5 novembre 2007 Statut Membre Dernière intervention 7 mai 2010
7 mai 2010 à 15:54
Bonjour,
j'aurai une question par rapport à l'utilisation de ce script,
est-il possible de faire deux diaporama différents dans la même page ?
Je voudrais en fait que une colonne affiche certaines photos et une autre colonne fasse la même chose avec d'autres photos.
merci de m'indiquer la marche à suivre
cordialement
cs_WhiteStorm Messages postés 4 Date d'inscription mardi 6 avril 2010 Statut Membre Dernière intervention 8 avril 2010
8 avril 2010 à 19:44
De nouveau résolu, avec compteur = 1
(pourquoi était-il à 2? lol)

Excellent script bravo !
cs_WhiteStorm Messages postés 4 Date d'inscription mardi 6 avril 2010 Statut Membre Dernière intervention 8 avril 2010
8 avril 2010 à 19:36
Bonjour, j'ai réglé le problème qui bizarrement venait du fait que mes images étaient stockées dans un sous-répertoire (images/subfolder/xxx.jpg) et que j'ai mis ce sous-répertoire dans le tableau array('subfolder/xxx.jpg')
En remplaçant dans le code images/ par images/subfolder/ et en l'enlevant du tableau ça a fonctionné.

J'ai un 2ème problème: je souhaite que l'image soit cliquable, hors quand je mets un que ce soit sur le div conteneur ou l'image B, ça modifie l'ordre d'apparition des images (l'image de départ revient entre chaque image), si je le mets uniquement sur l'image A, l'image n'est pas cliquable.

Une idée?
cs_WhiteStorm Messages postés 4 Date d'inscription mardi 6 avril 2010 Statut Membre Dernière intervention 8 avril 2010
7 avril 2010 à 23:20
Le diapo n'est plus visible sur http://www.éfc.ch , mais il m'a semblé que le problème venait du fait que les images suivantes ne se "dissolvent" pas.
cs_WhiteStorm Messages postés 4 Date d'inscription mardi 6 avril 2010 Statut Membre Dernière intervention 8 avril 2010
7 avril 2010 à 18:14
Bonjour, le script est excellent, seulement je rencontre un problème particulier: la première transition se passe parfaitement mais les suivantes sont abruptes.
Vous pouvez voir le problème à l'adresse suivante: http://www.éfc.ch

Pourriez-vous me dire si j'ai fait une erreur dans l'application du script?
@karamel Messages postés 1856 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 11 juin 2024 153
6 mars 2010 à 21:15
j'ai cree un script base sur celui ci pour mettre plusieurs diapos http://www.javascriptfr.com/codes/DIAPO-MULTIPLES-FONDU_50083.aspx
cs_beney Messages postés 2 Date d'inscription dimanche 28 février 2010 Statut Membre Dernière intervention 28 février 2010
28 févr. 2010 à 12:46
Bonjour,

J'ai sans soucis réussis à me servir de ce script, cependant je souhaiterai mettre plusieurs diapo en fondu enchainé, et comme je l'ai vu plus haut dans les commentaire il "suffirait" de changer tous les nom de variables. Chose que j'ai fait mais qui ne fonctionne pas, en effet je n'ai qu'une diapo qui fonctionne sur les deux (Sachant que j'ai aussi changé le nom des div etc..). Voici ce que donne le script dans <head> : (ici seul la deuxiéme diapo fonctionne, l'autre image reste fixe)

<script>
tbimage=new Array('LaMereZou-0274','LaMereZou-0286','LaMereZou-0315','LaMereZou-0329','LaMereZou-0473','LaMereZou-0481') //tableau des image mettre le nom de toutes les images
preImages=new Array
var opaa=0;
var opab=100;
var compteur=2
var vitesse=2000

function precharge() {
for (i = 0; i < tbimage.length; i++) {
preImages[i] = new Image()
preImages[i].src = 'images/'+tbimage[i]+'.jpg'
}
setTimeout(defilmage,vitesse);
}

function defilmage(reg){
oxo=reg;
if(compteur==tbimage.length-1){
compteur=-1
}
if(oxo==1){
compteur++
opaa=10;
document.getElementById('divimageb').src="images/"+tbimage[compteur]+".jpg";
oxo=0;
}
var imacibleb=document.getElementById('divimagea');
var imaciblea=document.getElementById('divimageb');

opaa+=3;
opab-=4;
if(document.all && !window.opera){
imaciblea.style.filter = 'alpha(opacity=' + opaa + ');' ;
imacibleb.style.filter = 'alpha(opacity=' + opab + ');';
}
else{
imaciblea.style.opacity = opaa/100;
imacibleb.style.opacity = opab/100;
}
if(opaa>=100){
opaa=10;
opab=100;
var xcc=imaciblea.src.length-4
var cxx=imaciblea.src.lastIndexOf("/")+1
var nomimg=imaciblea.src.substring(cxx,xcc)
imacibleb.src='images/'+nomimg+'.jpg'
setTimeout("defilmage(1)",vitesse);
return false
}
setTimeout("defilmage()",50);
}
if(navigator.appName.substring(0,3)=="Mic"){
attachEvent("onload",precharge);
}
else{
addEventListener("load", precharge, false);
}

tbimage=new Array('LaMereZou-0208','LaMereZou-0214','LaMereZou-0244','LaMereZou-0247','LaMereZou-0449','LaMereZou-0275') //tableau des image mettre le nom de toutes les images
preImages=new Array
var opac=0;
var opad=100;
var comp=2
var vit=2000

function precharge() {
for (i = 0; i < tbimage.length; i++) {
preImages[i] = new Image()
preImages[i].src = 'images/'+tbimage[i]+'.jpg'
}
setTimeout(defilmage,vit);
}

function defilmage(reg){
oxo=reg;
if(comp==tbimage.length-1){
comp=-1
}
if(oxo==1){
comp++
opac=10;
document.getElementById('divimaged').src="images/"+tbimage[comp]+".jpg";
oxo=0;
}
var imacibled=document.getElementById('divimagec');
var imaciblec=document.getElementById('divimaged');

opac+=3;
opad-=4;
if(document.all && !window.opera){
imaciblec.style.filter = 'alpha(opacity=' + opac + ');' ;
imacibled.style.filter = 'alpha(opacity=' + opad + ');';
}
else{
imaciblec.style.opacity = opac/100;
imacibled.style.opacity = opad/100;
}
if(opac>=100){
opac=10;
opad=100;
var xcc=imaciblec.src.length-4
var cxx=imaciblec.src.lastIndexOf("/")+1
var nomimg=imaciblec.src.substring(cxx,xcc)
imacibled.src='images/'+nomimg+'.jpg'
setTimeout("defilmage(1)",vit);
return false
}
setTimeout("defilmage()",50);
}
if(navigator.appName.substring(0,3)=="Mic"){
attachEvent("onload",precharge);
}
else{
addEventListener("load", precharge, false);
}
</script>

Merci d'avance pour l'aide !
mariaudais Messages postés 1 Date d'inscription mercredi 10 février 2010 Statut Membre Dernière intervention 10 février 2010
10 févr. 2010 à 11:09
bonjour,
merci beaucoup Karma pour ces sources.
J'ai réussi à faire un fondu enchainé automatique et j'ai vu qu'on pouvait créer une table des images par la fonction glob (MRABALI le 30/06). Si j'ai bien compris ça permet d'ajouter des images dans le fichier images sans avoir à toucher au programme. Mais je ne comprends pas trop où il faut placer ces 1eres lignes (<?php
$arrImages = glob("images/*.jpg") ... jusqu'à ?>
Je n'utilise pas le php.
Merci de votre aide
myckel32 Messages postés 1 Date d'inscription jeudi 18 mai 2006 Statut Membre Dernière intervention 19 janvier 2010
19 janv. 2010 à 20:48
Salut Kazma,

Après avoir lu tous les commentaires, je viens de relever une erreur sur mon scritp, enfaite quand les images (fondu automatique) disparaisse il y a toujours la première qui apparaît brièvement sur la fenêtre tu serais d'ou cela pourrait venir ?
cs_Mexos Messages postés 1 Date d'inscription jeudi 17 décembre 2009 Statut Membre Dernière intervention 4 janvier 2010
4 janv. 2010 à 21:42
Bravo et merci pour ton code.
Par contre je suis débutant webdev et j'ai un petit soucis.
J'essaie de mettre le diaporama dans une page inclue dans mon index.php avec un include(). Les aperçus sont à leur place, mais la grande image sort de la div.
Un screenshot vous parlera plus : http://mexos.free.fr/grrr.jpg
J'espere que vous pourrez m'aider (j'ai regardé les réponses précédentes concernant les problemes de position, mais ca fait un moment que je galère et j'arrive a rien =s)
D'avance merci :).
kdoduciel Messages postés 13 Date d'inscription lundi 9 novembre 2009 Statut Membre Dernière intervention 14 décembre 2009
14 déc. 2009 à 09:35
J'ai compris à quoi ils servent... Il sont juste indispensable ;-) la honte. Mais en xhtml strict 1.0 le CSS passe pas.En HTML 2.0 ça passe avec un avertissement.
BAD_DARK_SPIRIT regrettait la position absolute voici une solution, elle est en ligne ici:http://www.institutosmose.ch/?fichier=cont_sgm

html:

<script type="text/javascript" src="script/diapo.js"></script>


CSS:
/* ---- Le div animation contient les trois div du script et j'ai suprimé la position absolute du div conteneur ---*/
#animation{
float:left;
width:11em;
height:10em;
}

#divconteneur{
/* position:absolute; */
top:350px;
left:235px;
}
#divimagea{
position:absolute;
width:10em;
height:10em;
}
#divimageb{
position:absolute;
width:10em;
height:10em;
}
@karamel Messages postés 1856 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 11 juin 2024 153
12 déc. 2009 à 19:19
c'est pour initialise le demmarage mais si sa marche sans laisse comme ca
kdoduciel Messages postés 13 Date d'inscription lundi 9 novembre 2009 Statut Membre Dernière intervention 14 décembre 2009
12 déc. 2009 à 13:25
Kazma, c'est vraiment la class ;-) c'est simple, propre, efficace et bien d'autres. Merci beaucoup !
Juste une p'tite question? J'ai séparé dans un fichier JS le code,
puis retiré le css inclus dans ton code, pour le mettre dans ma feuille css perso. les parametres suivant :
opacity:100;
FILTER:alpha(opacity=100);
Ne passe pas la validation W3C! Je les ai purement et simplement supprimés et ça fonctionne toujours,sous IE et FFx.????
Question: Sont-ils indispensables? (event. pour d'autre explorateur?)
Encore un grand merci!
pharen Messages postés 4 Date d'inscription samedi 5 décembre 2009 Statut Membre Dernière intervention 17 décembre 2009
8 déc. 2009 à 14:29
Bravo !! superbe diaporama
comme on dit: simple et de bon gout !!
moughlee Messages postés 7 Date d'inscription mardi 16 juin 2009 Statut Membre Dernière intervention 20 janvier 2010
8 déc. 2009 à 11:31
hello,

super c'est ce que je cherche le diaporama avec fondu et défilement automatique.
Mais j'ai un souci, je ne trouve pas comment redimmensionner la taille des photos qui apparaissent. Comment peut on faire pour quil scanne tous les fichiers d'un dossier pour que des qu'on ajoute une photo ds ce dossier elle soit automatique ment ds le diaporama ?

merci a+
cs_born2kill Messages postés 2 Date d'inscription samedi 28 mai 2005 Statut Membre Dernière intervention 22 novembre 2009
22 nov. 2009 à 13:33
Vraiment niquel ce script ! 10/10 sans hésitations.
Je me demande par contre s'il y a possibilité de changer l'effet de transition entre chaque images?
cs_Ricquet Messages postés 20 Date d'inscription mardi 13 février 2007 Statut Membre Dernière intervention 30 novembre 2010
28 oct. 2009 à 20:58
effectivement sur un autre ordi, IE est OK !
l'effet de saccade vient donc de mon PC uniquement sur Internet explorer.
Bien vu !
@+
@karamel Messages postés 1856 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 11 juin 2024 153
28 oct. 2009 à 13:28
salut

je vient de visite ton site avec ie 6 et 8 pas mal l'adaptation et je n'ai rien remarque tout m'a semble bien fonctionner a tu essayer sur un autre ordi ?
cs_Ricquet Messages postés 20 Date d'inscription mardi 13 février 2007 Statut Membre Dernière intervention 30 novembre 2010
27 oct. 2009 à 16:52
Bonjour Kazma !
bravo pour ton script que j'ai adopté dans la page d'accueil de mon site www.edialbum.fr
tout fonctionne y compris l'autorun pour répondre à cagoulechonchon,
cependant, j'ai une différence d'affichage entre firefox (impeccable) et i.explorer 6 ou 8 (saccades).
as tu une explication voir une suggestion ?
j'ai lu tout le fil, ton script fait des émules et tu es donc très sollicité...
merci !
cagoulechonchon Messages postés 35 Date d'inscription vendredi 12 janvier 2007 Statut Membre Dernière intervention 18 mars 2010
29 juin 2009 à 14:50
Personne n'a une idée ?
cagoulechonchon Messages postés 35 Date d'inscription vendredi 12 janvier 2007 Statut Membre Dernière intervention 18 mars 2010
23 juin 2009 à 10:44
Je n'arrive pas a trouver comment faire pour que le diaporama de défilement automatique ("fondu marche arret .html") démarre automatiquement lorsque la page se charge (sans avoir a cliquer "marche")
J'avoue que je suis vraiment nul en Javascript..

Quelqu'un aurait une idée pour me mettre sur la voix ?
cagoulechonchon Messages postés 35 Date d'inscription vendredi 12 janvier 2007 Statut Membre Dernière intervention 18 mars 2010
17 juin 2009 à 13:07
Bonjour à vous !
C'est vrai que ce script est vraiment genial !
Par contre je m'aperçois qu'il semble poser un petit probleme sous ie6 : j'ai un message qui me dit : "An error has occurred in the script on this page". Ce message me précise
- la ligne :
- l'erreur : "objet expected"
Le même probleme se pose pour ie7

Y a t-il une alternative pour regler ce probleme ?
mrabali Messages postés 1 Date d'inscription mercredi 29 octobre 2008 Statut Membre Dernière intervention 3 juin 2009
3 juin 2009 à 20:46
Bonjour kazma, et merci pour ce script.

Je suis débutant dans le développement web, j'ai ajouté un peu du code php pour pouvoir automatiser la liste des images sans la modifier à chaque fois qu'on ajoute une image au répertoire.

Voici le code pour ceux qui sont intéressés (toutes remarques ou suggestions seront les bienvenues) :

<?php
$arrImages = glob("images/*.jpg"); //la fonction glob() recherche les images ".jpg" contenues dans le dossier "images" et retourne un tableau contenant ('images/img1.jpg', images/img2.jpg', images/img3.jpg',...)

for ($i=0; $i<count($arrImages); $i++){ //on fait une boucle sur le tableau retourné pour enlever "images/" du début (7) et '.jpg' de la fin (-4)
$listeImages .= "," . substr($arrImages[$i], 7, -4);
}
$listeImages = substr($listeImages, 1); // au final $listeImages contient "img1,img2,img3,..."
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fondu</title>
</head>

<?php echo $listeImages; ?>
<!-- on stock la liste des images dans cette div qu'on n'affichera pas bien sûr -->

<!-- j'ai mis les images dans une table pour corriger le problème du positionnement absolu et j'ai enlevé le positionnement absolu à la seconde image-->
" style="position:absolute; width:15em; height:15em; opacity:100; FILTER:alpha(opacity=100);">
" style="width:15em; height:15em; opacity:0; FILTER:alpha(opacity=0);">

<script type="text/javascript">
<!--
//j'ai mis le code javascript en bas de la page pour pouvoir récupérer la liste des images de la div

var arrImages = document.getElementById('listeImages').innerHTML; //on récupère notre liste des images contenue dans la div
tbimage = arrImages.split(','); //on transforme cette liste en un tableau

//le reste est le même

preImages = new Array;
var opaa = 0;
var opab = 100;
var compteur = 2;
var vitesse = 2000;

function precharge(){
for (i=0; i<tbimage.length; i++){
preImages[i] = new Image();
preImages[i].src = 'images/' + tbimage[i] + '.jpg';
}
setTimeout(defilmage, vitesse);
}

function defilmage(reg){
oxo = reg;
if (compteur == tbimage.length - 1){
compteur = -1;
}
if (oxo == 1){
compteur++;
opaa = 10;
document.getElementById('divimageb').src = 'images/' + tbimage[compteur] + '.jpg';
oxo = 0;
}
var imacibleb = document.getElementById('divimagea');
var imaciblea = document.getElementById('divimageb');
opaa += 3;
opab -= 4;
if (document.all && !window.opera){
imaciblea.style.filter = 'alpha(opacity=' + opaa + ');';
imacibleb.style.filter = 'alpha(opacity=' + opab + ');';
}
else{
imaciblea.style.opacity = opaa / 100;
imacibleb.style.opacity = opab / 100;
}
if (opaa >= 100){
opaa = 10;
opab = 100;
var xcc = imaciblea.src.length - 4;
var cxx = imaciblea.src.lastIndexOf('/') + 1;
var nomimg = imaciblea.src.substring(cxx, xcc);
imacibleb.src = 'images/' + nomimg + '.jpg';
setTimeout('defilmage(1)', vitesse);
return false;
}
setTimeout('defilmage()', 25);
}
if (navigator.appName.substring(0, 3) == 'Mic'){
attachEvent('onload', precharge);
}
else{
addEventListener('load', precharge, false);
}
-->
</script>

</html>
cs_rtchi Messages postés 1 Date d'inscription lundi 25 mai 2009 Statut Membre Dernière intervention 28 mai 2009
28 mai 2009 à 12:01
merci pour le script, il est tres utile et simple. J'ai par contre une question qui va peut etre vous sembler bete (ou simple) mais je debute dans le dev web. j'ai utilisé ton script pour dérouler 4 photos dans un bloc style
bloc div
texte texte texte
texte texte texte
texte texte texte
photos (via ton script)
texte texte texte
texte texte texte
texte texte texte

ca colle nickel mais comme j'ai plusieurs resolutions utilisateur j'ai voulu remplacer le positionnement absolute par float fixed pour que l'image s'adapte au contexte) Malheureusement cela ne fonctionne plus, une photo s'affiche puis l'autre en dessous et vice versa.

C'est peut etre juste un pb de Css ou de positionnement mais je seche

merci d'avance de votre aide
cagoulechonchon Messages postés 35 Date d'inscription vendredi 12 janvier 2007 Statut Membre Dernière intervention 18 mars 2010
27 mai 2009 à 23:25
Kazma U Rock !

Merci pour le script avec le sous dossier, j'avais tout simplement zapé un des chemin pour la source dues images (ba oui c'est ca qd on copie-colle bêtement ! ;-)
Bref ca marche tres bien (le tps de chargement est un peu long mais je pense que ca doit etre normal)

Merci encore pr ta patience !!
cPalabait Messages postés 12 Date d'inscription dimanche 15 février 2009 Statut Membre Dernière intervention 27 mai 2009
27 mai 2009 à 22:59
Bonsoir KAZMA,

Mon problème est résolu : mes conversions d'images prenaient comme extension .JPG au lieu de .jpg
Ca crevait les yeux, et je ne le voyais pas !

Merci de ta patience, et encore une fois, bravo pour ton code et ta perspicacité.
cicco69 Messages postés 1 Date d'inscription dimanche 24 mai 2009 Statut Membre Dernière intervention 27 mai 2009
27 mai 2009 à 17:11
Bonsoir,
j'ai récupéré le code du défilement auto et du marche/arrêt au passage de la sourie.
Cependant, je n'arrive pas à faire fonctionner cet ensemble. il y aurait-il une âme charitable pour m'aider ? :D
voici le code :

<!--DIAPO JAVASCRIPT-->
<script>
function fOver(img)
{
document.getElementById('divimageb').src=img;
clearTimeout(marche);
}
function fDiapo ()
{
var img = document.rien.hid.value
tbimage = img.split("|");
var preImages = new Array;
var opaa = 0;
var opab = 100;
var compteur = 2;
var vitesse = 1200;
function precharge()
{
for (i = 0; i < tbimage.length; i++)
{
preImages[i] = new Image();
preImages[i].src = tbimage[i];
}
setTimeout(defilmage,vitesse);
}
varTest = true;
function defilmage()
{
if(compteur==tbimage.length-1)
{
compteur = -1;
}
if(!varTest)
{
compteur++;
opaa=10;
document.getElementById('divimageb').src=tbimage[compteur];
varTest = true;
}
var imacibleb=document.getElementById('divimagea');
var imaciblea=document.getElementById('divimageb');
opaa+=3;
opab-=4;
if(document.all && !window.opera)
{
imaciblea.style.filter = 'alpha(opacity=' + opaa + ');' ;
imacibleb.style.filter = 'alpha(opacity=' + opab + ');';
}
else
{
imaciblea.style.opacity = opaa/100;
imacibleb.style.opacity = opab/100;
}
if(opaa>=100)
{
opaa=10;
opab=100;
imacibleb.src=imaciblea.src;
marche = setTimeout(defilmage,vitesse);
return varTest = false;
}
marche = setTimeout(defilmage,25);
}
if(navigator.appName.substring(0,3)=="Mic")
{
attachEvent("onload",precharge);
}
else
{
addEventListener("load", precharge, false);
}
}
</script>

//DIAPO
echo '
';
echo '';
echo '';
echo '
';
$tabToString = implode('|', $image);// le tableau est transformé en chaine de caracteres avec comme separateur |
echo '<form name="rien"></form>';
echo '<script>fDiapo();</script>
';
$j=0;
//thumbs
while ($j<$i && $thumbs)
{
echo '';
$j++;
}
echo '
';

je tiens à préciser que le défilement ce passe bien tant que je m'approche pas du thumbs. et que au mouvement de la sourie sur l'image le diapo s'arrête bien mais ne repars pas.
Merci par avance.
@karamel Messages postés 1856 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 11 juin 2024 153
27 mai 2009 à 15:09
franchement je fait rien de special a part enregistrer avec la config par default
la cause peut etre aussi le nom de tes images si quand tu teste sur windows sa marche lsa peut etre du aux majucule ou encore les espace si il y en a
windows fait abstraction de tous ceci mais souvent les serveur sur internet fonctionnes sur unix et unix est sensible aux majuscules minuscule contrairement a windows et ( coucou ) est different de ( Coucou ) et pour les espaces il peuvent etres remplace pas d'autre carracteres
cPalabait Messages postés 12 Date d'inscription dimanche 15 février 2009 Statut Membre Dernière intervention 27 mai 2009
27 mai 2009 à 14:09
Merci Kazma,
Pour mes tests, je ne parviens pas à obtenir le même format que vos images, même avec paint.net, xnview 1.96.1, ou gimp 2.26 :
Vous sortez du .jpg Truecolor (v1.2) et je n'obtiens que du .jpg Truecolor (v1.1) !
Acceptez-vous de me dire comment vous procédez, svp ?
@karamel Messages postés 1856 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 11 juin 2024 153
27 mai 2009 à 09:40
j'utilise aussi xnview et paint.net
cPalabait Messages postés 12 Date d'inscription dimanche 15 février 2009 Statut Membre Dernière intervention 27 mai 2009
27 mai 2009 à 00:58
Bonsoir KAZMA,
J'ai poursuivi mes test et ai observé que le problème vient peut-être du format des photos :
1) un diaporama contenant une de mes images insérée au milieu des tiennes tourne bien chez free, sauf mon image qui n'est pas affichée,
2) l'une de tes images ne s'affiche plus si je la ré-enregistre avec gimp ou xnview en jpg truecolor v1.1, alors même que je l'ai laissée au milieu du diaporama réalisé avec tes images ...

Ma question : quel logiciel as-tu utilisé pour enregistrer tes images, et quel format as-tu choisi ?
cPalabait Messages postés 12 Date d'inscription dimanche 15 février 2009 Statut Membre Dernière intervention 27 mai 2009
26 mai 2009 à 14:09
Bonjour,
J'ai réduit le nom de mon répertoire fondench et l'ai remonté pour être à la racine de mon dossier (n'est plus un sous-répertoire de Images).
Mais ça ne fonctionnait toujours pas sur free, alors que ça fonctionne bien en local.
J'ai tout mis à la racine, le .js et mes images au même niveau que mon fichier .html, et toujours rien ...
Je suis en panne de tests à faire ;-)
A plus
@karamel Messages postés 1856 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 11 juin 2024 153
26 mai 2009 à 13:12
et une modif de plus

bon j'ai donc rajouter un repertoire celui ci se nome images si on veut lui donner un autre nom il faudra modifier le script

en théorie je dit bien en théorie il devrait pas y avoir de probleme au niveau du répertoire

conclusion : c'est repartie pour des testes
cagoulechonchon Messages postés 35 Date d'inscription vendredi 12 janvier 2007 Statut Membre Dernière intervention 18 mars 2010
26 mai 2009 à 10:55
Boujour a tous !
Tout d'abord merci Kazma, ca fait vraiment plaisir la rapidité avec laquelle tu reponds !
Bon alors moi de mon coté j'ai fait pas mal de tests avec ton nouveau script et ca fonctionne bien tant qu'on ne place pas les images dans un sous dossier.
Ce qui se passe c'est que les 2 premieres images passent bien et apres elles "sautent" d'une image a l'autre..
Maintenant peut-etre que mon chemin n'est pas bon .. Pour un dossier image intitulé "diaporama" j'ai essayé
- document.getElementById('divimageb').src="diaporama/"+tbimage[compteur]+".jpg";
- document.getElementById('divimageb').src="diaporama/"+compteur+".jpg";
Voila pour le compte rendu mais je ne fais peut etre pas avancer les choses ..
@karamel Messages postés 1856 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 11 juin 2024 153
26 mai 2009 à 09:02
document.getElementById('divimageb').src="Images/fondu_ench/"+compteur+".jpg";

normalement c'est bon a voir .src="Images/fondu_ench mais le I de image en minuscule c'est peut etre la cause

cpalabait
j'ai fait des testes en locale et sur un serveur et sa marchait bien et je pense aussi que c'est du au lien car apparement il ne trouve pas le repertoire des images tu peut toujour essayer de mettre le nom du repertoire en minuscule si bien evidement il y a des majuscules et aussi eviter un nom long
cPalabait Messages postés 12 Date d'inscription dimanche 15 février 2009 Statut Membre Dernière intervention 27 mai 2009
25 mai 2009 à 23:36
Bonsoir,
Ce que j'avais écris fonctionne bien en local ... mais toujours pas sur ma page perso de free : rien avec ff; et juste la trace immobile d'un lien vers une image avec ie ... Je pense que le problème est une affaire de liens relatifs ou absolu, mais sans parvenir à aller plus loin ! A moins que ce soit propre à free !
Merci encore à Kazma.
cPalabait Messages postés 12 Date d'inscription dimanche 15 février 2009 Statut Membre Dernière intervention 27 mai 2009
25 mai 2009 à 21:31
Bonsoir,
Quelle réactivité, KAZMA ! Je me suis empressé de remplacer l'ancien par un nouveau script, mais je ne sais pas comment entrer le lien relatif Images/fondu_ench dans la ligne :

document.getElementById('divimageb').src=tbimage[compteur]+".jpg";

Je l'avais précédemment ajouté ainsi :
document.getElementById('divimageb').src="Images/fondu_ench/"+compteur+".jpg";

Qui peut me renseigner ?
@karamel Messages postés 1856 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 11 juin 2024 153
25 mai 2009 à 19:41
bon bas finalement j'aurait ete plus rapide que prevus

donc donc donc :
- j'ai rajouter un prechargement j'ai fait des testes et apparement ca marche

- j'ai du en conséquence rajouter un tableau (array) ce qui n'est pas un mal car maintenant on n'est plus oblige de renommer ses images 1 2 3 ...etc il faudra quand meme remplir le tableau du nom des images

- et enfin la variable qui contenait le nombre d'image a été supprimer elle ne servait plus a rien.

++
@karamel Messages postés 1856 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 11 juin 2024 153
25 mai 2009 à 18:10
j'y pense depuis depuis un moment a mettre un prechargement mais je l'ai pas encore fait j'essaierais de le faire dans les jours a venir
cagoulechonchon Messages postés 35 Date d'inscription vendredi 12 janvier 2007 Statut Membre Dernière intervention 18 mars 2010
25 mai 2009 à 14:55
Bonjour,
En effet j'ai le même probleme.. ca fonctionne parfaitement en local mais ca bug en ligne (moi je suis chez ovh donc pas de probleme de Free)
En revanche j'ai remarqué que ca ne bug qu'au 1er "tour" et ca marche nickel apres. Il faut probablement integrer un pré-chargement des images pour que ca marche des le 1er passage.
.. mais ca je ne sais pas faire..
quelqu'un est il plus doué que moi ?
cPalabait Messages postés 12 Date d'inscription dimanche 15 février 2009 Statut Membre Dernière intervention 27 mai 2009
25 mai 2009 à 00:58
Bonsoir.
Super code qui fonctionne parfaitement en local avec les images et une feuille .js dans des dossiers séparés.
Mais elle ne fonctionne plus une fois uploadée chez free !

Pourquoi cette différence de comportement entre local ou chez free ?

Pour tester, j'y ai uploadé vos fichiers d'exemple (avec le script dans le fichier et les images à la racine), et ça fonctionne bien. Mais mes pages et mon site sont trop complexes pour que je procède ainsi ...

Quelqu'un a-t-il une suggestion de solution ?
cPalabait Messages postés 12 Date d'inscription dimanche 15 février 2009 Statut Membre Dernière intervention 27 mai 2009
24 mai 2009 à 11:39
Bonjour,
Correction : facile de déplacer tout ce qui est entre les balises <script> dans une feuille .js !
Mais j'observe que le fondu n'est plus effectif avec ie (l'enchainement se fait sans fondu), alors qu'il fonctionne bien sous FF ...
Reste la possibilité ou non de placer un 2nd fondu enchainé dans une même page ...
cPalabait Messages postés 12 Date d'inscription dimanche 15 février 2009 Statut Membre Dernière intervention 27 mai 2009
24 mai 2009 à 01:30
Bonjour,
Votre code est excellent, notamment parce qu'il fonctionne parfaitement avec IE (contrairement à un autre code de "fondu enchainer" avec lequel je me suis cassé les dents! ).
Pour simplifier mes pages, j'ai tenté d'en isoler la partie "javascript" dans un fichier .js placé dans un sous-répertoire ... mais sans succès !
Est-ce possible ?
Je pense que c'est la ligne "document.onload=setTimeout(defilmage,vitesse);" qui me pose des difficultés ...
Enfin, j'aurai un 2nde question : est-il possible dans une même page d'y faire tourner un second fondu enchainé ?
@karamel Messages postés 1856 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 11 juin 2024 153
23 mai 2009 à 17:49
je me contenterait d'etre un simple homosapiens
cagoulechonchon Messages postés 35 Date d'inscription vendredi 12 janvier 2007 Statut Membre Dernière intervention 18 mars 2010
23 mai 2009 à 16:23
Merci Kazma tu es un dieu !
@karamel Messages postés 1856 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 11 juin 2024 153
22 mai 2009 à 18:37
ici tu fait la modif

document.getElementById('divimageb').src=compteur+".jpg";

ca donne

document.getElementById('divimageb').src="image/"+compteur+".jpg";
cagoulechonchon Messages postés 35 Date d'inscription vendredi 12 janvier 2007 Statut Membre Dernière intervention 18 mars 2010
22 mai 2009 à 16:51
Merci Kasma pour ce script il est top et fait exactement ce que je veux !

Une question toutefois : lorsque je place mes images dans un dossier ("image") le diaporama bug apres la 2eme image. (j'ai juste changé la source ici :

Peut etre faut il faire une autre modification ailleurs mais je ne trouve pas où ..
Pouvez-vous me donner un conseil ?
kawapoulpe Messages postés 13 Date d'inscription mercredi 13 février 2008 Statut Membre Dernière intervention 8 septembre 2009
4 mars 2009 à 12:05
Bonjour,

Super, merci !!
Ça fait exactement ce que je veux, maintenant !

Merci beaucoup !
Cordialement.
Kawapoulpe.
@karamel Messages postés 1856 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 11 juin 2024 153
4 mars 2009 à 10:38
toutes les lignes ou j'ai mis un des @ sont celles que tu peut modifie afin de jouer sur le fondu tu peut toujour essayer cette exemple que j'ai modifie afin que le fondu soit plus long (oubli pas de retirer les @)

function defilmage(reg){
oxo=reg;

if(compteur==nombredimage){
compteur=0
}

if(oxo==1){
compteur++
opaa=00; @@@@@@@@@@@@@@@
document.getElementById('divimageb').src=compteur+".jpg";
oxo=0;
}
imacibleb=document.getElementById('divimagea');
imaciblea=document.getElementById('divimageb');

opaa+=5; @@@@@@@@@@@@@@@@@@@@@@@@@@@
opab-=5; @@@@@@@@@@@@@@@@@@@@@@@@@@@
if(document.all && !window.opera){
imaciblea.style.filter = 'alpha(opacity=' + opaa + ');' ;
imacibleb.style.filter = 'alpha(opacity=' + opab + ');';
}
else{
imaciblea.style.opacity = opaa/100;
imacibleb.style.opacity = opab/100;
}
if(opaa>=100){
opaa=00; @@@@@@@@@@@@@@@@@@@@@@
opab=100;
imacibleb.src=imaciblea.src
marche=setTimeout("defilmage(1)",vitesse);
return false
}
setTimeout("defilmage()",100); @@@@@@@@@@@@@@@@@@@@@@@@
}
document.onload=setTimeout(defilmage,vitesse);
kawapoulpe Messages postés 13 Date d'inscription mercredi 13 février 2008 Statut Membre Dernière intervention 8 septembre 2009
3 mars 2009 à 22:42
Salut,
Merci pour cette rapidité !
Ok pour le point 1. Plus de truc bizarre, c'est tout propre !
Ok pour le point 3, je vais dupliquer.

Par contre pour le point 2, ce n'est pas ce que je voulais.

Ce que tu as mis en variable, c'est le temps d'affichage de chaque image, mais ça, j'avais vu où il était (mais bon, c'est cool quand même car c'est plus visible et plus facile à paramétrer de l'extérieur :o))

Ce que j'aimerai paramétrer, c'est la vitesse du fondu-enchainé, c'est à dire le temps qu'il met pour passer d'une image à l'autre avec le jeu des opacités.
Autrement dit, je souhaite allonger le temps qu'il met à partir du moment où il commence à faire disparaître une image jusqu'à affichage complet de l'autre.
est-ce possible ?

En tout cas merci pour ce super script !
Cordialement.
Kawapoulpe.
delaney Messages postés 6 Date d'inscription lundi 20 février 2006 Statut Membre Dernière intervention 3 mars 2009
3 mars 2009 à 19:54
Salut Kazma,

Merci encore pour ce code, il est top. Je l'ai utilisé sur un site (celui de ma belle-mère : www.serres-isle-adam.fr) en le modifiant un peu.
Je l'ai couplé à une base de données (via php) qui fournit automatiquement les photos au script. Si tu es d'accord et si quelqu'un en a besoin, je peux essayer de poster le code modifié. Merci et a+
@karamel Messages postés 1856 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 11 juin 2024 153
3 mars 2009 à 19:45
retelecharge le zip j'ai fat les modif
-pour l'affichage au demmarage c'est bon
-pour la vitesse j'ai cree une variable tu n'a qu'a modifier sa valeur

-pour plusieurs diapos il faudrait refaire a chaque fois le script et modifier a chaque fois le nom des variable et autres je n'ai aucune autres alternative pour le moment
kawapoulpe Messages postés 13 Date d'inscription mercredi 13 février 2008 Statut Membre Dernière intervention 8 septembre 2009
3 mars 2009 à 16:03
Bonjour,

Je trouve votre script très intéressant.
Je souhaite le mettre en oeuvre pour afficher un petit bandeau en haut de mon site permettant de faire défiler qques images en boucle et en fondu enchaîné.
Je suis parti sur le modèle fondu auto (je ne souhaite pas que la souris agisse dessus, je veux que çà bouge tout seul dès le chargement de la page).
Pour info : Je suis débutant.
J'ai qques questions :
1 - Pourquoi, au démarrage (à l'affichage de la page), j'ai 2 images qui se fondent très vite, puis ça défile ensuite normalement ?
2 - Est-il possible de changer la vitesse de fondu ? (temps de fondu pour passer d'une image à l'autre, que je trouve trop rapide).

3 - Je souhaite mettre plusieurs photos l'une à coté de l'autre mais qui soient indépendantes. Pour cela, j'ai essayé de dupliquer le div pour en mettre 4 les uns à coté des autres (en changeant leur positionnement) afin d'avoir 4 animations différentes. Mais seule la première change, pas les autres (j'ai changé le nom du div conteneur pour les 4).
Que dois-je faire pour en faire fonctionner plusieurs ? Dois-je aussi dupliquer la fonction et la personnaliser pour chaque animation ? (soit 4 fonctions, ayant chacune un nom différent et associée à chaque animation conteneur + divimage) ou bien ai-je raté un truc ?

Merci d'avance.
Cordialement.
Kawapoulpe.
delaney Messages postés 6 Date d'inscription lundi 20 février 2006 Statut Membre Dernière intervention 3 mars 2009
20 janv. 2009 à 12:12
Super !
merci Kazma t'es un chef !!!
@karamel Messages postés 1856 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 11 juin 2024 153
20 janv. 2009 à 11:56
retelecharge le zip j'y ai rajouter deux source une avec bouton marche arret l'autre avec marche arret au passage de la sourie
delaney Messages postés 6 Date d'inscription lundi 20 février 2006 Statut Membre Dernière intervention 3 mars 2009
20 janv. 2009 à 09:41
désolé, j'avais oublié de donner une note à ce code :)
voilà qui est fait
delaney Messages postés 6 Date d'inscription lundi 20 février 2006 Statut Membre Dernière intervention 3 mars 2009
19 janv. 2009 à 18:20
Bonjour Kazma et merci pour cet excellent code !
Je m'arrache les cheveux en essayant d'y ajouter un bouton pause (ou de provoquer l'interruption du script en survolant l'image avec la souris).
Aurais-tu une idée ?
cs_grandcharles Messages postés 4 Date d'inscription mardi 9 décembre 2008 Statut Membre Dernière intervention 9 mars 2009
26 déc. 2008 à 01:59
Bonjour, et merci pour ce code, qui me plait plus spécialement que d'autres que j'ai pu essayer. Mais étant encore un novice en la matière, pourrait-on avoir une réponse à la question posée un peu plus haut, à savoir, comment centrer LE fondu sur la page web, parce que j'ai beau essayer, je ne trouve pas.

Merci d'avance.

Charles
bad_dark_spirit Messages postés 13 Date d'inscription dimanche 10 décembre 2006 Statut Membre Dernière intervention 28 juin 2010 10
24 nov. 2008 à 15:47
Ca marche très bien, c'est dommage pour le positionnement de l'image en absolute, c'est toujours un peu lourd pour les compatibilité. En ce qui concerne le reste, c'est super, surtout en ce qui concerne la compatibilité avec les navigateurs :)
pmthelord Messages postés 38 Date d'inscription samedi 4 novembre 2000 Statut Membre Dernière intervention 13 novembre 2008
13 nov. 2008 à 18:58
Hello et merci pour ton code !

Moi j'ai une autre question.

Comment faire pour centrer l'image qui s'affiche au centre de la page horizontalement ?

Merci à toi
pmthelord Messages postés 38 Date d'inscription samedi 4 novembre 2000 Statut Membre Dernière intervention 13 novembre 2008
13 nov. 2008 à 10:57
Hello et merci pour ton code !

Moi j'ai une autre question.

Comment faire pour centrer l'image qui s'affiche au centre de la page horizontalement ?

Merci à toi
@karamel Messages postés 1856 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 11 juin 2024 153
10 oct. 2008 à 18:10
pas de soucis si tu veut mettre le tout sur le site

pour modifie un texte rajoute une ligne vers la fin du script

opab=100;
document.getElementById('divimagea').src=document.getElementById('divimageb').src
document.getElementById(MONTEXTE).nodevalue=le texte
return false;
}
setTimeout("defilmage()",25);
}
</script>

rajoute un parametre a la fonction parametre qui sera le texte selon l'image parametre que tu configure a l'appel de la fonction

function defilmage(MONTEXTE,selimage){

parametre que tu configure a l'appel de la fonction

onmouseover="oxo=1;defilmage('le texte a afficher','3')"/>
sopatleb Messages postés 4 Date d'inscription dimanche 25 mars 2007 Statut Membre Dernière intervention 17 octobre 2008
10 oct. 2008 à 13:27
bonjour kazma j'ai modifié ton code pour en faire un trombinoscope a mettre sur un site. je joind le code mais faudra mettre les photos.
je vais mettre le tous sur le site. par contre j'aimerai lorsque je clique sur le nom afficher un commentaire a un autre endroit de la page.

Sopatleb



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<script>
var oxo=1;
var opaa=0;
var opab=100;
function defilmage(selimage){
if(oxo==1){
opaa=30;
document.getElementById('divimageb').src=selimage+".jpg";
oxo=0;
}
imacibleb=document.getElementById('divimagea');
imaciblea=document.getElementById('divimageb');
if(imacibleb.src==imaciblea.src){
return false;
}
opaa+=5;
opab-=10;
if(document.all && !window.opera){
imaciblea.style.filter = 'alpha(opacity=' + opaa + ');' ;
imacibleb.style.filter = 'alpha(opacity=' + opab + ');';
}
else{
imaciblea.style.opacity = opaa/100;
imacibleb.style.opacity = opab/100;
}
if(opaa>=100){
opaa=30;
opab=100;
document.getElementById('divimagea').src=document.getElementById('divimageb').src
return false;
}
setTimeout("defilmage()",25);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
background-color: #000099;
}
-->
</style></head>































</html>
@karamel Messages postés 1856 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 11 juin 2024 153
27 sept. 2008 à 19:27
reinitialise la variable a la troisieme ligne du script (opaa=30) selon mes testes en reinitialisant juste opaa cela suffit

function defilmage(selimage){
if(oxo==1){
opaa=30;
document.getElementById('divimageb').src=selimage+".jpg";
oxo=0

++
cs_petifa Messages postés 215 Date d'inscription dimanche 20 février 2005 Statut Membre Dernière intervention 10 mars 2014
27 sept. 2008 à 18:11
oui je suis d'accord mais pour le fondu n'a pas le même rendu si tu bouge assez rapidement sur les diverses "images". Par exemple si tu es sur une image et que pendant le fondu tu bouge sur une autre les variables ne sont pas réinitialisées.
Si tu met en paramètre de fonction tu peux refaire un fondu "complet" à chaque fois, mais bon c classe
merci kazma pour cette source
@karamel Messages postés 1856 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 11 juin 2024 153
27 sept. 2008 à 13:21
opaa c'est un reglage que j'ai fait pour que l'opacité ne demamre pas a partir de zero question de visuel rien n'empeche de modifie voir supprime cette valeur pour oxo etant donne que c'est un variable que je modifie c'est a voir
cs_petifa Messages postés 215 Date d'inscription dimanche 20 février 2005 Statut Membre Dernière intervention 10 mars 2014
27 sept. 2008 à 11:44
slt, tu as raison ça marche, c'est simple. Mais j'ai une petite question, pourquoi ne pas mettre oxo en paramètre de la fonction defilmage?
et aussi à la fin lorsque l'image doit être affichée tu mets
# if(opaa>=100){
# opaa=30;
alors qu'à l'initialisation opaa est à 0. Il y a une raison?
bon code
cs_jjdagadir Messages postés 127 Date d'inscription lundi 7 avril 2003 Statut Membre Dernière intervention 6 mars 2009
26 sept. 2008 à 12:26
çà marche bien et çà peut facilement se caser et être utile.
Il peut être sympa de spécifier pour certains que les vignettes sont redimensionnables et que les EM sont une mesure au même titre que les pixels.
Donc quelques commentaires...mais bravo, le code est léger et çà marche.

KENAVO
Rejoignez-nous