Diapo+Transparence d'images

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Diapo+Transparence d'images

recep

Bonjour,
voilà, j'ai ajouté une zone de diapo sur mon site avec un effet d'opacité du passage d'image vers l'autre..

Voici mon code :

Code :

<img alt="Diapo" title="Diapo" width="328" height="175" id="defilement1" src="images/Diapo/1.jpg" class="transpa0"/>
<img alt="Diapo" title="Diapo" width="328" height="175" id="defilement2" src="images/Diapo/2.jpg" class="transpa100"/>

et le code javascript + css qui gére le tout :

Code :

var coef = 0.05 ; // avancement de l'opacité
var temps = 50 ; // temps entre chaque changement d'opacité
var temps_pause = 2000 ; // temps d'attente entre 2 changements d'images
var nombre_image = 5 ; // nombre d'images a faire bouger
var prefix_image = 'images/Diapo/'; // chemin + prefix du nom des images
var suffix_image = '.jpg' ; // suffix + '.extension' du nom des images
// pas touche
var indice = 2; // les 2 premiere image sont deja charger dans le HTML, on commence a la 3eme
var isIE = navigator.userAgent.toLowerCase().indexOf('msie')!=-1 ;
var img1 = null;
var img2 = null;
var sens = 1;
var tabImg; // tab contenant les images
function prechargerImg(){
tabImg = new Array(nombre_image);
for (i=0; i<=nombre_image -1; i++){
tabImg[i]=new Image();
tabImg[i].src = prefix_image+(i+1)+suffix_image;
}
}
function init()
{
img1 = document.getElementById("defilement1" ) ;
img2 = document.getElementById("defilement2" ) ;
prechargerImg();
change_opacity();
}
function change_opacity()
{
var opacity1 = 0 ;
var opacity2 = 0 ;
if (isIE) // for IE
{ opacity1 = parseFloat(img1.filters.alpha.opacity);
opacity2 = parseFloat(img2.filters.alpha.opacity);
}
else // for mozilla
{ opacity1 = parseFloat(img1.style.MozOpacity);
opacity2 = parseFloat(img2.style.MozOpacity);
}
if (sens)
{ if (isIE) // for IE
{ img1.filters.alpha.opacity = opacity1 + coef * 100;
img2.filters.alpha.opacity = opacity2 - coef * 100;
}
else // for Mozilla
{ img1.style.MozOpacity = opacity1 + coef;
img2.style.MozOpacity = opacity2 - coef;
}
}
else
{
if (isIE) // for IE
{ img1.filters.alpha.opacity = opacity1 - coef * 100;
img2.filters.alpha.opacity = opacity2 + coef * 100;
}
else // for Mozilla
{ img1.style.MozOpacity = opacity1 - coef;
img2.style.MozOpacity = opacity2 + coef;
}
}
if (isIE) // for IE
{ opacity1 = parseFloat(img1.filters.alpha.opacity);
opacity2 = parseFloat(img2.filters.alpha.opacity);
}
else // for mozilla
{ opacity1 = parseFloat(img1.style.MozOpacity);
opacity2 = parseFloat(img2.style.MozOpacity);
}
// on fait varié le sens d'opacité du bazar
if (opacity2 <= 0)
{ img2.src=tabImg[indice++].src;
sens = 0;
if (indice == (tabImg.length)) indice=0;
window.setTimeout("change_opacity()",temps_pause) ; // attente
return 0;
}
else if (opacity1 <= 0)
{ img1.src=tabImg[indice++].src;
sens = 1;
if (indice == (tabImg.length)) indice=0;
window.setTimeout("change_opacity()",temps_pause) ; // attente
return 0;
}
window.setTimeout("change_opacity()",temps) ; // recursion toutes les x millisec
}

Css :

Code :

.transpa0 {filter:Alpha(opacity=0, finishopacity=0, style=2);-moz-opacity:0; -khtml-opacity:0; opacity:0; margin:25px;}
.transpa100 {filter:Alpha(opacity=100, finishopacity=0, style=2);-moz-opacity:1; -khtml-opacity:1; opacity:1; position:absolute; margin:25px;}

Sous ie8 avec affichage de compatibilité activé cela fonctionne trés bien, mais pas avec les autres navigateurs.
Je cherche depuis un moment, mais sans succès. est-ce que cela a quelque chose a avoir avec getElementById ? (ligne 26-27)

Publicité

SICKofitALL

misanthrope

Je ne pas certain que img1.style.MozOpacity soit dispo encore. T'as essayé avec img1.style.opacity plutot (qui est standard) ?

Message cité 1 fois

---------------
We deserve everything that's coming...

recep

SICKofitALL a écrit :

Je ne pas certain que img1.style.MozOpacity soit dispo encore. T'as essayé avec img1.style.opacity plutot (qui est standard) ?

cela ne change rien... on verra cela demain... bonne nuit

SICKofitALL

misanthrope

tu as une erreur ou qqch dans la console ?
Sinon ton parseFloat renvoit NaN pour la propriété en question, essayes en initialisant l'opacity pour les images avant de les manipuler.

---------------
We deserve everything that's coming...

recep

non je n'ai pas de message d'erreur. j'ai juste la première image et rien d'autre, pas de diapo d'images avec effet de transparence de passage de l'une vers l'autre...

SICKofitALL

misanthrope

tu as regardé du coté du parseFloat ?
En reprennant ton code et en lui assignant la valeur de 1 ou 0 (ou 100 ou 0) selon l'images si le parseFloat revoit NaN (par défaut, image.style.opacity est vide, il faut utiliser soit un style "inline" (attribut 'style') soit récupérer le "Computed Style" de l'element.
Au passage, ton code est executé comment ? Via le onload ?
Et tu debug avec quoi ?

Message cité 1 fois
Message édité par SICKofitALL le 02-06-2010 à 14:07:35

---------------
We deserve everything that's coming...

recep

SICKofitALL a écrit :

Non pas regardé à parseFloat... et je n'ai pas bien saisi quand tu dis initialiser l'opacity pour les images???

- le code est executé via <body onload="init();">

- qu'est-ce que tu veux dire par debug ?

(au passage, juste pour te dire que je suis un débutant pour la création de site :sweat: )

Message cité 1 fois

SICKofitALL

misanthrope

recep a écrit :

J'ai repris ton code et modifié un peu pour que ca fonctionne sous autre chose que IE.
Ce code n'est pas à 100% fonctionnel (et potentiellement buggé sur autre chose que FF ) mais je pense que ca devrait te donner une idée de la méthodologie (note au passage que les images et leurs chemins associés ne sont forcément plus les mêmes que chez toi, cf les balises IMG en bas du code et le tableau _maliste) :

Code :

<html>
<head>
<style>
.transpa0 {
opacity:0;
filter: Alpha (opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
position: relative;
left: -256px;
}
.transpa100 {
opacity: 1;
filter: Alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
}
</style>
<script>
var temps = 50,
temps_pause = 2000,
nombre_image = 4,
prefix_image = '',
suffix_image = '.jpg',
indice = 2,
isIE = navigator.userAgent.toLowerCase ().indexOf ('msie') != -1,
coef = (isIE ? 5 : 0.05),
img1 = null,
img2 = null,
sens = 1,
opacityInit = (isIE ? 100 : 1),
tabImg = [],
_maliste = ['hoff.jpg', 'ga.jpg', 'boisBlanc.png', 'marbre.png']; // array perso pour que je puisse tester chez moi
// -----------------------------------------------------------------------------------------
function prechargerImg ()
{
for (var i = 0, img; i < nombre_image; i++)
{
img = new Image ();
img.src = _maliste[i];
img.className = "transpa0";
tabImg.push (img);
}
img1 = document.getElementById ("defilement1" );
img2 = document.getElementById ("defilement2" );
indice = 1;
};
// -----------------------------------------------------------------------------------------
function init()
{
prechargerImg ();
change_opacity ();
};
// -----------------------------------------------------------------------------------------
function change_opacity ()
{
var sImg1 = (isIE ? img1.filters.alpha : img1.style),
sImg2 = (isIE ? img2.filters.alpha : img2.style),
opacity1 = (isNaN (parseFloat (sImg1.opacity)) ? opacityInit : parseFloat (sImg1.opacity)),
opacity2 = (isNaN (parseFloat (sImg2.opacity)) ? 0 : parseFloat (sImg2.opacity)),
c = coef * sens,
o1 = opacity1 - c,
o2 = opacity2 + c;
sImg1.opacity = o1;
sImg2.opacity = o2;
if (o2 >= opacityInit || o2 <= 0)
{
indice++;
indice %= nombre_image;
if (sens > 0)
{
img1.src = tabImg[indice].src;
}
else
{
img2.src = tabImg[indice].src;
}
sens = -sens;
setTimeout (change_opacity, temps_pause);
return;
}
setTimeout (change_opacity, temps);
};
window.onload = function ()
{
setTimeout (init, temps_pause);
};
</script>
</head>
<body>
<img alt="Diapo" title="Diapo" width="256" height="256" id="defilement1" src="hoff.jpg" class="transpa100" />
<img alt="Diapo" title="Diapo" width="256" height="256" id="defilement2" src="ga.jpg" class="transpa0" />
</body>
</html>

Pour la partie debug, cherche l'extension Firebug pour Firefox. Pour les développer web (surtout en ce qui concerne le javascript) c'est assez pratique, voir indispensable

[:_edit]
j'ai mis à jour (ce code ainsi que la version online : http://www.site-escape.com/taf/hfr/hfr5.html ), ca fonctionne sous IE aussi à présent

Message cité 1 fois
Message édité par SICKofitALL le 02-06-2010 à 15:42:22

---------------
We deserve everything that's coming...

SICKofitALL

misanthrope

J'ai uploadé la chose avec mes images à moi : http://www.site-escape.com/taf/hfr/hfr5.html

Au passage le préchargement des images ne vaut pas grand chose en l'état, car il n'attend pas avant de lancer le script qu'elles soient vraiment chargées (ou déclarées comme tel). En fait pour l'instant ca se content de les mettre au fur et à mesure en cache, donc potentiellement il faut faire qq F5 (rafraichir) avant que le script soit "visible".

---------------
We deserve everything that's coming...

recep

ok, je vais jetter un coup d'oeil à tout cela, un grand merci !

Publicité

jsyak

SICKofitALL a écrit :

tres bon code !!! ca marche.

si je veux maintenant afficher sur chacune des 4 photos, pendant le "temps_pause" une autre photo (plus petite) superposer sur la photo de fond. cette petite photo dois apparaitre et disparaitre en fondu. chacune des 4 photo initiale a sa petite photo specifique.
j'ai esaye plusieur chose sur le code mais cela ne donne pas le resultat voulu.

merci pout ton aide

FORUM HardWare.fr

Programmation

HTML/CSS

Diapo+Transparence d'images

Sujets relatifs
Stocker images et .zip dans une BD via PHP	Selection d'images dans document word
Recherche Javascript défilement images	Images en fonction d'un numéro
images de fond trois colonnes de même hauteur	Module de news en diapo d'images
[RESOLU] [JS] Echanger deux images	Script java zoom d'images
Squelettisation sur des images 2D
Plus de sujets relatifs à : Diapo+Transparence d'images

Page générée en 0.078 secondes