Index du Forum

[SøW]`Clan
 
    Index du ForumFAQRechercherS’enregistrerConnexion

:: Wanted [Codeur] ::

 
Poster un nouveau sujet   Répondre au sujet     Index du Forum ->
`[ Espace inter-team ]~
->
Sujet précédent :: Sujet suivant  
Auteur Message
[S♂W]_H1N1
`Co-Leader [SoW]

Hors ligne

Inscrit le: 30 Jan 2013
Messages: 84
Localisation: 86
Gémeaux (21mai-20juin)

MessagePosté le: Ven 22 Fév - 14:32 (2013)    Sujet du message: Wanted [Codeur] Répondre en citant

j'ai un petit soucis avec ce code (qui fonctionne en local et non en ligne  Question )

je l'ai placé dans un .tpl mais il ne tourne pas. Si quelqu'un à la soluce...

voila le code:


 
Code:

<script language="javascript" type="text/javascript">
// mettre un minimum de 4 images !!!

var coef = 0.05 ; // avancement de l'opacité
var temps = 50 ; // temps entre chaque changement d'opacité
var temps_pause = 10000 ; // temps d'attente entre 2 changements d'images
var nombre_image = 5 ; // nombre d'images a faire bouger
var prefix_image = 'http://sow-clan.voila.net/gfx/'; // 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.status = "opa1 : " + img1.style.MozOpacity + "  opa2 : " + img2.style.MozOpacity + "   indice : "+indice;
    window.setTimeout("change_opacity()",temps) ; // recursion toutes les 30 millisec
}    
//document.write('<BODY onload="init();\" style="background-color: black\">    ');
//document.write('<img id="defilement1\" src="http://sow-clan.voila.net/gfx/1.jpg\" style="-moz-opacity:0;filter:alpha(opacity=0);margin-bottom:10px;\">');

//document.write('<img id="defilement2\" src="http://sow-clan.voila.net/gfx/2.jpg\" style="-moz-opacity: 1; filter: alpha(opacity=100); position: absolute; left:+101\">');

</script>


<!-- On déclare le code source -->
<SCRIPT LANGUAGE="JavaScript" src="fondu.js"></SCRIPT>    


<!-- On charge le script et les images -->
<BODY onload="init();" style="background-color: black">

  

<br><br>
<table width="100%" cellspacing="1" border="0" class="forumline">
  <tr> 
    <th class="thTop" nowrap="nowrap">&nbsp;{WTITLE}&nbsp;</th>
  </tr>
  <tr>
    
    <!-- Premiere image id=defilement1 -->
<img id="defilement1" src="http://sow-clan.voila.net/gfx/1.jpg" style="-moz-opacity:0;filter:alpha(opacity=0);margin-bottom:10px;">

<!-- Deuxieme image id=defilement2    /!\ positionnée RELATIVEMENT par rapport à la 1ère /!\       -->
<img id="defilement2" src="http://sow-clan.voila.net/gfx/2.jpg" style="-moz-opacity: 1; filter: alpha(opacity=100); position: absolute; left:+10">
        
    </tr>    
        
        
        
</table>




_________________


Revenir en haut
Visiter le site web du posteur MSN
Publicité






MessagePosté le: Ven 22 Fév - 14:32 (2013)    Sujet du message: Publicité

PublicitéSupprimer les publicités ?
Revenir en haut
[SøW]Troll
`Family [SoW]

Hors ligne

Inscrit le: 16 Fév 2013
Messages: 29
Sagittaire (22nov-21déc) 龍 Dragon

MessagePosté le: Ven 22 Fév - 19:54 (2013)    Sujet du message: Wanted [Codeur] Répondre en citant

T'as pas un déboguer pour savoir ce qui plante (~BugZilla) ?

Sinon, j'ai pas remarqué grand chose (faut dire j'ai jamais beaucoup fait de javascript) à part qu'il semble n'y avoir que deux images et pourtant ton processus est taillé pour 5 ???
(voir ""var nombre_image = 5 ; // nombre d'images a faire bouger"")

Tu gagnerais à rédiger l’algorithme clairement en commentaire, surtout ton alternance de "sens" qui à mon humble avis est une source potentielle d'erreur.


NB: Un petit conseil que j'entend beaucoup de mes collègues qui bossent sur IHM, sépare le code, la page et surtout le css.


Revenir en haut
[S♂W]_H1N1
`Co-Leader [SoW]

Hors ligne

Inscrit le: 30 Jan 2013
Messages: 84
Localisation: 86
Gémeaux (21mai-20juin)

MessagePosté le: Ven 22 Fév - 21:40 (2013)    Sujet du message: Wanted [Codeur] Répondre en citant

Le code est séparé à la base mais tout doit être mis dans un seul et même fichier (template)
En fait, je précharge 2 images qui serviront de base aux autres (une affichée et l'autre non) puis le code effectue les changement d'indice en incrémentant la valeur 'i'.

Le soucis c'est que ce code tourne nickel en local sur mon pc mais également sur celui le Lynx. Donc je ne comprends pas Question

Et non , pas de débug. J'ai apprit à bosser sans 

_________________


Revenir en haut
Visiter le site web du posteur MSN
[SøW]Euphel
`Family [SoW]

Hors ligne

Inscrit le: 10 Fév 2013
Messages: 17

MessagePosté le: Ven 22 Fév - 22:26 (2013)    Sujet du message: Wanted [Codeur] Répondre en citant

Bon c'est pas que je suis nul en prog mais je nul quand même :p


Sinon tu utilise des librairies que tu possède en local , mais sont t'elle présente sur le serveur ?


Et ensuite je connait pas la commande MozOpacity , parcontre j'ai connait celle là : Moz-Opacity .


Problème de version au niveau du language ?




Et ensuite :
Citation:

//document.write('<BODY onload="init();\" style="background-color: black\">    ');
//document.write('
');

//document.write('
');

Pourquoi c'est en commantaire sa ?


Revenir en haut
[S♂W]_H1N1
`Co-Leader [SoW]

Hors ligne

Inscrit le: 30 Jan 2013
Messages: 84
Localisation: 86
Gémeaux (21mai-20juin)

MessagePosté le: Sam 23 Fév - 10:17 (2013)    Sujet du message: Wanted [Codeur] Répondre en citant

C'est en commentaire car j'ai teste le html dans javascript. Mais en local, ça tourne pas en boucle. Une seule incrementation.
Pour les librairies, je pense quelles sont pareil sur tous serveurs. Si le js est supporté, aucune raison que ça ne marche pas. Enfin je vais revoir tout ça tête reposée

_________________


Revenir en haut
Visiter le site web du posteur MSN
[S♂W]_H1N1
`Co-Leader [SoW]

Hors ligne

Inscrit le: 30 Jan 2013
Messages: 84
Localisation: 86
Gémeaux (21mai-20juin)

MessagePosté le: Sam 23 Fév - 22:34 (2013)    Sujet du message: Wanted [Codeur] Répondre en citant

Bon j'ai trouvé. mais sur une toute autre méthode.

En restant sur les balise jquery (...)
pour les puristes, le code:


 

Code:
 <html>
<head>
<body>
<script langage="javascript">
    if (monDiaporama == null)
    {
        var monDiaporama = new Array();
    }

    function Diaporama(id_diaporama, frequenceH, vitesseH,    delai, largeurMax, hauteurMax, typeTransition)
    {
        this.id_diaporama = id_diaporama;

        this.diapo = new Array();

        this.calque1 = "";
        this.calque2 = "";

        this.frequenceH = frequenceH;
        this.vitesseH = vitesseH;
        this.delai = delai; // délai entre chaque rotations

        this.largeurMax = largeurMax;
        this.hauteurMax = hauteurMax;

        this.indexDiapo = 2;
        this.masquePanneauCommande = false;
        this.epaisseurCadre = 0;
        this.couleurCadre = "#000000";

        if (!typeTransition) // slide ou flou
        {
            this.typeTransition = "slide";
        }
        else
        {
            this.typeTransition = "flou";
        }

        this.stats = new Image();
        this.stats.src = "http://so.fun.free.fr/modules/stats/image_bidon.php?script=diaporama&version=6.04.03";

    }

    function ajoutePhoto(url_photo)
    {
        nb_diapo = this.diapo.length;
        this.diapo[nb_diapo] = new Image();
        this.diapo[nb_diapo].src = url_photo;
    }

    function progressionChangeDiapoH()
    {
        if (this.calque1.offsetWidth > 0)
        {
            if ( (this.calque1.offsetWidth - this.vitesseH) < 0)
            {
                this.calque1.style.width = "0px";
            }
            else
            {
                this.calque1.style.width = (this.calque1.offsetWidth - this.vitesseH) + "px";
            }
            setTimeout("monDiaporama[" + this.id_diaporama + "].progressionChangeDiapoH()", this.frequenceH);
        }
        else
        {    // inversion des calques
            this.calque1.style.zIndex = 1; // le calque écrasé passe au dessous
            this.calque2.style.zIndex = 2; // le calque visible passe au dessus
            this.calque1.style.width = this.largeurMax + "px"; // le calque du dessous reprends sa taille initiale

            // Mise en place d'une nouvelle image dans le calque qui se trouve en arrière
            this.calque1.style.backgroundImage = "url('" + this.diapo[this.indexDiapo].src + "')";
            this.indexDiapo++;
            if (this.indexDiapo >= this.diapo.length) this.indexDiapo = 0;

            //inversion des références des calques car seul calque1 rétrécit
            calqueTemp = this.calque2;
            this.calque2 = this.calque1;
            this.calque1 = calqueTemp;

            if ( !(document.getElementById('cb_defilement_' + this.id_diaporama)) || document.getElementById('cb_defilement_' + this.id_diaporama).checked )
            {
                setTimeout("monDiaporama[" + this.id_diaporama + "].progressionChangeDiapoH()", this.delai);
            }
            else
            {
                setTimeout("monDiaporama[" + this.id_diaporama + "].pause()", this.delai);
            }
        }
    }

    function progressionChangeDiapoFlou()
    {
        this.vitesse = this.vitesseH;
        this.frequence = this.frequenceH;

        if (this.calque1.style.opacity > 0)
        {// disparition de l'image du dessus
            // pour Firefox (le paramètre existe sous IE mais n'a pas d'influence)
            // ce paramètre sert de base commune pour les deux navigateurs pour tester l'état du calque
            opacite = parseFloat(this.calque1.style.opacity) - parseFloat(this.vitesse / 100);
            if (opacite < 0)
            {
                opacite=0;
            }
            this.calque1.style.opacity = opacite

            // pour IE
            if (this.calque1.style.filter)
            {
                texte = this.calque1.style.filter;
                opacite = texte.replace(/alpha\(opacity=([0-9]*)\)/, '$1');
                opacite = parseFloat(opacite) - this.vitesse;
                if (opacite < 0)
                {
                    opacite=0;
                }
                //nouveau_texte = texte.replace(/alpha\(opacity=([0-9]*)\)/, 'alpha(opacity=' + opacite + ')');
                nouveau_texte = 'alpha(opacity=' + opacite + ')';
                this.calque1.style.filter = nouveau_texte;
            }

            setTimeout("monDiaporama[" + this.id_diaporama + "].progressionChangeDiapoFlou()", this.frequence);
        }
        else
        {    // inversion des calques
            this.calque1.style.zIndex = 1; // le calque écrasé passe au dessous
            this.calque2.style.zIndex = 2; // le calque visible passe au dessus
            this.calque1.style.opacity = 1; // le calque du dessous reprends sa taille initiale
            if (this.calque1.style.filter)
            {
                this.calque1.style.filter = 'alpha(opacity=100)';
            }

            // Mise en place d'une nouvelle image dans le calque qui se trouve en arrière
            this.calque1.style.backgroundImage = "url('" + this.diapo[this.indexDiapo].src + "')";
            this.indexDiapo++;
            if (this.indexDiapo >= this.diapo.length) this.indexDiapo = 0;

            //inversion des références des calques car seul calque1 rétrécit
            calqueTemp = this.calque2;
            this.calque2 = this.calque1;
            this.calque1 = calqueTemp;

            if ( !(document.getElementById('cb_defilement_' + this.id_diaporama)) || document.getElementById('cb_defilement_' + this.id_diaporama).checked )
            {
                setTimeout("monDiaporama[" + this.id_diaporama + "].progressionChangeDiapoFlou()", this.delai);
            }
            else
            {
                setTimeout("monDiaporama[" + this.id_diaporama + "].pause()", this.delai);
            }
        }
    }

    function pause()
    {
        if ( !(document.getElementById('cb_defilement_' + this.id_diaporama)) || document.getElementById('cb_defilement_' + this.id_diaporama).checked )
        {
            if (this.typeTransition == "slide")
            {
                setTimeout("monDiaporama[" + this.id_diaporama + "].progressionChangeDiapoH()", this.delai);
            }
            else if (this.typeTransition == "flou")
            {
                setTimeout("monDiaporama[" + this.id_diaporama + "].progressionChangeDiapoFlou()", this.delai);
            }
        }
        else
        {
            setTimeout("monDiaporama[" + this.id_diaporama + "].pause()", 1000);
        }
    }

    function placeDiaporama()
    {
        document.write('<table align="center" border="' + this.epaisseurCadre + '" bordercolor="' + this.couleurCadre + '" cellpadding="0" cellspacing="0" style="border-style:solid; border-width:' + this.epaisseurCadre + '"><tr><td valign="top">'); // début du tableau pour le cadre
        document.write('<table align="center" border="0" cellpadding="0" cellspacing="0">');
        document.write('<tr height="' + this.hauteurMax + '">');
        document.write('<td width="' + this.largeurMax + '" valign="top" align="left" style="width:' + this.largeurMax + '">');
        document.write('<img src="' + this.diapo[0].src + '" width="' + this.largeurMax + '" height="0" border="0" style="visibility:hidden; border:0; width:' + this.largeurMax + '; height:0"><div></div>'); // je réutilise une des images à la place d'un pixel transparent
        document.write('<div id="div_diapo2_' + this.id_diaporama + '" style="position:absolute; display:block; width:' + this.largeurMax + '; height:' + this.hauteurMax + '; overflow:hidden; background-image:url(\'' + this.diapo[1].src + '\'); opacity:1; filter: alpha(opacity=100)"><table align="left" border="0" cellpadding="0" cellspacing="0"><tr height="' + this.hauteurMax + '"><td width="' + this.largeurMax + '"></td></tr></table></div>');
        document.write('<div id="div_diapo1_' + this.id_diaporama + '" style="position:absolute; display:block; width:' + this.largeurMax + '; height:' + this.hauteurMax + '; overflow:hidden; background-image:url(\'' + this.diapo[0].src + '\'); opacity:1; filter: alpha(opacity=100)"><table align="left" border="0" cellpadding="0" cellspacing="0"><tr height="' + this.hauteurMax + '"><td width="' + this.largeurMax + '"></td></tr></table></div>');
        document.write('</td></tr><tr><td width="' + this.largeurMax + '"><center><i><div id="div_chargement_' + this.id_diaporama + '" height="20" class="diaporama_cmd">Chargement...</div></i></center></td></tr></table>');
        document.write('</td></tr></table>'); // fin du tableau pour le cadre

        this.calque1 = document.getElementById('div_diapo1_' + this.id_diaporama);
        this.calque2 = document.getElementById('div_diapo2_' + this.id_diaporama);

        this.calque1.style.height = this.hauteurMax;
        this.calque2.style.height = this.hauteurMax;
        this.calque1.style.width = this.largeurMax;
        this.calque2.style.width = this.largeurMax;
        this.calque1.style.zIndex = 2; // dessus
        this.calque2.style.zIndex = 1; // dessous
    }

    function testImagesOk()
    {
        this.nbImagesOk = 0;
        // boucle pour compter le nombre d'images chargées
        nbImagesOk = 0;
        for (i=0; i<this innerHTML="Images chargées : ">= this.diapo.length)
        {
            if (this.masquePanneauCommande)
            {
                panneauCommande = '';
            }
            else
            {
                panneauCommande = '<input id="cb_defilement_' + this.id_diaporama + '" type="checkbox">automatique';
            }
            document.getElementById('div_chargement_' + this.id_diaporama).innerHTML = panneauCommande;
            if (this.typeTransition == "slide")
            {
                setTimeout("monDiaporama[" + this.id_diaporama + "].progressionChangeDiapoH()", this.delai);
            }
            else if (this.typeTransition == "flou")
            {
                setTimeout("monDiaporama[" + this.id_diaporama + "].progressionChangeDiapoFlou()", this.delai);
            }
        }
        else
        {
            setTimeout("monDiaporama[" + this.id_diaporama + "].testImagesOk()", 1000);
        }
    }

    function masquerPanneauCommande()
    {
        this.masquePanneauCommande = true;
    }

    function ajouteCadre(epaisseur, couleur)
    {
        this.epaisseurCadre = epaisseur;
        this.couleurCadre = couleur;
    }

    // liaison des fonctions à l'objet
    Diaporama.prototype.ajoutePhoto = ajoutePhoto;
    Diaporama.prototype.progressionChangeDiapoH = progressionChangeDiapoH;
    Diaporama.prototype.progressionChangeDiapoFlou = progressionChangeDiapoFlou;
    Diaporama.prototype.pause = pause;
    Diaporama.prototype.placeDiaporama = placeDiaporama;
    Diaporama.prototype.testImagesOk = testImagesOk;
    Diaporama.prototype.masquerPanneauCommande = masquerPanneauCommande;
    Diaporama.prototype.ajouteCadre = ajouteCadre;





</script>
<script langage="javascript">
nouveau_id_diaporama = monDiaporama.length;
monDiaporama[nouveau_id_diaporama] = new Diaporama(nouveau_id_diaporama, 10, 1, 5000, 850, 300, "slide");
monDiaporama[nouveau_id_diaporama].ajoutePhoto("http://sow-clan.voila.net/gfx/1.jpg");
monDiaporama[nouveau_id_diaporama].ajoutePhoto("http://sow-clan.voila.net/gfx/2.jpg");
monDiaporama[nouveau_id_diaporama].ajoutePhoto("http://sow-clan.voila.net/gfx/3.jpg");
monDiaporama[nouveau_id_diaporama].ajoutePhoto("http://sow-clan.voila.net/gfx/4.jpg");
monDiaporama[nouveau_id_diaporama].ajoutePhoto("http://sow-clan.voila.net/gfx/5.jpg");

monDiaporama[nouveau_id_diaporama].masquerPanneauCommande();
monDiaporama[nouveau_id_diaporama].placeDiaporama();
monDiaporama[nouveau_id_diaporama].testImagesOk();
</script>

_________________


Revenir en haut
Visiter le site web du posteur MSN
Contenu Sponsorisé






MessagePosté le: Aujourd’hui à 17:20 (2018)    Sujet du message: Wanted [Codeur]

Revenir en haut
Montrer les messages depuis:   
Poster un nouveau sujet   Répondre au sujet     Index du Forum ->
`[ Espace inter-team ]~
->
Toutes les heures sont au format GMT + 1 Heure
Page 1 sur 1

 
Sauter vers:  

Index | créer son forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation
onyx © theme by larme d'ange 2006
Powered by phpBB © 2001, 2005 phpBB Group
Traduction par : phpBB-fr.com