Effet fade in

robbox89 Messages postés 2 Date d'inscription mercredi 2 juin 2010 Statut Membre Dernière intervention 15 avril 2012 - 14 avril 2012 à 10:36
robbox89 Messages postés 2 Date d'inscription mercredi 2 juin 2010 Statut Membre Dernière intervention 15 avril 2012 - 15 avril 2012 à 10:32
Bonjour à tous

Débutant en Java j'aurai besoin d'aide pour un effet d'affichage
Sur ma page web j'ai deux sections
La partie de gauche est réservée à une série d'options sous forme de boutons radio
( 4 couleurs , 2 sens , 2 formes)
La partie de droite elle affiche l'image suivant les options cochées
Tout le script concernant l'affichage fonctionne.
Mon soucis est que le saut d'une image à l'autre est instantané et je voudrais
ajouté un effet de transition entre les images
Sur le net j'ai trouvé ces fonctions

function opacity(elt,o)
{
    elt.style.opacity=o;
    elt.style.mozOpacity=o;
    elt.style.webkitOpacity=o;
    elt.style.filter='alpha(opacity='+(o*100)+')';
}
function fadeIn(elt,time)
{
    for(var i=0; i<8; i++)
        setTimeout((function (i)
        {
             return function () { opacity(elt,i); };
        })((i+1)/8),i*50+time);
}

mais je ne sais pas comment faire pour les appliquer à ma fenêtre d'affichage

Voici mes extraits de code
Mon javascript

if(parent.frames[0]) 
{ 
parent.location.href = self.location.href; 
}

var liste = new Array("noir","brun", "blanc", "vert","ouvga","ouvdr","pdroit","chap","dxf","pdf","edraw","jpeg");
var select = new Array(true, false, false,false,true,false,true,false,false,false,false,false);
var form = new Array("col1","col2","col3","col4","sens1","sens2","forme1","forme2","rendu1","rendu2","rendu3","rendu4");
var select3 = new Array(1,0,0,0,1,0,1,0,0,0,0,0);
var dimg = new Array(80,80,80,80,80,80,80,80,120,90,120,90,120,90,120,90,88,24,88,24,88,24,88,24);
var dimp = new Array(60,60,60,60,60,60,60,60,90,68,90,68,90,68,90,68,88,24,88,24,88,24,88,24);
var groupe1 = new Array("noir","brun","blanc","vert");
var groupe2 = new Array("ouvga","ouvdr");
var groupe3 = new Array("pdroit","chap");
var groupe4 = new Array("dxf","pdf","edraw","jpeg");
var groupe = new Array(groupe1,groupe1,groupe1,groupe1,groupe2,groupe2,groupe3,groupe3,groupe4,groupe4,groupe4,groupe4);
var listetype = new Array(1,1,1,1,1,1,1,1,0,0,0,0);
var nimages = liste.length;
var tx =0
var ty =0
var tz =0
// on sélectionne la couleur			
if (groupe[t] == groupe1) // on verifie si on a affaire a une image du groupe1
{
for (tx = 0 ; tx< groupe1.length ; tx++)
{
if (groupe1[tx] == liste[t]) // on verifie le nom pour recuperer le bon index
{

document.getElementById("po").src = "img/po" + tx + ty + tz + ".gif"; // on affiche l'image de la bonne couleur
break;
}
}
}

// on sélectionne le sens
if (groupe[t] == groupe2) // on verifie si on a affaire a une image du groupe2
{
for (ty = 0 ; ty< groupe2.length ; ty++)
{
if (groupe2[ty] == liste[t]) // on verifie le nom pour recuperer le bon index
{
document.getElementById("po").src = "img/po" + tx + ty + tz + ".gif"; // on affiche l'image de la bonne couleur dans le bon sens
break;
}
}
}

// on sélectionne la forme
if (groupe[t] == groupe3) // on verifie si on a affaire a une image du groupe3
{
for (tz = 0 ; tz< groupe3.length ; tz++) 
{
if (groupe3[tz] == liste[t]) // on verifie le nom pour recuperer le bon index
{
document.getElementById("po").src = "img/po" + tx + ty + tz + ".gif"; // on affiche l'image de la bonne couleur dans le bon sens et de la bonne forme	
break;
}
}
}


Mon code php qui affiche mon image
<td display=block align="right" colspan="10">

</td>


Si quelqu'un pouvait me dire comment appeler les fonctions pour avoir l'effet sur l'affichage des images!!!!
Merci à vous.

robbox89

2 réponses

TychoBrahe Messages postés 1309 Date d'inscription samedi 31 janvier 2009 Statut Membre Dernière intervention 5 juin 2013 12
14 avril 2012 à 21:13
Salut,

Débutant en Java

Attention ! Java et JavaScript sont deux langages totalement différents qui n'ont strictement rien à voir.

Sur le net j'ai trouvé ces fonctions

Si j'étais toi j'éviterais d'utiliser ces trucs. Tu ferais mieux de recoder ton bidule en utilisant jQuery, d'autant plus que ce dernier à l'avantage de te proposer nativement une méthode .fadeIn().
0
robbox89 Messages postés 2 Date d'inscription mercredi 2 juin 2010 Statut Membre Dernière intervention 15 avril 2012
15 avril 2012 à 10:32
Bonjour TycoBrahe

Je te remercie de t'être penché sur mon problème.

Sur le net j'ai trouvé ces fonctions

Si j'étais toi j'éviterais d'utiliser ces trucs.

Je pense que le net est un bon outil pédagogique, notamment pour les débutants
autodidactes comme moi qui peuvent y trouver beaucoup de renseignements
à travers les cours et les forums.

Attention ! Java et JavaScript sont deux langages totalement différents qui n'ont strictement rien à voir.

Excuse moi, il est évident que je voulais dire "JavaScript",désolé de ce manque de précision.

Tu ferais mieux de recoder ton bidule en utilisant jQuery

Je suis d'accord avec toi, mais ayant déjà des difficultés avec JavaScript, pour l'instant je préfère
remettre à plus tard l'étude de jQuery!

Cordialement.

robbox89
0
Rejoignez-nous