City Hunter
Utilisateur : anonyme   Samedi 20 Mars 2010 
     
Provenance géographique des visiteurs


SOFUN - Blog, article : Diaporama javascript en fondu enchainé dimanche 05 mars 2006 - 23:09
Diaporama javascript en fondu enchainé
 
Depuis une dixaine de jours, j'ai enfin pris le temps d'ajouter une amélioration à mon diaporama en javascript : la transition progressive en dégradé flou.
Ce soir, comme je désespérait de ne trouver de photo pour illustrer joliement cette nouvelle fonctionnalité, je me suis souvenu qu'il m'est arrivé de prendre des vacances. Voici donc sept photos prises aux Arcs (bien qu'il eu été plus facile de les prendre à l'appareil photo), en 2004.
Si je me souviens bien, la photo la moins enneigée correspond à la vallée de Bourg Saint Maurice (t'as avalé le boursin Maurice ?).


Passons maintenant à la partie technique :
Pour la mise en place, la procédure est exactement la même que pour le diaporama en "slide" (je ne trouve pas de mot français pour le désigner). Il suffit ensuite de modifier la ligne :


monDiaporama[nouveau_id_diaporama] = new Diaporama(nouveau_id_diaporama, 50, 10, 2000, 500, 600);

... en y ajoutant un nouveau paramètre : 


monDiaporama[nouveau_id_diaporama] = new Diaporama(nouveau_id_diaporama, 100, 2, 2000, 500, 600, "flou");

La ligne "new Diaporama" s'utilise alors ainsi :
  • 100 : temps, en millisecondes, entre chaque étape de réduction de la photo au premier plan. Plus le nombre est grand, plus la transition est longue, et inversement.
  • 2 : pourcentage de progression effectué à chaque étape. Varie entre 1 et 100. Plus le nombre est petit, plus la transition est fluide et lente.
  • 2000 : temps de pause, en millisecondes, entre chaque transition.
  • 500 : largeur des photos en pixel. La photo réelle doit avoir exactement la même largeur que celle que vous aurez définit ici car elle ne sera pas redimentionnée automatiquement comme avec une balise IMG.
  • 600 : hauteur des photos en pixel. La photo réelle doit avoir exactement la même hauteur que celle que vous aurez définit ici car elle ne sera pas redimentionnée automatiquement comme avec une balise IMG.
Pour le premier paramètre, je conseille de ne pas le diminuer en dessous de 50 : mon PC, bien qu'il tienne la route, travaille à plus de 50% lors d'une transition à cette cadence, donc il faut penser à vos visiteurs qui peuvent avoir une machine qui commence à souffrir.
De plus, 100 et 2 donnent à peu près le même résultat que 50 et 1.
La durée théorique d'une transition peut être calculée ainsi :
  • paramètre_1 x 100 / paramètre_2 = durée en millisecondes.
  • exemple : 100 x 100 / 2 = 2000 millisecondes, soit 2 secondes.
Voila, je pense que ça devrait suffire comme explication en plus des explications du diaporama en "slide", mais n'hésitez pas à demander des précisions.
Ce script a été testé sur Firefox 1.5 et Internet Explorer 6 dans leur version Windows uniquement.
Je vous invite également à laisser un commentaire avec le lien de vos diaporamas afin de montrer que ça marche ailleurs qu'ici.

11/03/06 : après avoir parcouru quelques sites, j'ai vu qu'on appelle cet effet le "fondu enchaîné". Je ne m'en souvenait plus.
 
publié par Forrest
commentaires ()

SOFUN - Blog, article : Pour une vie sans tabac vendredi 27 janvier 2006 - 21:57
Pour une vie sans tabac
 
Depuis quelques temps, j'ai pu découvrir de nouvelles campagnes publicitaires dont le but est de nous sensibiliser sur le tabagisme en insistant sur le ridicule qu'il suscite. Je regrette seulement que ce genre d'annonce télévisuelle ne soit que très peu diffusé.

La semaine dernière, j'ai finalament mis la main sur le site officiel de cette campagne publicitaire : Pour une vie sans tabac

Sur ce site, on peut trouver les trois vidéos suivantes :







Il n'y a pas grand chose à ajouter, les images parlent mieux que les mots.
 
publié par Forrest
commentaires ()

SOFUN - Blog, article : Roll-Over progressif en javascript mercredi 14 décembre 2005 - 21:28
Roll-Over progressif en javascript
 
Il y a quelques temps, je faisai découvrir mon rollover progressif à l'occasion du coloriage de mon site.
A partir d'aujourd'hui, vous pourrez vous même utiliser de petit outil que j'ai réalisé moi même (ce n'est pas une simple récupération sur le net).
Afin de montrer les possibilités de ce module, positionnez votre souris au dessus de la photo et celle-ci va être progressivement remplacée par une autre. Avec les réglages sur cet article, la transition est complète en trois secondes à peu de choses près.



Je me suis moi-même surpris par la qualité de cette transition (avec ces deux photos en particulier) qui n'utilise que deux images, comme un rollover classique. Concernant mon aspect vieillit, celui-ci a été réalisé à l'aide du logiciel Face Transformer découvert dans l'article de Ludo. Un autre exemple de mise en application de ce rollover progressif est visible sur cet article de MP qui n'a pas résisté à la tentation.

Quant à l'utilisation de ce module, c'est très similaire à l'utilisation du diaporama et en voici le mode d'emploi :
  • insérez le code suivant à l'emplacement souhaité :
    <script src="http://so.fun.free.fr/modules/commun/scripts/rollover_flou.js"></script>
<script>
	nouveau_id_rollover = monRolloverFlou.length;
	monRolloverFlou[nouveau_id_rollover] = new RolloverFlou(nouveau_id_rollover, 25, 1, 1000, 163, 200);
	monRolloverFlou[nouveau_id_rollover].ajouteCadre(3, "#000000");
	monRolloverFlou[nouveau_id_rollover].place("http://mon.serveur.fr/.../photo_01.jpg",
		"http://mon.serveur.fr/.../photo_02.jpg");
</script>

  • apportez les modification suivantes :
    • ligne "new RolloverFlou" :
      • 25 : temps, en millisecondes, entre chaque variation de l'opacité des photos. Plus le nombre est grand, plus la transition est longue, et inversement.
      • 1 : pourcentage de variation de l'opacité à chaque cycle. Varie entre 1 et 99. Plus le nombre est petit, plus la transition est fluide et longue.
      • 1000 : ce paramètre ne sert à rien pour le moment. Ce n'est qu'un résidut provenant du diaporama. Pas besoin d'y toucher.
      • 163 : largeur des photos en pixel. La photo réelle doit avoir exactement cette largeur car elle ne sera pas redimentionnée automatiquement comme avec une balise IMG.
      • 200 : hauteur des photos en pixel. La photo réelle doit avoir exactement cette hauteur car elle ne sera pas redimentionnée automatiquement comme avec une balise IMG.
    • ligne "ajouteCadre" : une ligne facultative qui permet d'ajouter une bordure au rollover.
      • 3 : épaisseur de la bordure en pixels.
      • #000000 : code couleur pour la bordure.
    • ligne "place" : permet de définir les deux photos du rollover et d'afficher le résultat. La ligne est volontairement découpée en deux lignes, mais il s'agit là d'un choix de lisibilité. N'oubliez pas de mettre les adresses de vos photos à la place des miennes ;)
Si vous conservez la toute première ligne intacte, le script sera utilisé à partir de ce site. Cela ne me pose aucun problème. Je tiens seulement à préciser que celui-ci peut être modifié à tout moment afin d'apporter des corrections pour résoudre les problèmes qui me sont signalés ou d'y ajouter de nouvelles fonctionnalités. En revanche, et bien que je fasse tout ce qui m'est possible pour éviter d'y apporter tout problème nouveau par rapport aux versions précédentes, il n'est pas impossible d'obtenir des effets secondaires indésirables (je ne parles pas de risques de voir Jean-Pierre COFFE débarquer chez vous pour critiquer votre stock alimentaire, ça ne m'est jamais arrivé sinon une crise cardiaque l'aurai terrassé). Je vous conseille donc de garder une copie du javascript que vous pouvez télécharger ici. (Avec Firefox, il faut faire un "click droit" sur le lien puis "Enregistrer la cible du lien sous..."). Dans le cas de utilisation de votre copie du fichier javascript, il vous faut remplacer l'adresse par la votre.

Bien sur, comme il s'agit de javascript, les utilisateurs d'overblog qui sont toujours en mode "Confiance" devront attendre de passer en mode "Privilège" pour pouvoir l'utiliser.

Voila, je pense que ça devrait suffire comme explication, mais n'hésitez pas à demander des précisions.
Je vous invite également à laisser un commentaire avec le lien de vos réalisation afin de montrer que ça marche ailleurs qu'ici.
J'invite également les utilisateurs de Mac à me confirmer le bon fonctionnement de cet outils sur leur navigateur préféré ou à m'informer de tout problème car je n'ai testé que sous Windows XP avec Internet Explorer 6.0 et Firefox 1.5 (le tout en version française).
 
publié par Forrest
commentaires ()

Suivant

PageRank Actuel
Nombre de surfeurs égarés en ce moment : 109
SOFUN - Le Site Où il Fallait Un Nom



Afficher le journal de débogage 


Journal de débogage

Création de l'objet session
reprise de session
requete : SELECT * FROM session WHERE session_id='251767c987a4ecf7013e7bbeed46f65a';
query_result : Resource id #11
requete ok
nombre de lignes retournées : 1
mise à jour de la session
requete : UPDATE session SET session_time='1269089250', pseudo_cookie='' WHERE session_id='251767c987a4ecf7013e7bbeed46f65a';
query_result : 1
requete ok
nombre de lignes retournées : 
requete : UPDATE stats_session SET date_fin='1269089250', url_fin='/modules/blog/liste_articles.php', nb_pages=nb_pages+1, pseudo_cookie=''  WHERE id_session='251767c987a4ecf7013e7bbeed46f65a';
requete echec
récupération du champ session_user_id à partir de la ligne 0 du résultat de requête Resource id #11
ID utilisateur à la fin de l'initialisation de la session : -1
purge des sessions trop anciennes
requete : DELETE FROM session WHERE (session_time < 1269087450);
query_result : 1
requete ok
nombre de lignes retournées : 
Recherche du nom de l'ID de l'utilisateur courant : -1
Recherche du nom de l'utilisateur -1
requete : SELECT * FROM utilisateur WHERE id='-1';
query_result : Resource id #12
requete ok
nombre de lignes retournées : 1
récupération du champ login à partir de la ligne 0 du résultat de requête Resource id #12
lecture du modèle : /mnt/162/sdd/d/3/so.fun/modules/commun/tpl_bandeau.html
Suppression de 109 carractères dans 1 commentaires HTML
lecture du modèle : /mnt/162/sdd/d/3/so.fun/modules/commun/tpl_nav_gauche_calques.html
Suppression de 290 carractères dans 3 commentaires HTML
lecture du modèle : /mnt/162/sdd/d/3/so.fun/modules/commun/tpl_navigation.html
Suppression de 247 carractères dans 1 commentaires HTML
récupération des categories
requete : SELECT * FROM blog_categorie;
query_result : Resource id #16
requete ok
nombre de lignes retournées : 1
lecture du modèle : /mnt/162/sdd/d/3/so.fun/modules/blog/tpl_blog_nav_rechercher.html
Création d'une liste des 5 derniers commentaires
requete : SELECT blog_commentaire.*,blog_article.titre FROM blog_commentaire JOIN blog_article ON blog_commentaire.id_article=blog_article.id_article WHERE etat='nouveau' OR etat='valide' ORDER BY date_creation DESC LIMIT 5;
requete echec
lecture du modèle : /mnt/162/sdd/d/3/so.fun/modules/blog/tpl_derniers_commentaires.html
lecture du modèle : /mnt/162/sdd/d/3/so.fun/modules/commun/tpl_nuancier.html
Suppression de 563 carractères dans 3 commentaires HTML
récupération du nombre total de commentaires
requete : SELECT COUNT(*) FROM blog_commentaire;
requete echec
récupération du champ 0 à partir de la ligne 0 du résultat de requête 
récupération du nombre total d'articles
requete : SELECT COUNT(*) FROM blog_article;
query_result : Resource id #20
requete ok
nombre de lignes retournées : 1
récupération du champ 0 à partir de la ligne 0 du résultat de requête Resource id #20
lecture du modèle : /mnt/162/sdd/d/3/so.fun/modules/blog/tpl_blog_nav_stats.html
lecture du modèle : /mnt/162/sdd/d/3/so.fun/modules/commun/tpl_nav_publicite.html
lecture du modèle : /mnt/162/sdd/d/3/so.fun/modules/blog/tpl_blog_nav_autres_blogs.html
lecture du modèle : /mnt/162/sdd/d/3/so.fun/modules/commun/tpl_pied.html
Suppression de 413 carractères dans 1 commentaires HTML
récupération des 3 derniers articles
requete : SELECT * FROM blog_article WHERE 1 ORDER BY date DESC LIMIT 0,3;
query_result : Resource id #25
requete ok
nombre de lignes retournées : 3
récupération du nombre de commentaires sur l'article 22
requete : SELECT COUNT(*) FROM blog_commentaire WHERE (id_article = 22);
requete echec
récupération du champ 0 à partir de la ligne 0 du résultat de requête 
lecture du modèle : /mnt/162/sdd/d/3/so.fun/modules/blog/tpl_blog_article.html
traitement de l'article (remplacement de valeurs spéciales)
récupération du nombre de commentaires sur l'article 21
requete : SELECT COUNT(*) FROM blog_commentaire WHERE (id_article = 21);
requete echec
récupération du champ 0 à partir de la ligne 0 du résultat de requête 
lecture du modèle : /mnt/162/sdd/d/3/so.fun/modules/blog/tpl_blog_article.html
traitement de l'article (remplacement de valeurs spéciales)
récupération du nombre de commentaires sur l'article 20
requete : SELECT COUNT(*) FROM blog_commentaire WHERE (id_article = 20);
requete echec
récupération du champ 0 à partir de la ligne 0 du résultat de requête 
lecture du modèle : /mnt/162/sdd/d/3/so.fun/modules/blog/tpl_blog_article.html
traitement de l'article (remplacement de valeurs spéciales)
requete : SELECT COUNT(*) FROM blog_article WHERE 1;
query_result : Resource id #35
requete ok
nombre de lignes retournées : 1
récupération du champ 0 à partir de la ligne 0 du résultat de requête Resource id #35
calcul du nombre de sessions actives
requete : SELECT COUNT(*) FROM session WHERE (session_time > 1269088650);
query_result : Resource id #36
requete ok
nombre de lignes retournées : 1
récupération du champ 0 à partir de la ligne 0 du résultat de requête Resource id #36
lecture du modèle : /mnt/162/sdd/d/3/so.fun/modules/commun/tpl_disposition_globale.html
affichage de la page
Informations post exécution

Array
(
    [FCGI_ROLE] => RESPONDER
    [DOCUMENT_ROOT] => /mnt/162/sdd/d/3/so.fun
    [HTTP_ACCEPT] => text/html,application/xhtml+xml,text/xml;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
    [HTTP_ACCEPT_CHARSET] => ISO-8859-1,utf-8;q=0.7,*;q=0.7
    [HTTP_ACCEPT_ENCODING] => gzip
    [HTTP_ACCEPT_LANGUAGE] => en-us,en;q=0.5
    [HTTP_CACHE_CONTROL] => no-cache
    [HTTP_CONNECTION] => close
    [HTTP_COOKIE] => cookie_sid=251767c987a4ecf7013e7bbeed46f65a; sofun=df89fdabcb7579ef3eeb85cfbb23eb5d
    [HTTP_HOST] => so.fun.online.fr
    [HTTP_PRAGMA] => no-cache
    [HTTP_USER_AGENT] => CCBot/1.0 (+http://www.commoncrawl.org/bot.html)
    [HTTP_X_CC_ID] => ccc04-02
    [PATH] => /usr/sbin:/usr/bin:/sbin:/bin
    [REMOTE_ADDR] => 38.107.191.107
    [REMOTE_PORT] => 56450
    [SCRIPT_FILENAME] => /mnt/162/sdd/d/3/so.fun/modules/blog/liste_articles.php
    [SERVER_ADDR] => 212.27.63.162
    [SERVER_NAME] => so.fun.online.fr
    [SERVER_PORT] => 80
    [SERVER_SIGNATURE] => <ADDRESS>Apache/ProXad [Aug  9 2008 02:45:07] Server at so.fun.online.fr Port 80</ADDRESS>

    [SERVER_SOFTWARE] => Apache/ProXad [Aug  9 2008 02:45:12]
    [GATEWAY_INTERFACE] => CGI/1.1
    [SERVER_PROTOCOL] => HTTP/1.1
    [REQUEST_METHOD] => GET
    [QUERY_STRING] => 
    [REQUEST_URI] => /modules/blog/liste_articles.php
    [SCRIPT_NAME] => /modules/blog/liste_articles.php
    [MYIMAGE] => system64-dyn.tar.bz2
    [PHP_FCGI_CHILDREN] => 150
    [_] => /usr/php4/bin/php
    [cookie_sid] => 251767c987a4ecf7013e7bbeed46f65a
    [sofun] => df89fdabcb7579ef3eeb85cfbb23eb5d
    [PHP_SELF] => /modules/blog/liste_articles.php
    [argv] => Array
        (
        )

    [argc] => 0
    [HTTP_POST_VARS] => Array
        (
        )

    [_POST] => Array
        (
        )

    [HTTP_GET_VARS] => Array
        (
        )

    [_GET] => Array
        (
        )

    [HTTP_COOKIE_VARS] => Array
        (
            [cookie_sid] => 251767c987a4ecf7013e7bbeed46f65a
            [sofun] => df89fdabcb7579ef3eeb85cfbb23eb5d
        )

    [_COOKIE] => Array
        (
            [cookie_sid] => 251767c987a4ecf7013e7bbeed46f65a
            [sofun] => df89fdabcb7579ef3eeb85cfbb23eb5d
        )

    [HTTP_SERVER_VARS] => Array
        (
            [FCGI_ROLE] => RESPONDER
            [DOCUMENT_ROOT] => /mnt/162/sdd/d/3/so.fun
            [HTTP_ACCEPT] => text/html,application/xhtml+xml,text/xml;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
            [HTTP_ACCEPT_CHARSET] => ISO-8859-1,utf-8;q=0.7,*;q=0.7
            [HTTP_ACCEPT_ENCODING] => gzip
            [HTTP_ACCEPT_LANGUAGE] => en-us,en;q=0.5
            [HTTP_CACHE_CONTROL] => no-cache
            [HTTP_CONNECTION] => close
            [HTTP_COOKIE] => cookie_sid=251767c987a4ecf7013e7bbeed46f65a; sofun=df89fdabcb7579ef3eeb85cfbb23eb5d
            [HTTP_HOST] => so.fun.online.fr
            [HTTP_PRAGMA] => no-cache
            [HTTP_USER_AGENT] => CCBot/1.0 (+http://www.commoncrawl.org/bot.html)
            [HTTP_X_CC_ID] => ccc04-02
            [PATH] => /usr/sbin:/usr/bin:/sbin:/bin
            [REMOTE_ADDR] => 38.107.191.107
            [REMOTE_PORT] => 56450
            [SCRIPT_FILENAME] => /mnt/162/sdd/d/3/so.fun/modules/blog/liste_articles.php
            [SERVER_ADDR] => 212.27.63.162
            [SERVER_NAME] => so.fun.online.fr
            [SERVER_PORT] => 80
            [SERVER_SIGNATURE] => <ADDRESS>Apache/ProXad [Aug  9 2008 02:45:07] Server at so.fun.online.fr Port 80</ADDRESS>

            [SERVER_SOFTWARE] => Apache/ProXad [Aug  9 2008 02:45:12]
            [GATEWAY_INTERFACE] => CGI/1.1
            [SERVER_PROTOCOL] => HTTP/1.1
            [REQUEST_METHOD] => GET
            [QUERY_STRING] => 
            [REQUEST_URI] => /modules/blog/liste_articles.php
            [SCRIPT_NAME] => /modules/blog/liste_articles.php
            [MYIMAGE] => system64-dyn.tar.bz2
            [PHP_FCGI_CHILDREN] => 150
            [_] => /usr/php4/bin/php
            [PHP_SELF] => /modules/blog/liste_articles.php
            [argv] => Array
                (
                )

            [argc] => 0
        )

    [_SERVER] => Array
        (
            [FCGI_ROLE] => RESPONDER
            [DOCUMENT_ROOT] => /mnt/162/sdd/d/3/so.fun
            [HTTP_ACCEPT] => text/html,application/xhtml+xml,text/xml;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
            [HTTP_ACCEPT_CHARSET] => ISO-8859-1,utf-8;q=0.7,*;q=0.7
            [HTTP_ACCEPT_ENCODING] => gzip
            [HTTP_ACCEPT_LANGUAGE] => en-us,en;q=0.5
            [HTTP_CACHE_CONTROL] => no-cache
            [HTTP_CONNECTION] => close
            [HTTP_COOKIE] => cookie_sid=251767c987a4ecf7013e7bbeed46f65a; sofun=df89fdabcb7579ef3eeb85cfbb23eb5d
            [HTTP_HOST] => so.fun.online.fr
            [HTTP_PRAGMA] => no-cache
            [HTTP_USER_AGENT] => CCBot/1.0 (+http://www.commoncrawl.org/bot.html)
            [HTTP_X_CC_ID] => ccc04-02
            [PATH] => /usr/sbin:/usr/bin:/sbin:/bin
            [REMOTE_ADDR] => 38.107.191.107
            [REMOTE_PORT] => 56450
            [SCRIPT_FILENAME] => /mnt/162/sdd/d/3/so.fun/modules/blog/liste_articles.php
            [SERVER_ADDR] => 212.27.63.162
            [SERVER_NAME] => so.fun.online.fr
            [SERVER_PORT] => 80
            [SERVER_SIGNATURE] => <ADDRESS>Apache/ProXad [Aug  9 2008 02:45:07] Server at so.fun.online.fr Port 80</ADDRESS>

            [SERVER_SOFTWARE] => Apache/ProXad [Aug  9 2008 02:45:12]
            [GATEWAY_INTERFACE] => CGI/1.1
            [SERVER_PROTOCOL] => HTTP/1.1
            [REQUEST_METHOD] => GET
            [QUERY_STRING] => 
            [REQUEST_URI] => /modules/blog/liste_articles.php
            [SCRIPT_NAME] => /modules/blog/liste_articles.php
            [MYIMAGE] => system64-dyn.tar.bz2
            [PHP_FCGI_CHILDREN] => 150
            [_] => /usr/php4/bin/php
            [PHP_SELF] => /modules/blog/liste_articles.php
            [argv] => Array
                (
                )

            [argc] => 0
        )

    [HTTP_ENV_VARS] => Array
        (
            [FCGI_ROLE] => RESPONDER
            [DOCUMENT_ROOT] => /mnt/162/sdd/d/3/so.fun
            [HTTP_ACCEPT] => text/html,application/xhtml+xml,text/xml;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
            [HTTP_ACCEPT_CHARSET] => ISO-8859-1,utf-8;q=0.7,*;q=0.7
            [HTTP_ACCEPT_ENCODING] => gzip
            [HTTP_ACCEPT_LANGUAGE] => en-us,en;q=0.5
            [HTTP_CACHE_CONTROL] => no-cache
            [HTTP_CONNECTION] => close
            [HTTP_COOKIE] => cookie_sid=251767c987a4ecf7013e7bbeed46f65a; sofun=df89fdabcb7579ef3eeb85cfbb23eb5d
            [HTTP_HOST] => so.fun.online.fr
            [HTTP_PRAGMA] => no-cache
            [HTTP_USER_AGENT] => CCBot/1.0 (+http://www.commoncrawl.org/bot.html)
            [HTTP_X_CC_ID] => ccc04-02
            [PATH] => /usr/sbin:/usr/bin:/sbin:/bin
            [REMOTE_ADDR] => 38.107.191.107
            [REMOTE_PORT] => 56450
            [SCRIPT_FILENAME] => /mnt/162/sdd/d/3/so.fun/modules/blog/liste_articles.php
            [SERVER_ADDR] => 212.27.63.162
            [SERVER_NAME] => so.fun.online.fr
            [SERVER_PORT] => 80
            [SERVER_SIGNATURE] => <ADDRESS>Apache/ProXad [Aug  9 2008 02:45:07] Server at so.fun.online.fr Port 80</ADDRESS>

            [SERVER_SOFTWARE] => Apache/ProXad [Aug  9 2008 02:45:12]
            [GATEWAY_INTERFACE] => CGI/1.1
            [SERVER_PROTOCOL] => HTTP/1.1
            [REQUEST_METHOD] => GET
            [QUERY_STRING] => 
            [REQUEST_URI] => /modules/blog/liste_articles.php
            [SCRIPT_NAME] => /modules/blog/liste_articles.php
            [MYIMAGE] => system64-dyn.tar.bz2
            [PHP_FCGI_CHILDREN] => 150
            [_] => /usr/php4/bin/php
        )

    [_ENV] => Array
        (
            [FCGI_ROLE] => RESPONDER
            [DOCUMENT_ROOT] => /mnt/162/sdd/d/3/so.fun
            [HTTP_ACCEPT] => text/html,application/xhtml+xml,text/xml;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
            [HTTP_ACCEPT_CHARSET] => ISO-8859-1,utf-8;q=0.7,*;q=0.7
            [HTTP_ACCEPT_ENCODING] => gzip
            [HTTP_ACCEPT_LANGUAGE] => en-us,en;q=0.5
            [HTTP_CACHE_CONTROL] => no-cache
            [HTTP_CONNECTION] => close
            [HTTP_COOKIE] => cookie_sid=251767c987a4ecf7013e7bbeed46f65a; sofun=df89fdabcb7579ef3eeb85cfbb23eb5d
            [HTTP_HOST] => so.fun.online.fr
            [HTTP_PRAGMA] => no-cache
            [HTTP_USER_AGENT] => CCBot/1.0 (+http://www.commoncrawl.org/bot.html)
            [HTTP_X_CC_ID] => ccc04-02
            [PATH] => /usr/sbin:/usr/bin:/sbin:/bin
            [REMOTE_ADDR] => 38.107.191.107
            [REMOTE_PORT] => 56450
            [SCRIPT_FILENAME] => /mnt/162/sdd/d/3/so.fun/modules/blog/liste_articles.php
            [SERVER_ADDR] => 212.27.63.162
            [SERVER_NAME] => so.fun.online.fr
            [SERVER_PORT] => 80
            [SERVER_SIGNATURE] => <ADDRESS>Apache/ProXad [Aug  9 2008 02:45:07] Server at so.fun.online.fr Port 80</ADDRESS>

            [SERVER_SOFTWARE] => Apache/ProXad [Aug  9 2008 02:45:12]
            [GATEWAY_INTERFACE] => CGI/1.1
            [SERVER_PROTOCOL] => HTTP/1.1
            [REQUEST_METHOD] => GET
            [QUERY_STRING] => 
            [REQUEST_URI] => /modules/blog/liste_articles.php
            [SCRIPT_NAME] => /modules/blog/liste_articles.php
            [MYIMAGE] => system64-dyn.tar.bz2
            [PHP_FCGI_CHILDREN] => 150
            [_] => /usr/php4/bin/php
        )

    [HTTP_POST_FILES] => Array
        (
        )

    [_FILES] => Array
        (
        )

    [_REQUEST] => Array
        (
            [cookie_sid] => 251767c987a4ecf7013e7bbeed46f65a
            [sofun] => df89fdabcb7579ef3eeb85cfbb23eb5d
        )

    [user_hostname] => 38.107.191.107
    [GLOBALS] => Array
 *RECURSION*
    [debug_msg] => Création de l'objet session<br>reprise de session<br>requete : SELECT * FROM session WHERE session_id='251767c987a4ecf7013e7bbeed46f65a';<br>query_result : Resource id #11<br>requete <font color="blue">ok</font><br>nombre de lignes retournées : 1<br>mise à jour de la session<br>requete : UPDATE session SET session_time='1269089250', pseudo_cookie='' WHERE session_id='251767c987a4ecf7013e7bbeed46f65a';<br>query_result : 1<br>requete <font color="blue">ok</font><br>nombre de lignes retournées : <br>requete : UPDATE stats_session SET date_fin='1269089250', url_fin='/modules/blog/liste_articles.php', nb_pages=nb_pages+1, pseudo_cookie=''  WHERE id_session='251767c987a4ecf7013e7bbeed46f65a';<br>requete <font color="red">echec</font><br>récupération du champ session_user_id à partir de la ligne 0 du résultat de requête Resource id #11<br>ID utilisateur à la fin de l'initialisation de la session : -1<br>purge des sessions trop anciennes<br>requete : DELETE FROM session WHERE (session_time < 1269087450);<br>query_result : 1<br>requete <font color="blue">ok</font><br>nombre de lignes retournées : <br>Recherche du nom de l'ID de l'utilisateur courant : -1<br>Recherche du nom de l'utilisateur -1<br>requete : SELECT * FROM utilisateur WHERE id='-1';<br>query_result : Resource id #12<br>requete <font color="blue">ok</font><br>nombre de lignes retournées : 1<br>récupération du champ login à partir de la ligne 0 du résultat de requête Resource id #12<br>lecture du modèle : /mnt/162/sdd/d/3/so.fun/modules/commun/tpl_bandeau.html<br>Suppression de 109 carractères dans 1 commentaires HTML<br>lecture du modèle : /mnt/162/sdd/d/3/so.fun/modules/commun/tpl_nav_gauche_calques.html<br>Suppression de 290 carractères dans 3 commentaires HTML<br>lecture du modèle : /mnt/162/sdd/d/3/so.fun/modules/commun/tpl_navigation.html<br>Suppression de 247 carractères dans 1 commentaires HTML<br>récupération des categories<br>requete : SELECT * FROM blog_categorie;<br>query_result : Resource id #16<br>requete <font color="blue">ok</font><br>nombre de lignes retournées : 1<br>lecture du modèle : /mnt/162/sdd/d/3/so.fun/modules/blog/tpl_blog_nav_rechercher.html<br>Création d'une liste des 5 derniers commentaires<br>requete : SELECT blog_commentaire.*,blog_article.titre FROM blog_commentaire JOIN blog_article ON blog_commentaire.id_article=blog_article.id_article WHERE etat='nouveau' OR etat='valide' ORDER BY date_creation DESC LIMIT 5;<br>requete <font color="red">echec</font><br>lecture du modèle : /mnt/162/sdd/d/3/so.fun/modules/blog/tpl_derniers_commentaires.html<br>lecture du modèle : /mnt/162/sdd/d/3/so.fun/modules/commun/tpl_nuancier.html<br>Suppression de 563 carractères dans 3 commentaires HTML<br>récupération du nombre total de commentaires<br>requete : SELECT COUNT(*) FROM blog_commentaire;<br>requete <font color="red">echec</font><br>récupération du champ 0 à partir de la ligne 0 du résultat de requête <br>récupération du nombre total d'articles<br>requete : SELECT COUNT(*) FROM blog_article;<br>query_result : Resource id #20<br>requete <font color="blue">ok</font><br>nombre de lignes retournées : 1<br>récupération du champ 0 à partir de la ligne 0 du résultat de requête Resource id #20<br>lecture du modèle : /mnt/162/sdd/d/3/so.fun/modules/blog/tpl_blog_nav_stats.html<br>lecture du modèle : /mnt/162/sdd/d/3/so.fun/modules/commun/tpl_nav_publicite.html<br>lecture du modèle : /mnt/162/sdd/d/3/so.fun/modules/blog/tpl_blog_nav_autres_blogs.html<br>lecture du modèle : /mnt/162/sdd/d/3/so.fun/modules/commun/tpl_pied.html<br>Suppression de 413 carractères dans 1 commentaires HTML<br>récupération des 3 derniers articles<br>requete : SELECT * FROM blog_article WHERE 1 ORDER BY date DESC LIMIT 0,3;<br>query_result : Resource id #25<br>requete <font color="blue">ok</font><br>nombre de lignes retournées : 3<br>récupération du nombre de commentaires sur l'article 22<br>requete : SELECT COUNT(*) FROM blog_commentaire WHERE (id_article = 22);<br>requete <font color="red">echec</font><br>récupération du champ 0 à partir de la ligne 0 du résultat de requête <br>lecture du modèle : /mnt/162/sdd/d/3/so.fun/modules/blog/tpl_blog_article.html<br>traitement de l'article (remplacement de valeurs spéciales)<br>récupération du nombre de commentaires sur l'article 21<br>requete : SELECT COUNT(*) FROM blog_commentaire WHERE (id_article = 21);<br>requete <font color="red">echec</font><br>récupération du champ 0 à partir de la ligne 0 du résultat de requête <br>lecture du modèle : /mnt/162/sdd/d/3/so.fun/modules/blog/tpl_blog_article.html<br>traitement de l'article (remplacement de valeurs spéciales)<br>récupération du nombre de commentaires sur l'article 20<br>requete : SELECT COUNT(*) FROM blog_commentaire WHERE (id_article = 20);<br>requete <font color="red">echec</font><br>récupération du champ 0 à partir de la ligne 0 du résultat de requête <br>lecture du modèle : /mnt/162/sdd/d/3/so.fun/modules/blog/tpl_blog_article.html<br>traitement de l'article (remplacement de valeurs spéciales)<br>requete : SELECT COUNT(*) FROM blog_article WHERE 1;<br>query_result : Resource id #35<br>requete <font color="blue">ok</font><br>nombre de lignes retournées : 1<br>récupération du champ 0 à partir de la ligne 0 du résultat de requête Resource id #35<br>calcul du nombre de sessions actives<br>requete : SELECT COUNT(*) FROM session WHERE (session_time > 1269088650);<br>query_result : Resource id #36<br>requete <font color="blue">ok</font><br>nombre de lignes retournées : 1<br>récupération du champ 0 à partir de la ligne 0 du résultat de requête Resource id #36<br>lecture du modèle : /mnt/162/sdd/d/3/so.fun/modules/commun/tpl_disposition_globale.html<br>affichage de la page<br>
    [db_site] => c_sqldb Object
        (
            [db_connect_id] => Resource id #10
            [user] => so.fun
            [password] => pvqw1j1v
            [server] => sql.free.fr
            [dbname] => so_fun
            [query_result] => Resource id #36
        )

    [HTTP_SESSION_VARS] => Array
        (
        )

    [_SESSION] => Array
        (
        )

    [session] => c_session Object
        (
            [user_id] => -1
            [db] => c_sqldb Object
                (
                    [db_connect_id] => Resource id #10
                    [user] => so.fun
                    [password] => pvqw1j1v
                    [server] => sql.free.fr
                    [dbname] => so_fun
                    [query_result] => Resource id #36
                )

        )

    [user_id] => -1
    [tpl_bandeau] => 	<table align="center" width="100%" height="120" cellpadding="0" cellspacing="0" border="0">
		<tr height="100">
			<td width="100%">
				<table align="center" class="fond-titre1" width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
					<tr height="60">
						<td>
							<a href="/">
							<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="450" height="60" id="Banniere_SOFUN" align="middle">
							<param name="allowScriptAccess" value="sameDomain" />
							<param name="movie" value="/modules/commun/flash/Banniere_SOFUN.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#ffffff" />
							<embed src="/modules/commun/flash/Banniere_SOFUN.swf" quality="high" wmode="transparent" bgcolor="#ffffff" width="450" height="60" name="Banniere_SOFUN" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
							</object>
							
							</a>
						</td>
						<td align="right">
							<img src="/modules/commun/images/cityhunter.png" width="292" height="90" border="0" align="middle" alt="City Hunter">
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr height="20">
			<td>
				<table width="100%" cellpadding="0" cellspacing="0" border="0">
					<tr height="20" class="fond-titre2">
						<td>Utilisateur : <a href="/modules/login/login_form.php"><font color="#33ff33">anonyme</font></a>&nbsp;&nbsp;
						</td>
						<td align="right">
							Samedi 20 Mars 2010&nbsp;
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
    [tpl_navigation] => <script language="JavaScript" src="/modules/commun/scripts/navigation.js">
</script>

<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="15">
		<td ></td>
	</tr>
	<tr>
		<td>
			<a href="http://clustrmaps.com/counter/maps.php?url=http://so.fun.free.fr&type=small&clusters=no&map=world" id="clustrMapsLink" target="_blank">
			<img src="http://clustrmaps.com/counter/index2.php?url=http://so.fun.free.fr" border=0 alt="Provenance géographique des visiteurs"
			onError="this.onError=null; this.src='http://www.meetomatic.com/images/clustrmaps-back-soon.jpg'; document.getElementById('clustrMapsLink').href='http://clustrmaps.com/'" width="160" height="106">
			</a>
		</td>
	</tr>
</table>

<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25">
		<td></td>
	</tr>
</table>
<div id="div_nav_gauche_1"></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25">
		<td></td>
	</tr>
</table>
<div id="div_nav_gauche_2"></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25">
		<td></td>
	</tr>
</table>
<div id="div_nav_gauche_3"></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25">
		<td></td>
	</tr>
</table>
<div id="div_nav_gauche_4"></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25">
		<td></td>
	</tr>
</table>
<div id="div_nav_gauche_5"></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25">
		<td></td>
	</tr>
</table>
<div id="div_nav_gauche_6"></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25">
		<td></td>
	</tr>
</table>
<div id="div_nav_gauche_7"></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25">
		<td></td>
	</tr>
</table>
<div id="div_nav_gauche_8"></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25">
		<td></td>
	</tr>
</table>
<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td align="center"><input type="button" value="RAZ Menu" onClick="navigationGaucheRAZ()"></td>
	</tr>
</table>
<script language="JavaScript" src="/modules/commun/scripts/navigation.js">
</script>

<div id="div_nav_gauche_modules" style="display:none">
<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25" class="fond-titre1">
		<td align="center">
			<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
				<tr height="10">
					<td width="10" style="background-image:url('/modules/commun/images/triangle_haut.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_modules', 'haut')"></td>
					<td align="center" rowspan="2"><b>Navigation</b></td>
					<td align="center" rowspan="2" width="10"></td>
				</tr>
				<tr height="10">
					<td width="10" style="background-image:url('/modules/commun/images/triangle_bas.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_modules', 'bas')"></td>
				</tr>
			</table>
		</td>
	</tr>
	<tr class="fond-titre2">
		<td>
			<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0" class="nav_gauche_2">
				<tr valign="top" onMouseOut="menuOut(1)">
					<a href="/modules/commun/"><td onMouseOver="menuOver(1)" id="menu1" onClick="window.open('/modules/commun/','_self')" align="center">Accueil</td></a>
				</tr>
				<tr valign="top" onMouseOut="menuOut(2)">
					<a href="/modules/blog/"><td onMouseOver="menuOver(2)" id="menu2" onClick="window.open('/modules/blog/','_self')" align="center">Weblog</td></a>
				</tr>
				<tr valign="top" onMouseOut="menuOut(3)">
					<a href="/modules/chat/"><td onMouseOver="menuOver(3)" id="menu3" onClick="window.open('/modules/chat/','_self')" align="center">Chat</td></a>
				</tr>
				<tr valign="top" onMouseOut="menuOut(4)">
					<a href="/modules/moi/intro.php"><td onMouseOver="menuOver(4)" id="menu4" onClick="window.open('/modules/moi/intro.php','_self')" align="center">CV</td></a>
				</tr>
				<tr valign="top" onMouseOut="menuOut(5)">
					<a href="/modules/liens/"><td onMouseOver="menuOver(5)" id="menu5" onClick="window.open('/modules/liens/','_self')" align="center">Liens</td></a>
				</tr>
				<tr valign="top" onMouseOut="menuOut(6)">
					<a href="/modules/contact/"><td onMouseOver="menuOver(6)" id="menu6" onClick="window.open('/modules/contact/','_self')" align="center">Contact</td></a>
				</tr>
				
			</table>
		</td>
	</tr>
</table>
</div><div id="div_nav_gauche_blog" style="display:none">
		<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
			<tr height="25"class="fond-titre1">
				<td align="center">
					<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
						<tr height="10">
							<td width="10" style="background-image:url('/modules/commun/images/triangle_haut.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_blog', 'haut')"></td>
							<td align="center" rowspan="2"><b>Catégories Blog</b></td>
							<td align="center" rowspan="2" width="10"></td>
						</tr>
						<tr height="10">
							<td width="10" style="background-image:url('/modules/commun/images/triangle_bas.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_blog', 'bas')"></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr class="fond-titre2">
				<td>
					<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0" class="nav_gauche_2">
						<tr onMouseOut="menuOut(10)">
							<a href="/modules/blog/liste_articles.php?id_categorie=0"><td onMouseOver="menuOver(10)" id="menu10" onClick="window.open('/modules/blog/liste_articles.php?id_categorie=0','_self')">Divers</td></a>
						</tr>
	
			<tr onMouseOut="menuOut(11)">
				<a href="/modules/blog/liste_articles.php?id_categorie=1"><td onMouseOver="menuOver(11)" id="menu11" onClick="window.open('/modules/blog/liste_articles.php?id_categorie=1','_self')">Scripts</td></a>
			</tr><tr height="15"><td></td></tr>
		<tr onMouseOut="menuOut(12)">
			<a href="/modules/agenda/"><td onMouseOver="menuOver(12)" id="menu12" onClick="window.open('/modules/agenda/','_self')">Calendrier</td></a>
		</tr>
	
		<tr onMouseOut="menuOut(13)">
			<a href="/modules/blog/article.php"><td onMouseOver="menuOver(13)" id="menu13" onClick="window.open('/modules/blog/article.php','_self')">Article au hasard</td></a>
		</tr>
	
					</table>
				</td>
			</tr>
		</table>
	</div><div id="div_nav_gauche_recherche" style="display:none">		<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
			<tr height="25"class="fond-titre1">
				<td align="center">
					<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
						<tr height="10">
							<td width="10" style="background-image:url('/modules/commun/images/triangle_haut.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_recherche', 'haut')"></td>
							<td align="center" rowspan="2"><b>Rechercher</b></td>
							<td align="center" rowspan="2" width="10"></td>
						</tr>
						<tr height="10">
							<td width="10" style="background-image:url('/modules/commun/images/triangle_bas.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_recherche', 'bas')"></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr class="fond-titre2">
				<td>
					<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0" class="nav_gauche_2">
					<form method="POST" action="/modules/blog/recherche.php">
						<tr height="10"><td></td></tr>
						<tr>
							<td><input type="text" id="str_recherche" name="str_recherche" size="16"></td>
						</tr>
						<tr>
							<td><input type="submit" id="btn_rechercher" name="btn_rechercher" value="OK"></td>
						</tr>
						<tr height="10"><td></td></tr>
					</form>
					</table>
				</td>
			</tr>
		</table>
</div><div id="div_nav_gauche_commentaires" style="display:none"><table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25" class="fond-titre1">
		<td align="center">
			<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
				<tr height="10">
					<td width="10" style="background-image:url('/modules/commun/images/triangle_haut.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_commentaires', 'haut')"></td>
					<td align="center" rowspan="2"><b>Commentaires</b></td>
					<td align="center" rowspan="2" width="10"></td>
				</tr>
				<tr height="10">
					<td width="10" style="background-image:url('/modules/commun/images/triangle_bas.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_commentaires', 'bas')"></td>
				</tr>
			</table>
		</td>
	</tr>
	<tr class="fond-titre2">
		<td>
			
		</td>
	</tr>
</table>
</div><div id="div_nav_gauche_nuancier" style="display:none"><script>
function ChangeVisibilite(id_element, visible)
{
	elt = document.getElementById(id_element);

	if (visible==false)
	{
		elt.style.visibility = "hidden";
		elt.style.height = 0;
	}
	else
	{
		elt.style.visibility = "visible";
		elt.style.height = "";
	}
}
</script>

<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25" class="fond-titre1">
		
		<td>
			<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
				<tr height="10">
					<td width="10" style="background-image:url('/modules/commun/images/triangle_haut.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_nuancier', 'haut')"></td>
					<td align="center" rowspan="2"><b>Nuancier</b></td>
					<td align="center" rowspan="2" width="10"></td>
				</tr>
				<tr height="10">
					<td width="10" style="background-image:url('/modules/commun/images/triangle_bas.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_nuancier', 'bas')"></td>
				</tr>
			</table>
		</td>
	</tr>
	<tr class="fond-titre2">
		<td>
			
			<center>
			.fond-navigateur<br>
			<input type="text" value="#dddddd" size="7" id="champ-.fond-navigateur" onChange="SetClassBgcolor('.fond-navigateur', this.value); SetCookie('css-.fond-navigateur', this.value)"><input type="button" value="ok"><br>
			.fond-cadrepage<br>
			<input type="text" value="#ccddff" size="7" id="champ-.fond-cadrepage" onChange="SetClassBgcolor('.fond-cadrepage', this.value); SetCookie('css-.fond-cadrepage', this.value)"><input type="button" value="ok"><br>
			.fond-page<br>
			<input type="text" value="#ccddff" size="7" id="champ-.fond-page" onChange="SetClassBgcolor('.fond-page', this.value); SetCookie('css-.fond-page', this.value)"><input type="button" value="ok"><br>
			.fond-contenu<br>
			<input type="text" value="#ccddff" size="7" id="champ-.fond-contenu" onChange="SetClassBgcolor('.fond-contenu', this.value); SetCookie('css-.fond-contenu', this.value)"><input type="button" value="ok"><br>
			.fond-titre1<br>
			<input type="text" value="#3333ff" size="7" id="champ-.fond-titre1" onChange="SetClassBgcolor('.fond-titre1', this.value); SetCookie('css-.fond-titre1', this.value)"><input type="button" value="ok"><br>
			.fond-titre2<br>
			<input type="text" value="#5555ff" size="7" id="champ-.fond-titre2" onChange="SetClassBgcolor('.fond-titre2', this.value); SetCookie('css-.fond-titre2', this.value)"><input type="button" value="ok"><br>
			.article-blog<br>
			<input type="text" value="#ccddff" size="7" id="champ-.article-blog" onChange="SetClassBgcolor('.article-blog', this.value); SetCookie('css-.article-blog', this.value)"><input type="button" value="ok"><br>
			.commentaire-blog<br>
			<input type="text" value="#ccddff" size="7" id="champ-.commentaire-blog" onChange="SetClassBgcolor('.commentaire-blog', this.value); SetCookie('css-.commentaire-blog', this.value)"><input type="button" value="ok"><br>
			liens<br>
			<input type="text" value="blue" size="7" id="champ-A" onChange="SetClassColor('A', this.value); SetCookie('css-A', this.value)"><input type="button" value="ok"><br>
			police<br>
			<input type="text" value="Comics Sans MS" size="7" id="champ-BODY-font" onChange="SetClassFont('BODY', this.value); SetCookie('css-BODY-font', this.value)"><input type="button" value="ok"><br>
			<input type="button" value="RAZ" onClick="RazParametresUtilisateur()"><br>
			</center>
			
		</td>
	</tr>
</table>
<script language="javascript">
	InitialyseNuancier();
</script></div><div id="div_nav_gauche_blog_stats" style="display:none">		<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
			<tr height="25"class="fond-titre1">
				<td align="center">
					<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
						<tr height="10">
							<td width="10" style="background-image:url('/modules/commun/images/triangle_haut.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_blog_stats', 'haut')"></td>
							<td align="center" rowspan="2"><b>Stats Blog</b></td>
							<td align="center" rowspan="2" width="10"></td>
						</tr>
						<tr height="10">
							<td width="10" style="background-image:url('/modules/commun/images/triangle_bas.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_blog_stats', 'bas')"></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr class="fond-titre2">
				<td>
					<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
					<form method="POST" action="/modules/blog/recherche.php">
						<tr height="10"><td></td></tr>
						<tr>
							<td align="center" style="font-size:12"><nobr> commentaires</nobr><br>dans<br><nobr>15 articles</nobr></td>
						</tr>
						<tr height="10"><td></td></tr>
					</form>
					</table>
				</td>
			</tr>
		</table>
</div><div id="div_nav_gauche_publicite" style="display:none">		<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
			<tr height="25"class="fond-titre1">
				<td align="center">
					<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
						<tr height="10">
							<td width="10" style="background-image:url('/modules/commun/images/triangle_haut.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_publicite', 'haut')"></td>
							<td align="center" rowspan="2"><b>Publicité</b></td>
							<td align="center" rowspan="2" width="10"></td>
						</tr>
						<tr height="10">
							<td width="10" style="background-image:url('/modules/commun/images/triangle_bas.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_publicite', 'bas')"></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr class="fond-titre2">
				<td>
					<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
					<form method="POST" action="/modules/blog/recherche.php">
						<tr height="10"><td></td></tr>
						<tr>
							<td align="center" style="font-size:12">
<script type="text/javascript">
google_ad_client = "pub-4084643915209244";
google_ad_width = 125;
google_ad_height = 125;
google_ad_format = "125x125_as";
google_ad_type = "text_image";
google_ad_channel ="";
</script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script><br>
<script type="text/javascript">
google_ad_client = "pub-4084643915209244";
google_ad_width = 110;
google_ad_height = 32;
google_ad_format = "110x32_as_rimg";
google_cpa_choice = "CAAQieybzgEaCPd6JB7xAZlbKNGZ5HQ";
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
							</td>
						</tr>
						<tr height="10"><td></td></tr>
					</form>
					</table>
				</td>
			</tr>
		</table>
</div><div id="div_nav_gauche_autres_blogs" style="display:none">		<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
			<tr height="25"class="fond-titre1">
				<td align="center">
					<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
						<tr height="10">
							<td width="10" style="background-image:url('/modules/commun/images/triangle_haut.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_autres_blogs', 'haut')"></td>
							<td align="center" rowspan="2"><b>Autres Blogs</b></td>
							<td align="center" rowspan="2" width="10"></td>
						</tr>
						<tr height="10">
							<td width="10" style="background-image:url('/modules/commun/images/triangle_bas.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_autres_blogs', 'bas')"></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr class="fond-titre2">
				<td>
					<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
					<form method="POST" action="/modules/blog/recherche.php">
						<tr height="10"><td></td></tr>
						<tr>
							<td align="center" style="font-size:12"><a href="http://ougl.over-blog.com" target="_blank"><font color="#000000">Ludo, prof au Japon</font></a></td>
						</tr>
						<tr>
							<td align="center" style="font-size:12"><a href="http://iroiro.over-blog.com" target="_blank"><font color="#000000">iroiro</font></a></td>
						</tr>
						<tr>
							<td align="center" style="font-size:12"><a href="http://paristokyo.over-blog.com" target="_blank"><font color="#000000">Paris-Tokyo</font></a></td>
						</tr>
						<tr height="10"><td></td>
						</tr>
						<tr>
							<td align="center" style="font-size:12"><a href="http://so.fun.free.fr/modules/espace_perso/url_hasard.php?login_utilisateur=Forrest" target="_blank"><font color="#000000">Hasard parmi 12 blogs</font></a></td>
						</tr>
						<tr height="10"><td></td>
						</tr>
					</form>
					</table>
				</td>
			</tr>
		</table>
</div><script src="/modules/commun/scripts/modules_navigation.js"></script>
    [tpl_pied] => <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<a href="/modules/rss/rss2.php"><img src="/modules/commun/images/rss2.gif" border="0"></a><br>
<a href="http://www.pagerank.fr/" title="Mon PageRank" target="_blank"><img src="http://www.pagerank.fr/pagerank-actuel.gif?uri=so.fun.free.fr/" style="border: none;" alt="PageRank Actuel"/></a><br>

Nombre de surfeurs égarés en ce moment : {nb_sessions}
<script language="JavaScript" src="http://www.gvisit.com/record.php?sid=37a9040918617690061739d49e688130" type="text/javascript" DEFER></script>
</td>
<td align="right">
<script type="text/javascript">
google_ad_client = "pub-4084643915209244";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text_image";
google_ad_channel ="";
google_color_border = "33FF33";
google_color_bg = "FF9933";
google_color_link = "000000";
google_color_url = "666666";
google_color_text = "333333";
</script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td>
</tr>
</table>

    [nb_max_articles] => 3
    [tpl_contenu] => <script language="javascript">
	function SetBgColor(id_element, couleur)
	{
		elt = document.getElementById(id_element);
		elt.style.background = couleur;
	}
</script>
<title>SOFUN - Blog, article : Diaporama javascript en fondu enchainé</title>
<font size="-2">dimanche 05 mars 2006 - 23:09</font>
<fieldset id="article22" class="article-blog">
<legend><a href="/modules/blog/article.php?id_article=22"><font color="black"><b>Diaporama javascript en fondu enchainé</b></font></a></legend>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>
			<table width="100%" cellpadding="0" cellspacing="0" border="0">
				<tr>
					<td width="15"></td>
					<td>Depuis une dixaine de jours, j'ai enfin pris le temps d'ajouter une amélioration à mon diaporama en javascript : la transition progressive en dégradé flou.<br>
Ce soir, comme je désespérait de ne trouver de photo pour illustrer joliement cette nouvelle fonctionnalité, je me suis souvenu qu'il m'est arrivé de prendre des vacances. Voici donc sept photos prises aux Arcs (bien qu'il eu été plus facile de les prendre à l'appareil photo), en 2004.<br>
Si je me souviens bien, la photo la moins enneigée correspond à la vallée de Bourg Saint Maurice (t'as avalé le boursin Maurice ?).<br>
<br>
<!-- Début diaporama -->
<script src="http://so.fun.free.fr/modules/commun/scripts/diaporama_objet.js"></script>
<script>
	nouveau_id_diaporama = monDiaporama.length;
	monDiaporama[nouveau_id_diaporama] = new Diaporama(nouveau_id_diaporama, 100, 2,	2000, 600, 450, "flou");
	monDiaporama[nouveau_id_diaporama].ajoutePhoto("http://so.fun.free.fr/modules/blog/photos/les-arcs_2004_1.jpg");
	monDiaporama[nouveau_id_diaporama].ajoutePhoto("http://so.fun.free.fr/modules/blog/photos/les-arcs_2004_2.jpg");
	monDiaporama[nouveau_id_diaporama].ajoutePhoto("http://so.fun.free.fr/modules/blog/photos/les-arcs_2004_3.jpg");
	monDiaporama[nouveau_id_diaporama].ajoutePhoto("http://so.fun.free.fr/modules/blog/photos/les-arcs_2004_4.jpg");
	monDiaporama[nouveau_id_diaporama].ajoutePhoto("http://so.fun.free.fr/modules/blog/photos/les-arcs_2004_5.jpg");
	monDiaporama[nouveau_id_diaporama].ajoutePhoto("http://so.fun.free.fr/modules/blog/photos/les-arcs_2004_6.jpg");
	monDiaporama[nouveau_id_diaporama].ajoutePhoto("http://so.fun.free.fr/modules/blog/photos/les-arcs_2004_7.jpg");
	//monDiaporama[nouveau_id_diaporama].masquerPanneauCommande();
	monDiaporama[nouveau_id_diaporama].ajouteCadre(3,"#000000");
	monDiaporama[nouveau_id_diaporama].placeDiaporama();
	monDiaporama[nouveau_id_diaporama].testImagesOk();
</script>
<!-- Fin diaporama -->

<br>
Passons maintenant à la partie technique :<br>
Pour la mise en place, la procédure est exactement la même que pour le <a href="http://so.fun.free.fr/modules/blog/article.php?id_article=16">diaporama en "slide"</a> (je ne trouve pas de mot français pour le désigner). Il suffit ensuite de modifier la ligne :<br>
<br>
<fieldset>
<pre >
<div style="font-family:arial">
monDiaporama[nouveau_id_diaporama] = new Diaporama(nouveau_id_diaporama, <b>50</b>, <b>10</b>, <b>2000</b>, <b>500</b>, <b>600</b>);
</div></pre>
</fieldset>
<br>
... en y ajoutant un nouveau paramètre : <br>
<br>
<fieldset>
<pre >
<div style="font-family:arial">
monDiaporama[nouveau_id_diaporama] = new Diaporama(nouveau_id_diaporama, <b>100</b>, <b>2</b>, <b>2000</b>, <b>500</b>, <b>600</b>, <b>"flou"</b>);
</div></pre>
</fieldset>
<br>
La ligne "<b>new Diaporama</b>" s'utilise alors ainsi :
	<ul>
	<li> <b>100</b> : temps, en millisecondes, entre chaque étape de réduction de la photo au premier plan. Plus le nombre est grand, plus la transition est longue, et inversement.
	<li> <b>2</b> : pourcentage de progression effectué à chaque étape. Varie entre 1 et 100. Plus le nombre est petit, plus la transition est fluide et lente.
	<li> <b>2000</b> : temps de pause, en millisecondes, entre chaque transition.
	<li> <b>500</b> : largeur des photos en pixel. La photo réelle doit avoir exactement la même largeur que celle que vous aurez définit ici car elle ne sera pas redimentionnée automatiquement comme avec une balise IMG.
	<li> <b>600</b> : hauteur des photos en pixel. La photo réelle doit avoir exactement la même hauteur que celle que vous aurez définit ici car elle ne sera pas redimentionnée automatiquement comme avec une balise IMG.
	</ul>

Pour le premier paramètre, je conseille de ne pas le diminuer en dessous de 50 : mon PC, bien qu'il tienne la route, travaille à plus de 50% lors d'une transition à cette cadence, donc il faut penser à vos visiteurs qui peuvent avoir une machine qui commence à souffrir.<br>
De plus, 100 et 2 donnent à peu près le même résultat que 50 et 1.<br>
La durée théorique d'une transition peut être calculée ainsi :
<ul>
<li><b>paramètre_1 x 100 / paramètre_2 = durée en millisecondes.</b>
<li>exemple : 100 x 100 / 2 = 2000 millisecondes, soit 2 secondes.
</ul>

Voila, je pense que ça devrait suffire comme explication en plus des explications du <a href="http://so.fun.free.fr/modules/blog/article.php?id_article=16">diaporama en "slide"</a>, mais n'hésitez pas à demander des précisions.<br>
Ce script a été testé sur Firefox 1.5 et Internet Explorer 6 dans leur version Windows uniquement.<br>
Je vous invite également à laisser un commentaire avec le lien de vos diaporamas afin de montrer que ça marche ailleurs qu'ici.<br>
<br>
11/03/06 : après avoir parcouru quelques sites, j'ai vu qu'on appelle cet effet le "fondu enchaîné". Je ne m'en souvenait plus.</td>
					<td width="15"></td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
	</tr>
</table>
</fieldset>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td align="right">publié par Forrest<br><nobr><a href="/modules/blog/article.php?id_article=22&affiche_commentaire=true">commentaires ()</a></nobr><br>
		</td>
	</tr>
</table>
<br><script language="javascript">
	function SetBgColor(id_element, couleur)
	{
		elt = document.getElementById(id_element);
		elt.style.background = couleur;
	}
</script>
<title>SOFUN - Blog, article : Pour une vie sans tabac</title>
<font size="-2">vendredi 27 janvier 2006 - 21:57</font>
<fieldset id="article21" class="article-blog">
<legend><a href="/modules/blog/article.php?id_article=21"><font color="black"><b>Pour une vie sans tabac</b></font></a></legend>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>
			<table width="100%" cellpadding="0" cellspacing="0" border="0">
				<tr>
					<td width="15"></td>
					<td>Depuis quelques temps, j'ai pu découvrir de nouvelles campagnes publicitaires dont le but est de nous sensibiliser sur le tabagisme en insistant sur le ridicule qu'il suscite. Je regrette seulement que ce genre d'annonce télévisuelle ne soit que très peu diffusé.<br>
<br>
La semaine dernière, j'ai finalament mis la main sur le site officiel de cette campagne publicitaire : <a href="http://fr.help-eu.com/pages/index-1.html" target="_blank">Pour une vie sans tabac</a><br>
<br>
Sur ce site, on peut trouver les trois vidéos suivantes :<br>
<br>
<center>
<a href="/modules/download/pour_une_vie_sans_tabac_1.wmv" target="_blank"><img src="/modules/blog/photos/pour_une_vie_sans_tabac_1.jpg" border="0"></a><br>
<br>
<a href="/modules/download/pour_une_vie_sans_tabac_2.wmv" target="_blank"><img src="/modules/blog/photos/pour_une_vie_sans_tabac_2.jpg" border="0"></a><br>
<br>
<a href="/modules/download/pour_une_vie_sans_tabac_3.wmv" target="_blank"><img src="/modules/blog/photos/pour_une_vie_sans_tabac_3.jpg" border="0"></a><br>
</center>
<br>
Il n'y a pas grand chose à ajouter, les images parlent mieux que les mots.</td>
					<td width="15"></td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
	</tr>
</table>
</fieldset>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td align="right">publié par Forrest<br><nobr><a href="/modules/blog/article.php?id_article=21&affiche_commentaire=true">commentaires ()</a></nobr><br>
		</td>
	</tr>
</table>
<br><script language="javascript">
	function SetBgColor(id_element, couleur)
	{
		elt = document.getElementById(id_element);
		elt.style.background = couleur;
	}
</script>
<title>SOFUN - Blog, article : Roll-Over progressif en javascript</title>
<font size="-2">mercredi 14 décembre 2005 - 21:28</font>
<fieldset id="article20" class="article-blog">
<legend><a href="/modules/blog/article.php?id_article=20"><font color="black"><b>Roll-Over progressif en javascript</b></font></a></legend>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>
			<table width="100%" cellpadding="0" cellspacing="0" border="0">
				<tr>
					<td width="15"></td>
					<td>Il y a quelques temps, je faisai découvrir mon rollover progressif à l'occasion du <a href="http://so.fun.free.fr/modules/blog/article.php?id_article=15">coloriage</a> de mon site.<br>
A partir d'aujourd'hui, vous pourrez vous même utiliser de petit outil que j'ai réalisé moi même (ce n'est pas une simple récupération sur le net).<br>
Afin de montrer les possibilités de ce module, positionnez votre souris au dessus de la photo et celle-ci va être progressivement remplacée par une autre. Avec les réglages sur cet article, la transition est complète en trois secondes à peu de choses près.<br>

<br>
<center>
<script src="http://so.fun.free.fr/modules/commun/scripts/rollover_flou.js"></script>
<script>
	nouveau_id_rollover = monRolloverFlou.length;
	monRolloverFlou[nouveau_id_rollover] = new RolloverFlou(nouveau_id_rollover, 25, 1,	1000, 163, 200);
	monRolloverFlou[nouveau_id_rollover].ajouteCadre(3, "#000000");
	monRolloverFlou[nouveau_id_rollover].place("http://so.fun.free.fr/modules/blog/photos/forrest_normal.jpg", "http://so.fun.free.fr/modules/blog/photos/forrest_vieillit.jpg");
</script>
</center>
<br>
<br>
Je me suis moi-même surpris par la qualité de cette transition (avec ces deux photos en particulier) qui n'utilise que deux images, comme un rollover classique. Concernant mon aspect vieillit, celui-ci a été réalisé à l'aide du logiciel <a href="http://www.dcs.st-and.ac.uk/~morph/Transformer/" target="_blank">Face Transformer</a> découvert dans <a href="http://ougl.over-blog.com/article-658471.html" target="_blank">l'article de Ludo</a>. Un autre exemple de mise en application de ce rollover progressif est visible sur <a href="http://iroiro.over-blog.com/article-1154909.html" target="_blank">cet article</a> de MP qui n'a pas résisté à la tentation.<br>
<br>
Quant à l'utilisation de ce module, c'est très similaire à l'utilisation du <a href="http://so.fun.free.fr/modules/blog/article.php?id_article=16">diaporama</a> et en voici le mode d'emploi :
<ul>
<li> insérez le code suivant à l'emplacement souhaité :<br>
<table align="center">
<tr>
<td>
<fieldset>
<pre ><div style="font-family:arial">&#60;script src="<b>http://so.fun.free.fr/modules/commun/scripts/rollover_flou.js</b>"&#62;&#60;/script&#62;
&#60;script&#62;
	nouveau_id_rollover = monRolloverFlou.length;
	monRolloverFlou[nouveau_id_rollover] = new RolloverFlou(nouveau_id_rollover, <b>25</b>, <b>1</b>, <b>1000</b>, <b>163</b>, <b>200</b>);
	<i>monRolloverFlou[nouveau_id_rollover].ajouteCadre(<b>3</b>, <b>"#000000"</b>);</i>
	monRolloverFlou[nouveau_id_rollover].place("<b>http://mon.serveur.fr/.../photo_01.jpg</b>",
		"<b>http://mon.serveur.fr/.../photo_02.jpg</b>");
&#60;/script&#62;</div></pre>
</fieldset>
</td>
</tr>
</table>
<br>
<li>apportez les modification suivantes :
	<ul>
	<li>ligne "<b>new RolloverFlou</b>" :
		<ul>
		<li> <b>25</b> : temps, en millisecondes, entre chaque variation de l'opacité des photos. Plus le nombre est grand, plus la transition est longue, et inversement.
		<li> <b>1</b> : pourcentage de variation de l'opacité à chaque cycle. Varie entre 1 et 99. Plus le nombre est petit, plus la transition est fluide et longue.
		<li> <b>1000</b> : ce paramètre ne sert à rien pour le moment. Ce n'est qu'un résidut provenant du diaporama. Pas besoin d'y toucher.
		<li> <b>163</b> : largeur des photos en pixel. La photo réelle doit avoir exactement cette largeur car elle ne sera pas redimentionnée automatiquement comme avec une balise IMG.
		<li> <b>200</b> : hauteur des photos en pixel. La photo réelle doit avoir exactement cette hauteur car elle ne sera pas redimentionnée automatiquement comme avec une balise IMG.
		</ul>
	<li>ligne "<b>ajouteCadre</b>" : une ligne facultative qui permet d'ajouter une bordure au rollover.
		<ul>
		<li><b>3</b> : épaisseur de la bordure en pixels.
		<li><b>#000000</b> : code couleur pour la bordure.
		</ul>
	<li>ligne "<b>place</b>" : permet de définir les deux photos du rollover et d'afficher le résultat. La ligne est volontairement découpée en deux lignes, mais il s'agit là d'un choix de lisibilité. N'oubliez pas de mettre les adresses de vos photos à la place des miennes ;)
	</ul>
</ul>
Si vous conservez la toute première ligne intacte, le script sera utilisé à partir de ce site. Cela ne me pose aucun problème. Je tiens seulement à préciser que celui-ci peut être modifié à tout moment afin d'apporter des corrections pour résoudre les problèmes qui me sont signalés ou d'y ajouter de nouvelles fonctionnalités. En revanche, et bien que je fasse tout ce qui m'est possible pour éviter d'y apporter tout problème nouveau par rapport aux versions précédentes, il n'est pas impossible d'obtenir des effets secondaires indésirables (je ne parles pas de risques de voir Jean-Pierre COFFE débarquer chez vous pour critiquer votre stock alimentaire, ça ne m'est jamais arrivé sinon une crise cardiaque l'aurai terrassé). Je vous conseille donc de garder une copie du javascript que vous pouvez télécharger <a href="http://so.fun.free.fr/modules/commun/scripts/rollover_flou.js" target="_blank">ici</a>. (Avec Firefox, il faut faire un "click droit" sur le lien puis "Enregistrer la cible du lien sous..."). Dans le cas de utilisation de votre copie du fichier javascript, il vous faut remplacer l'adresse par la votre.<br>
<br>
Bien sur, comme il s'agit de javascript, les utilisateurs d'overblog qui sont toujours en mode "Confiance" devront attendre de passer en mode "Privilège" pour pouvoir l'utiliser.<br>
<br>
Voila, je pense que ça devrait suffire comme explication, mais n'hésitez pas à demander des précisions.<br>
Je vous invite également à laisser un commentaire avec le lien de vos réalisation afin de montrer que ça marche ailleurs qu'ici.<br>
J'invite également les utilisateurs de Mac à me confirmer le bon fonctionnement de cet outils sur leur navigateur préféré ou à m'informer de tout problème car je n'ai testé que sous Windows XP avec Internet Explorer 6.0 et Firefox 1.5 (le tout en version française).</td>
					<td width="15"></td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
	</tr>
</table>
</fieldset>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td align="right">publié par Forrest<br><nobr><a href="/modules/blog/article.php?id_article=20&affiche_commentaire=true">commentaires ()</a></nobr><br>
		</td>
	</tr>
</table>
<br><center>
			<a href="liste_articles.php?page=1">Suivant</a>
		</center>
    [id_categorie] => aucune
    [page] => 0
    [tmstp_date] => 
    [valeurs_template] => Array
        (
            [{bandeau}] => 	<table align="center" width="100%" height="120" cellpadding="0" cellspacing="0" border="0">
		<tr height="100">
			<td width="100%">
				<table align="center" class="fond-titre1" width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
					<tr height="60">
						<td>
							<a href="/">
							<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="450" height="60" id="Banniere_SOFUN" align="middle">
							<param name="allowScriptAccess" value="sameDomain" />
							<param name="movie" value="/modules/commun/flash/Banniere_SOFUN.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#ffffff" />
							<embed src="/modules/commun/flash/Banniere_SOFUN.swf" quality="high" wmode="transparent" bgcolor="#ffffff" width="450" height="60" name="Banniere_SOFUN" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
							</object>
							
							</a>
						</td>
						<td align="right">
							<img src="/modules/commun/images/cityhunter.png" width="292" height="90" border="0" align="middle" alt="City Hunter">
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr height="20">
			<td>
				<table width="100%" cellpadding="0" cellspacing="0" border="0">
					<tr height="20" class="fond-titre2">
						<td>Utilisateur : <a href="/modules/login/login_form.php"><font color="#33ff33">anonyme</font></a>&nbsp;&nbsp;
						</td>
						<td align="right">
							Samedi 20 Mars 2010&nbsp;
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
            [{navigation}] => <script language="JavaScript" src="/modules/commun/scripts/navigation.js">
</script>

<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="15">
		<td ></td>
	</tr>
	<tr>
		<td>
			<a href="http://clustrmaps.com/counter/maps.php?url=http://so.fun.free.fr&type=small&clusters=no&map=world" id="clustrMapsLink" target="_blank">
			<img src="http://clustrmaps.com/counter/index2.php?url=http://so.fun.free.fr" border=0 alt="Provenance géographique des visiteurs"
			onError="this.onError=null; this.src='http://www.meetomatic.com/images/clustrmaps-back-soon.jpg'; document.getElementById('clustrMapsLink').href='http://clustrmaps.com/'" width="160" height="106">
			</a>
		</td>
	</tr>
</table>

<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25">
		<td></td>
	</tr>
</table>
<div id="div_nav_gauche_1"></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25">
		<td></td>
	</tr>
</table>
<div id="div_nav_gauche_2"></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25">
		<td></td>
	</tr>
</table>
<div id="div_nav_gauche_3"></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25">
		<td></td>
	</tr>
</table>
<div id="div_nav_gauche_4"></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25">
		<td></td>
	</tr>
</table>
<div id="div_nav_gauche_5"></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25">
		<td></td>
	</tr>
</table>
<div id="div_nav_gauche_6"></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25">
		<td></td>
	</tr>
</table>
<div id="div_nav_gauche_7"></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25">
		<td></td>
	</tr>
</table>
<div id="div_nav_gauche_8"></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25">
		<td></td>
	</tr>
</table>
<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td align="center"><input type="button" value="RAZ Menu" onClick="navigationGaucheRAZ()"></td>
	</tr>
</table>
<script language="JavaScript" src="/modules/commun/scripts/navigation.js">
</script>

<div id="div_nav_gauche_modules" style="display:none">
<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25" class="fond-titre1">
		<td align="center">
			<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
				<tr height="10">
					<td width="10" style="background-image:url('/modules/commun/images/triangle_haut.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_modules', 'haut')"></td>
					<td align="center" rowspan="2"><b>Navigation</b></td>
					<td align="center" rowspan="2" width="10"></td>
				</tr>
				<tr height="10">
					<td width="10" style="background-image:url('/modules/commun/images/triangle_bas.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_modules', 'bas')"></td>
				</tr>
			</table>
		</td>
	</tr>
	<tr class="fond-titre2">
		<td>
			<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0" class="nav_gauche_2">
				<tr valign="top" onMouseOut="menuOut(1)">
					<a href="/modules/commun/"><td onMouseOver="menuOver(1)" id="menu1" onClick="window.open('/modules/commun/','_self')" align="center">Accueil</td></a>
				</tr>
				<tr valign="top" onMouseOut="menuOut(2)">
					<a href="/modules/blog/"><td onMouseOver="menuOver(2)" id="menu2" onClick="window.open('/modules/blog/','_self')" align="center">Weblog</td></a>
				</tr>
				<tr valign="top" onMouseOut="menuOut(3)">
					<a href="/modules/chat/"><td onMouseOver="menuOver(3)" id="menu3" onClick="window.open('/modules/chat/','_self')" align="center">Chat</td></a>
				</tr>
				<tr valign="top" onMouseOut="menuOut(4)">
					<a href="/modules/moi/intro.php"><td onMouseOver="menuOver(4)" id="menu4" onClick="window.open('/modules/moi/intro.php','_self')" align="center">CV</td></a>
				</tr>
				<tr valign="top" onMouseOut="menuOut(5)">
					<a href="/modules/liens/"><td onMouseOver="menuOver(5)" id="menu5" onClick="window.open('/modules/liens/','_self')" align="center">Liens</td></a>
				</tr>
				<tr valign="top" onMouseOut="menuOut(6)">
					<a href="/modules/contact/"><td onMouseOver="menuOver(6)" id="menu6" onClick="window.open('/modules/contact/','_self')" align="center">Contact</td></a>
				</tr>
				
			</table>
		</td>
	</tr>
</table>
</div><div id="div_nav_gauche_blog" style="display:none">
		<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
			<tr height="25"class="fond-titre1">
				<td align="center">
					<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
						<tr height="10">
							<td width="10" style="background-image:url('/modules/commun/images/triangle_haut.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_blog', 'haut')"></td>
							<td align="center" rowspan="2"><b>Catégories Blog</b></td>
							<td align="center" rowspan="2" width="10"></td>
						</tr>
						<tr height="10">
							<td width="10" style="background-image:url('/modules/commun/images/triangle_bas.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_blog', 'bas')"></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr class="fond-titre2">
				<td>
					<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0" class="nav_gauche_2">
						<tr onMouseOut="menuOut(10)">
							<a href="/modules/blog/liste_articles.php?id_categorie=0"><td onMouseOver="menuOver(10)" id="menu10" onClick="window.open('/modules/blog/liste_articles.php?id_categorie=0','_self')">Divers</td></a>
						</tr>
	
			<tr onMouseOut="menuOut(11)">
				<a href="/modules/blog/liste_articles.php?id_categorie=1"><td onMouseOver="menuOver(11)" id="menu11" onClick="window.open('/modules/blog/liste_articles.php?id_categorie=1','_self')">Scripts</td></a>
			</tr><tr height="15"><td></td></tr>
		<tr onMouseOut="menuOut(12)">
			<a href="/modules/agenda/"><td onMouseOver="menuOver(12)" id="menu12" onClick="window.open('/modules/agenda/','_self')">Calendrier</td></a>
		</tr>
	
		<tr onMouseOut="menuOut(13)">
			<a href="/modules/blog/article.php"><td onMouseOver="menuOver(13)" id="menu13" onClick="window.open('/modules/blog/article.php','_self')">Article au hasard</td></a>
		</tr>
	
					</table>
				</td>
			</tr>
		</table>
	</div><div id="div_nav_gauche_recherche" style="display:none">		<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
			<tr height="25"class="fond-titre1">
				<td align="center">
					<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
						<tr height="10">
							<td width="10" style="background-image:url('/modules/commun/images/triangle_haut.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_recherche', 'haut')"></td>
							<td align="center" rowspan="2"><b>Rechercher</b></td>
							<td align="center" rowspan="2" width="10"></td>
						</tr>
						<tr height="10">
							<td width="10" style="background-image:url('/modules/commun/images/triangle_bas.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_recherche', 'bas')"></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr class="fond-titre2">
				<td>
					<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0" class="nav_gauche_2">
					<form method="POST" action="/modules/blog/recherche.php">
						<tr height="10"><td></td></tr>
						<tr>
							<td><input type="text" id="str_recherche" name="str_recherche" size="16"></td>
						</tr>
						<tr>
							<td><input type="submit" id="btn_rechercher" name="btn_rechercher" value="OK"></td>
						</tr>
						<tr height="10"><td></td></tr>
					</form>
					</table>
				</td>
			</tr>
		</table>
</div><div id="div_nav_gauche_commentaires" style="display:none"><table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25" class="fond-titre1">
		<td align="center">
			<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
				<tr height="10">
					<td width="10" style="background-image:url('/modules/commun/images/triangle_haut.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_commentaires', 'haut')"></td>
					<td align="center" rowspan="2"><b>Commentaires</b></td>
					<td align="center" rowspan="2" width="10"></td>
				</tr>
				<tr height="10">
					<td width="10" style="background-image:url('/modules/commun/images/triangle_bas.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_commentaires', 'bas')"></td>
				</tr>
			</table>
		</td>
	</tr>
	<tr class="fond-titre2">
		<td>
			
		</td>
	</tr>
</table>
</div><div id="div_nav_gauche_nuancier" style="display:none"><script>
function ChangeVisibilite(id_element, visible)
{
	elt = document.getElementById(id_element);

	if (visible==false)
	{
		elt.style.visibility = "hidden";
		elt.style.height = 0;
	}
	else
	{
		elt.style.visibility = "visible";
		elt.style.height = "";
	}
}
</script>

<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25" class="fond-titre1">
		
		<td>
			<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
				<tr height="10">
					<td width="10" style="background-image:url('/modules/commun/images/triangle_haut.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_nuancier', 'haut')"></td>
					<td align="center" rowspan="2"><b>Nuancier</b></td>
					<td align="center" rowspan="2" width="10"></td>
				</tr>
				<tr height="10">
					<td width="10" style="background-image:url('/modules/commun/images/triangle_bas.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_nuancier', 'bas')"></td>
				</tr>
			</table>
		</td>
	</tr>
	<tr class="fond-titre2">
		<td>
			
			<center>
			.fond-navigateur<br>
			<input type="text" value="#dddddd" size="7" id="champ-.fond-navigateur" onChange="SetClassBgcolor('.fond-navigateur', this.value); SetCookie('css-.fond-navigateur', this.value)"><input type="button" value="ok"><br>
			.fond-cadrepage<br>
			<input type="text" value="#ccddff" size="7" id="champ-.fond-cadrepage" onChange="SetClassBgcolor('.fond-cadrepage', this.value); SetCookie('css-.fond-cadrepage', this.value)"><input type="button" value="ok"><br>
			.fond-page<br>
			<input type="text" value="#ccddff" size="7" id="champ-.fond-page" onChange="SetClassBgcolor('.fond-page', this.value); SetCookie('css-.fond-page', this.value)"><input type="button" value="ok"><br>
			.fond-contenu<br>
			<input type="text" value="#ccddff" size="7" id="champ-.fond-contenu" onChange="SetClassBgcolor('.fond-contenu', this.value); SetCookie('css-.fond-contenu', this.value)"><input type="button" value="ok"><br>
			.fond-titre1<br>
			<input type="text" value="#3333ff" size="7" id="champ-.fond-titre1" onChange="SetClassBgcolor('.fond-titre1', this.value); SetCookie('css-.fond-titre1', this.value)"><input type="button" value="ok"><br>
			.fond-titre2<br>
			<input type="text" value="#5555ff" size="7" id="champ-.fond-titre2" onChange="SetClassBgcolor('.fond-titre2', this.value); SetCookie('css-.fond-titre2', this.value)"><input type="button" value="ok"><br>
			.article-blog<br>
			<input type="text" value="#ccddff" size="7" id="champ-.article-blog" onChange="SetClassBgcolor('.article-blog', this.value); SetCookie('css-.article-blog', this.value)"><input type="button" value="ok"><br>
			.commentaire-blog<br>
			<input type="text" value="#ccddff" size="7" id="champ-.commentaire-blog" onChange="SetClassBgcolor('.commentaire-blog', this.value); SetCookie('css-.commentaire-blog', this.value)"><input type="button" value="ok"><br>
			liens<br>
			<input type="text" value="blue" size="7" id="champ-A" onChange="SetClassColor('A', this.value); SetCookie('css-A', this.value)"><input type="button" value="ok"><br>
			police<br>
			<input type="text" value="Comics Sans MS" size="7" id="champ-BODY-font" onChange="SetClassFont('BODY', this.value); SetCookie('css-BODY-font', this.value)"><input type="button" value="ok"><br>
			<input type="button" value="RAZ" onClick="RazParametresUtilisateur()"><br>
			</center>
			
		</td>
	</tr>
</table>
<script language="javascript">
	InitialyseNuancier();
</script></div><div id="div_nav_gauche_blog_stats" style="display:none">		<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
			<tr height="25"class="fond-titre1">
				<td align="center">
					<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
						<tr height="10">
							<td width="10" style="background-image:url('/modules/commun/images/triangle_haut.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_blog_stats', 'haut')"></td>
							<td align="center" rowspan="2"><b>Stats Blog</b></td>
							<td align="center" rowspan="2" width="10"></td>
						</tr>
						<tr height="10">
							<td width="10" style="background-image:url('/modules/commun/images/triangle_bas.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_blog_stats', 'bas')"></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr class="fond-titre2">
				<td>
					<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
					<form method="POST" action="/modules/blog/recherche.php">
						<tr height="10"><td></td></tr>
						<tr>
							<td align="center" style="font-size:12"><nobr> commentaires</nobr><br>dans<br><nobr>15 articles</nobr></td>
						</tr>
						<tr height="10"><td></td></tr>
					</form>
					</table>
				</td>
			</tr>
		</table>
</div><div id="div_nav_gauche_publicite" style="display:none">		<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
			<tr height="25"class="fond-titre1">
				<td align="center">
					<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
						<tr height="10">
							<td width="10" style="background-image:url('/modules/commun/images/triangle_haut.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_publicite', 'haut')"></td>
							<td align="center" rowspan="2"><b>Publicité</b></td>
							<td align="center" rowspan="2" width="10"></td>
						</tr>
						<tr height="10">
							<td width="10" style="background-image:url('/modules/commun/images/triangle_bas.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_publicite', 'bas')"></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr class="fond-titre2">
				<td>
					<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
					<form method="POST" action="/modules/blog/recherche.php">
						<tr height="10"><td></td></tr>
						<tr>
							<td align="center" style="font-size:12">
<script type="text/javascript">
google_ad_client = "pub-4084643915209244";
google_ad_width = 125;
google_ad_height = 125;
google_ad_format = "125x125_as";
google_ad_type = "text_image";
google_ad_channel ="";
</script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script><br>
<script type="text/javascript">
google_ad_client = "pub-4084643915209244";
google_ad_width = 110;
google_ad_height = 32;
google_ad_format = "110x32_as_rimg";
google_cpa_choice = "CAAQieybzgEaCPd6JB7xAZlbKNGZ5HQ";
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
							</td>
						</tr>
						<tr height="10"><td></td></tr>
					</form>
					</table>
				</td>
			</tr>
		</table>
</div><div id="div_nav_gauche_autres_blogs" style="display:none">		<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
			<tr height="25"class="fond-titre1">
				<td align="center">
					<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
						<tr height="10">
							<td width="10" style="background-image:url('/modules/commun/images/triangle_haut.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_autres_blogs', 'haut')"></td>
							<td align="center" rowspan="2"><b>Autres Blogs</b></td>
							<td align="center" rowspan="2" width="10"></td>
						</tr>
						<tr height="10">
							<td width="10" style="background-image:url('/modules/commun/images/triangle_bas.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_autres_blogs', 'bas')"></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr class="fond-titre2">
				<td>
					<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
					<form method="POST" action="/modules/blog/recherche.php">
						<tr height="10"><td></td></tr>
						<tr>
							<td align="center" style="font-size:12"><a href="http://ougl.over-blog.com" target="_blank"><font color="#000000">Ludo, prof au Japon</font></a></td>
						</tr>
						<tr>
							<td align="center" style="font-size:12"><a href="http://iroiro.over-blog.com" target="_blank"><font color="#000000">iroiro</font></a></td>
						</tr>
						<tr>
							<td align="center" style="font-size:12"><a href="http://paristokyo.over-blog.com" target="_blank"><font color="#000000">Paris-Tokyo</font></a></td>
						</tr>
						<tr height="10"><td></td>
						</tr>
						<tr>
							<td align="center" style="font-size:12"><a href="http://so.fun.free.fr/modules/espace_perso/url_hasard.php?login_utilisateur=Forrest" target="_blank"><font color="#000000">Hasard parmi 12 blogs</font></a></td>
						</tr>
						<tr height="10"><td></td>
						</tr>
					</form>
					</table>
				</td>
			</tr>
		</table>
</div><script src="/modules/commun/scripts/modules_navigation.js"></script>
            [{contenu}] => <script language="javascript">
	function SetBgColor(id_element, couleur)
	{
		elt = document.getElementById(id_element);
		elt.style.background = couleur;
	}
</script>
<title>SOFUN - Blog, article : Diaporama javascript en fondu enchainé</title>
<font size="-2">dimanche 05 mars 2006 - 23:09</font>
<fieldset id="article22" class="article-blog">
<legend><a href="/modules/blog/article.php?id_article=22"><font color="black"><b>Diaporama javascript en fondu enchainé</b></font></a></legend>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>
			<table width="100%" cellpadding="0" cellspacing="0" border="0">
				<tr>
					<td width="15"></td>
					<td>Depuis une dixaine de jours, j'ai enfin pris le temps d'ajouter une amélioration à mon diaporama en javascript : la transition progressive en dégradé flou.<br>
Ce soir, comme je désespérait de ne trouver de photo pour illustrer joliement cette nouvelle fonctionnalité, je me suis souvenu qu'il m'est arrivé de prendre des vacances. Voici donc sept photos prises aux Arcs (bien qu'il eu été plus facile de les prendre à l'appareil photo), en 2004.<br>
Si je me souviens bien, la photo la moins enneigée correspond à la vallée de Bourg Saint Maurice (t'as avalé le boursin Maurice ?).<br>
<br>
<!-- Début diaporama -->
<script src="http://so.fun.free.fr/modules/commun/scripts/diaporama_objet.js"></script>
<script>
	nouveau_id_diaporama = monDiaporama.length;
	monDiaporama[nouveau_id_diaporama] = new Diaporama(nouveau_id_diaporama, 100, 2,	2000, 600, 450, "flou");
	monDiaporama[nouveau_id_diaporama].ajoutePhoto("http://so.fun.free.fr/modules/blog/photos/les-arcs_2004_1.jpg");
	monDiaporama[nouveau_id_diaporama].ajoutePhoto("http://so.fun.free.fr/modules/blog/photos/les-arcs_2004_2.jpg");
	monDiaporama[nouveau_id_diaporama].ajoutePhoto("http://so.fun.free.fr/modules/blog/photos/les-arcs_2004_3.jpg");
	monDiaporama[nouveau_id_diaporama].ajoutePhoto("http://so.fun.free.fr/modules/blog/photos/les-arcs_2004_4.jpg");
	monDiaporama[nouveau_id_diaporama].ajoutePhoto("http://so.fun.free.fr/modules/blog/photos/les-arcs_2004_5.jpg");
	monDiaporama[nouveau_id_diaporama].ajoutePhoto("http://so.fun.free.fr/modules/blog/photos/les-arcs_2004_6.jpg");
	monDiaporama[nouveau_id_diaporama].ajoutePhoto("http://so.fun.free.fr/modules/blog/photos/les-arcs_2004_7.jpg");
	//monDiaporama[nouveau_id_diaporama].masquerPanneauCommande();
	monDiaporama[nouveau_id_diaporama].ajouteCadre(3,"#000000");
	monDiaporama[nouveau_id_diaporama].placeDiaporama();
	monDiaporama[nouveau_id_diaporama].testImagesOk();
</script>
<!-- Fin diaporama -->

<br>
Passons maintenant à la partie technique :<br>
Pour la mise en place, la procédure est exactement la même que pour le <a href="http://so.fun.free.fr/modules/blog/article.php?id_article=16">diaporama en "slide"</a> (je ne trouve pas de mot français pour le désigner). Il suffit ensuite de modifier la ligne :<br>
<br>
<fieldset>
<pre >
<div style="font-family:arial">
monDiaporama[nouveau_id_diaporama] = new Diaporama(nouveau_id_diaporama, <b>50</b>, <b>10</b>, <b>2000</b>, <b>500</b>, <b>600</b>);
</div></pre>
</fieldset>
<br>
... en y ajoutant un nouveau paramètre : <br>
<br>
<fieldset>
<pre >
<div style="font-family:arial">
monDiaporama[nouveau_id_diaporama] = new Diaporama(nouveau_id_diaporama, <b>100</b>, <b>2</b>, <b>2000</b>, <b>500</b>, <b>600</b>, <b>"flou"</b>);
</div></pre>
</fieldset>
<br>
La ligne "<b>new Diaporama</b>" s'utilise alors ainsi :
	<ul>
	<li> <b>100</b> : temps, en millisecondes, entre chaque étape de réduction de la photo au premier plan. Plus le nombre est grand, plus la transition est longue, et inversement.
	<li> <b>2</b> : pourcentage de progression effectué à chaque étape. Varie entre 1 et 100. Plus le nombre est petit, plus la transition est fluide et lente.
	<li> <b>2000</b> : temps de pause, en millisecondes, entre chaque transition.
	<li> <b>500</b> : largeur des photos en pixel. La photo réelle doit avoir exactement la même largeur que celle que vous aurez définit ici car elle ne sera pas redimentionnée automatiquement comme avec une balise IMG.
	<li> <b>600</b> : hauteur des photos en pixel. La photo réelle doit avoir exactement la même hauteur que celle que vous aurez définit ici car elle ne sera pas redimentionnée automatiquement comme avec une balise IMG.
	</ul>

Pour le premier paramètre, je conseille de ne pas le diminuer en dessous de 50 : mon PC, bien qu'il tienne la route, travaille à plus de 50% lors d'une transition à cette cadence, donc il faut penser à vos visiteurs qui peuvent avoir une machine qui commence à souffrir.<br>
De plus, 100 et 2 donnent à peu près le même résultat que 50 et 1.<br>
La durée théorique d'une transition peut être calculée ainsi :
<ul>
<li><b>paramètre_1 x 100 / paramètre_2 = durée en millisecondes.</b>
<li>exemple : 100 x 100 / 2 = 2000 millisecondes, soit 2 secondes.
</ul>

Voila, je pense que ça devrait suffire comme explication en plus des explications du <a href="http://so.fun.free.fr/modules/blog/article.php?id_article=16">diaporama en "slide"</a>, mais n'hésitez pas à demander des précisions.<br>
Ce script a été testé sur Firefox 1.5 et Internet Explorer 6 dans leur version Windows uniquement.<br>
Je vous invite également à laisser un commentaire avec le lien de vos diaporamas afin de montrer que ça marche ailleurs qu'ici.<br>
<br>
11/03/06 : après avoir parcouru quelques sites, j'ai vu qu'on appelle cet effet le "fondu enchaîné". Je ne m'en souvenait plus.</td>
					<td width="15"></td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
	</tr>
</table>
</fieldset>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td align="right">publié par Forrest<br><nobr><a href="/modules/blog/article.php?id_article=22&affiche_commentaire=true">commentaires ()</a></nobr><br>
		</td>
	</tr>
</table>
<br><script language="javascript">
	function SetBgColor(id_element, couleur)
	{
		elt = document.getElementById(id_element);
		elt.style.background = couleur;
	}
</script>
<title>SOFUN - Blog, article : Pour une vie sans tabac</title>
<font size="-2">vendredi 27 janvier 2006 - 21:57</font>
<fieldset id="article21" class="article-blog">
<legend><a href="/modules/blog/article.php?id_article=21"><font color="black"><b>Pour une vie sans tabac</b></font></a></legend>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>
			<table width="100%" cellpadding="0" cellspacing="0" border="0">
				<tr>
					<td width="15"></td>
					<td>Depuis quelques temps, j'ai pu découvrir de nouvelles campagnes publicitaires dont le but est de nous sensibiliser sur le tabagisme en insistant sur le ridicule qu'il suscite. Je regrette seulement que ce genre d'annonce télévisuelle ne soit que très peu diffusé.<br>
<br>
La semaine dernière, j'ai finalament mis la main sur le site officiel de cette campagne publicitaire : <a href="http://fr.help-eu.com/pages/index-1.html" target="_blank">Pour une vie sans tabac</a><br>
<br>
Sur ce site, on peut trouver les trois vidéos suivantes :<br>
<br>
<center>
<a href="/modules/download/pour_une_vie_sans_tabac_1.wmv" target="_blank"><img src="/modules/blog/photos/pour_une_vie_sans_tabac_1.jpg" border="0"></a><br>
<br>
<a href="/modules/download/pour_une_vie_sans_tabac_2.wmv" target="_blank"><img src="/modules/blog/photos/pour_une_vie_sans_tabac_2.jpg" border="0"></a><br>
<br>
<a href="/modules/download/pour_une_vie_sans_tabac_3.wmv" target="_blank"><img src="/modules/blog/photos/pour_une_vie_sans_tabac_3.jpg" border="0"></a><br>
</center>
<br>
Il n'y a pas grand chose à ajouter, les images parlent mieux que les mots.</td>
					<td width="15"></td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
	</tr>
</table>
</fieldset>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td align="right">publié par Forrest<br><nobr><a href="/modules/blog/article.php?id_article=21&affiche_commentaire=true">commentaires ()</a></nobr><br>
		</td>
	</tr>
</table>
<br><script language="javascript">
	function SetBgColor(id_element, couleur)
	{
		elt = document.getElementById(id_element);
		elt.style.background = couleur;
	}
</script>
<title>SOFUN - Blog, article : Roll-Over progressif en javascript</title>
<font size="-2">mercredi 14 décembre 2005 - 21:28</font>
<fieldset id="article20" class="article-blog">
<legend><a href="/modules/blog/article.php?id_article=20"><font color="black"><b>Roll-Over progressif en javascript</b></font></a></legend>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>
			<table width="100%" cellpadding="0" cellspacing="0" border="0">
				<tr>
					<td width="15"></td>
					<td>Il y a quelques temps, je faisai découvrir mon rollover progressif à l'occasion du <a href="http://so.fun.free.fr/modules/blog/article.php?id_article=15">coloriage</a> de mon site.<br>
A partir d'aujourd'hui, vous pourrez vous même utiliser de petit outil que j'ai réalisé moi même (ce n'est pas une simple récupération sur le net).<br>
Afin de montrer les possibilités de ce module, positionnez votre souris au dessus de la photo et celle-ci va être progressivement remplacée par une autre. Avec les réglages sur cet article, la transition est complète en trois secondes à peu de choses près.<br>

<br>
<center>
<script src="http://so.fun.free.fr/modules/commun/scripts/rollover_flou.js"></script>
<script>
	nouveau_id_rollover = monRolloverFlou.length;
	monRolloverFlou[nouveau_id_rollover] = new RolloverFlou(nouveau_id_rollover, 25, 1,	1000, 163, 200);
	monRolloverFlou[nouveau_id_rollover].ajouteCadre(3, "#000000");
	monRolloverFlou[nouveau_id_rollover].place("http://so.fun.free.fr/modules/blog/photos/forrest_normal.jpg", "http://so.fun.free.fr/modules/blog/photos/forrest_vieillit.jpg");
</script>
</center>
<br>
<br>
Je me suis moi-même surpris par la qualité de cette transition (avec ces deux photos en particulier) qui n'utilise que deux images, comme un rollover classique. Concernant mon aspect vieillit, celui-ci a été réalisé à l'aide du logiciel <a href="http://www.dcs.st-and.ac.uk/~morph/Transformer/" target="_blank">Face Transformer</a> découvert dans <a href="http://ougl.over-blog.com/article-658471.html" target="_blank">l'article de Ludo</a>. Un autre exemple de mise en application de ce rollover progressif est visible sur <a href="http://iroiro.over-blog.com/article-1154909.html" target="_blank">cet article</a> de MP qui n'a pas résisté à la tentation.<br>
<br>
Quant à l'utilisation de ce module, c'est très similaire à l'utilisation du <a href="http://so.fun.free.fr/modules/blog/article.php?id_article=16">diaporama</a> et en voici le mode d'emploi :
<ul>
<li> insérez le code suivant à l'emplacement souhaité :<br>
<table align="center">
<tr>
<td>
<fieldset>
<pre ><div style="font-family:arial">&#60;script src="<b>http://so.fun.free.fr/modules/commun/scripts/rollover_flou.js</b>"&#62;&#60;/script&#62;
&#60;script&#62;
	nouveau_id_rollover = monRolloverFlou.length;
	monRolloverFlou[nouveau_id_rollover] = new RolloverFlou(nouveau_id_rollover, <b>25</b>, <b>1</b>, <b>1000</b>, <b>163</b>, <b>200</b>);
	<i>monRolloverFlou[nouveau_id_rollover].ajouteCadre(<b>3</b>, <b>"#000000"</b>);</i>
	monRolloverFlou[nouveau_id_rollover].place("<b>http://mon.serveur.fr/.../photo_01.jpg</b>",
		"<b>http://mon.serveur.fr/.../photo_02.jpg</b>");
&#60;/script&#62;</div></pre>
</fieldset>
</td>
</tr>
</table>
<br>
<li>apportez les modification suivantes :
	<ul>
	<li>ligne "<b>new RolloverFlou</b>" :
		<ul>
		<li> <b>25</b> : temps, en millisecondes, entre chaque variation de l'opacité des photos. Plus le nombre est grand, plus la transition est longue, et inversement.
		<li> <b>1</b> : pourcentage de variation de l'opacité à chaque cycle. Varie entre 1 et 99. Plus le nombre est petit, plus la transition est fluide et longue.
		<li> <b>1000</b> : ce paramètre ne sert à rien pour le moment. Ce n'est qu'un résidut provenant du diaporama. Pas besoin d'y toucher.
		<li> <b>163</b> : largeur des photos en pixel. La photo réelle doit avoir exactement cette largeur car elle ne sera pas redimentionnée automatiquement comme avec une balise IMG.
		<li> <b>200</b> : hauteur des photos en pixel. La photo réelle doit avoir exactement cette hauteur car elle ne sera pas redimentionnée automatiquement comme avec une balise IMG.
		</ul>
	<li>ligne "<b>ajouteCadre</b>" : une ligne facultative qui permet d'ajouter une bordure au rollover.
		<ul>
		<li><b>3</b> : épaisseur de la bordure en pixels.
		<li><b>#000000</b> : code couleur pour la bordure.
		</ul>
	<li>ligne "<b>place</b>" : permet de définir les deux photos du rollover et d'afficher le résultat. La ligne est volontairement découpée en deux lignes, mais il s'agit là d'un choix de lisibilité. N'oubliez pas de mettre les adresses de vos photos à la place des miennes ;)
	</ul>
</ul>
Si vous conservez la toute première ligne intacte, le script sera utilisé à partir de ce site. Cela ne me pose aucun problème. Je tiens seulement à préciser que celui-ci peut être modifié à tout moment afin d'apporter des corrections pour résoudre les problèmes qui me sont signalés ou d'y ajouter de nouvelles fonctionnalités. En revanche, et bien que je fasse tout ce qui m'est possible pour éviter d'y apporter tout problème nouveau par rapport aux versions précédentes, il n'est pas impossible d'obtenir des effets secondaires indésirables (je ne parles pas de risques de voir Jean-Pierre COFFE débarquer chez vous pour critiquer votre stock alimentaire, ça ne m'est jamais arrivé sinon une crise cardiaque l'aurai terrassé). Je vous conseille donc de garder une copie du javascript que vous pouvez télécharger <a href="http://so.fun.free.fr/modules/commun/scripts/rollover_flou.js" target="_blank">ici</a>. (Avec Firefox, il faut faire un "click droit" sur le lien puis "Enregistrer la cible du lien sous..."). Dans le cas de utilisation de votre copie du fichier javascript, il vous faut remplacer l'adresse par la votre.<br>
<br>
Bien sur, comme il s'agit de javascript, les utilisateurs d'overblog qui sont toujours en mode "Confiance" devront attendre de passer en mode "Privilège" pour pouvoir l'utiliser.<br>
<br>
Voila, je pense que ça devrait suffire comme explication, mais n'hésitez pas à demander des précisions.<br>
Je vous invite également à laisser un commentaire avec le lien de vos réalisation afin de montrer que ça marche ailleurs qu'ici.<br>
J'invite également les utilisateurs de Mac à me confirmer le bon fonctionnement de cet outils sur leur navigateur préféré ou à m'informer de tout problème car je n'ai testé que sous Windows XP avec Internet Explorer 6.0 et Firefox 1.5 (le tout en version française).</td>
					<td width="15"></td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
	</tr>
</table>
</fieldset>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td align="right">publié par Forrest<br><nobr><a href="/modules/blog/article.php?id_article=20&affiche_commentaire=true">commentaires ()</a></nobr><br>
		</td>
	</tr>
</table>
<br><center>
			<a href="liste_articles.php?page=1">Suivant</a>
		</center>
            [{pied}] => <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<a href="/modules/rss/rss2.php"><img src="/modules/commun/images/rss2.gif" border="0"></a><br>
<a href="http://www.pagerank.fr/" title="Mon PageRank" target="_blank"><img src="http://www.pagerank.fr/pagerank-actuel.gif?uri=so.fun.free.fr/" style="border: none;" alt="PageRank Actuel"/></a><br>

Nombre de surfeurs égarés en ce moment : {nb_sessions}
<script language="JavaScript" src="http://www.gvisit.com/record.php?sid=37a9040918617690061739d49e688130" type="text/javascript" DEFER></script>
</td>
<td align="right">
<script type="text/javascript">
google_ad_client = "pub-4084643915209244";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text_image";
google_ad_channel ="";
google_color_border = "33FF33";
google_color_bg = "FF9933";
google_color_link = "000000";
google_color_url = "666666";
google_color_text = "333333";
</script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td>
</tr>
</table>

            [{user_id}] => -1
            [{nb_sessions}] => 109
            [{minilogo_module}] => minilogo_blog.gif
        )

    [template] => c_template Object
        (
            [page] => <!--<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">-->
<html>
<head>
	<META http-equiv="pragma" content="no-cache">
	<META name="Author" lang="fr" content="David LEFORESTIER">
	<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<link href="/modules/commun/css/style.css" rel=stylesheet type=text/css>
	<link rel="alternate" type="application/rss+xml" title="SOFUN - Le Site Où il Fallait Un Nom" href="/modules/rss/rss2.php">
	<link rel="SHORTCUT ICON" HREF="/favicon.ico">
	<script type="text/javascript" src="/modules/commun/scripts/pngfix.js"></script>
	<script language="javascript" src="/modules/commun/scripts/global.js">
	</script>
	<!-- début google analytics -->
	<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
	</script>
	<script type="text/javascript">
	_uacct = "UA-174399-1";
	urchinTracker();
	</script>
	<!-- fin google analytics -->
</head>

<body leftmargin="0" class="fond-navigateur">
<!-- Début tableau pour dessiner le cadre -->
<table align="center" class="fond-cadrepage" width="95%" height="100%" cellpadding="10" cellspacing="0" border="1" bordercolor="#777777">
<tr valign="top">
<td>

	<table align="center" class="fond-page" width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
		<tr height="100">
			<td width="100%">
				<!-- Début ligne 1 -->
				<!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->
				<table align="center" width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
					<tr height="60">
						<td>
								<table align="center" width="100%" height="120" cellpadding="0" cellspacing="0" border="0">
		<tr height="100">
			<td width="100%">
				<table align="center" class="fond-titre1" width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
					<tr height="60">
						<td>
							<a href="/">
							<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="450" height="60" id="Banniere_SOFUN" align="middle">
							<param name="allowScriptAccess" value="sameDomain" />
							<param name="movie" value="/modules/commun/flash/Banniere_SOFUN.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#ffffff" />
							<embed src="/modules/commun/flash/Banniere_SOFUN.swf" quality="high" wmode="transparent" bgcolor="#ffffff" width="450" height="60" name="Banniere_SOFUN" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
							</object>
							
							</a>
						</td>
						<td align="right">
							<img src="/modules/commun/images/cityhunter.png" width="292" height="90" border="0" align="middle" alt="City Hunter">
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr height="20">
			<td>
				<table width="100%" cellpadding="0" cellspacing="0" border="0">
					<tr height="20" class="fond-titre2">
						<td>Utilisateur : <a href="/modules/login/login_form.php"><font color="#33ff33">anonyme</font></a>&nbsp;&nbsp;
						</td>
						<td align="right">
							Samedi 20 Mars 2010&nbsp;
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
						</td>
					</tr>
				</table>
				<!-- //////////////////////////////////////////////////////////////////////////////////////////// -->
				<!-- Fin ligne 1 -->
			</td>
		</tr>
		<tr valign="top">
			<td width="100%">
				<!-- Début ligne 3 -->
				<!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->
				<table align="center" width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
					<!-- début définition de la largeur des colonnes -->
					<tr valign="top" height="1" style="font-size:1px">
						<td width="160">&nbsp;
						</td>
						<td width="25">&nbsp;
						</td>
						<td class="fond-contenu">&nbsp;
						</td>
					</tr>
					<!-- fin définition de la largeur des colonnes -->
					<tr valign="top">
						<td width="160">
							<script language="JavaScript" src="/modules/commun/scripts/navigation.js">
</script>

<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="15">
		<td ></td>
	</tr>
	<tr>
		<td>
			<a href="http://clustrmaps.com/counter/maps.php?url=http://so.fun.free.fr&type=small&clusters=no&map=world" id="clustrMapsLink" target="_blank">
			<img src="http://clustrmaps.com/counter/index2.php?url=http://so.fun.free.fr" border=0 alt="Provenance géographique des visiteurs"
			onError="this.onError=null; this.src='http://www.meetomatic.com/images/clustrmaps-back-soon.jpg'; document.getElementById('clustrMapsLink').href='http://clustrmaps.com/'" width="160" height="106">
			</a>
		</td>
	</tr>
</table>

<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25">
		<td></td>
	</tr>
</table>
<div id="div_nav_gauche_1"></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25">
		<td></td>
	</tr>
</table>
<div id="div_nav_gauche_2"></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25">
		<td></td>
	</tr>
</table>
<div id="div_nav_gauche_3"></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25">
		<td></td>
	</tr>
</table>
<div id="div_nav_gauche_4"></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25">
		<td></td>
	</tr>
</table>
<div id="div_nav_gauche_5"></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25">
		<td></td>
	</tr>
</table>
<div id="div_nav_gauche_6"></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25">
		<td></td>
	</tr>
</table>
<div id="div_nav_gauche_7"></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25">
		<td></td>
	</tr>
</table>
<div id="div_nav_gauche_8"></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25">
		<td></td>
	</tr>
</table>
<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td align="center"><input type="button" value="RAZ Menu" onClick="navigationGaucheRAZ()"></td>
	</tr>
</table>
<script language="JavaScript" src="/modules/commun/scripts/navigation.js">
</script>

<div id="div_nav_gauche_modules" style="display:none">
<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25" class="fond-titre1">
		<td align="center">
			<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
				<tr height="10">
					<td width="10" style="background-image:url('/modules/commun/images/triangle_haut.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_modules', 'haut')"></td>
					<td align="center" rowspan="2"><b>Navigation</b></td>
					<td align="center" rowspan="2" width="10"></td>
				</tr>
				<tr height="10">
					<td width="10" style="background-image:url('/modules/commun/images/triangle_bas.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_modules', 'bas')"></td>
				</tr>
			</table>
		</td>
	</tr>
	<tr class="fond-titre2">
		<td>
			<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0" class="nav_gauche_2">
				<tr valign="top" onMouseOut="menuOut(1)">
					<a href="/modules/commun/"><td onMouseOver="menuOver(1)" id="menu1" onClick="window.open('/modules/commun/','_self')" align="center">Accueil</td></a>
				</tr>
				<tr valign="top" onMouseOut="menuOut(2)">
					<a href="/modules/blog/"><td onMouseOver="menuOver(2)" id="menu2" onClick="window.open('/modules/blog/','_self')" align="center">Weblog</td></a>
				</tr>
				<tr valign="top" onMouseOut="menuOut(3)">
					<a href="/modules/chat/"><td onMouseOver="menuOver(3)" id="menu3" onClick="window.open('/modules/chat/','_self')" align="center">Chat</td></a>
				</tr>
				<tr valign="top" onMouseOut="menuOut(4)">
					<a href="/modules/moi/intro.php"><td onMouseOver="menuOver(4)" id="menu4" onClick="window.open('/modules/moi/intro.php','_self')" align="center">CV</td></a>
				</tr>
				<tr valign="top" onMouseOut="menuOut(5)">
					<a href="/modules/liens/"><td onMouseOver="menuOver(5)" id="menu5" onClick="window.open('/modules/liens/','_self')" align="center">Liens</td></a>
				</tr>
				<tr valign="top" onMouseOut="menuOut(6)">
					<a href="/modules/contact/"><td onMouseOver="menuOver(6)" id="menu6" onClick="window.open('/modules/contact/','_self')" align="center">Contact</td></a>
				</tr>
				
			</table>
		</td>
	</tr>
</table>
</div><div id="div_nav_gauche_blog" style="display:none">
		<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
			<tr height="25"class="fond-titre1">
				<td align="center">
					<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
						<tr height="10">
							<td width="10" style="background-image:url('/modules/commun/images/triangle_haut.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_blog', 'haut')"></td>
							<td align="center" rowspan="2"><b>Catégories Blog</b></td>
							<td align="center" rowspan="2" width="10"></td>
						</tr>
						<tr height="10">
							<td width="10" style="background-image:url('/modules/commun/images/triangle_bas.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_blog', 'bas')"></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr class="fond-titre2">
				<td>
					<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0" class="nav_gauche_2">
						<tr onMouseOut="menuOut(10)">
							<a href="/modules/blog/liste_articles.php?id_categorie=0"><td onMouseOver="menuOver(10)" id="menu10" onClick="window.open('/modules/blog/liste_articles.php?id_categorie=0','_self')">Divers</td></a>
						</tr>
	
			<tr onMouseOut="menuOut(11)">
				<a href="/modules/blog/liste_articles.php?id_categorie=1"><td onMouseOver="menuOver(11)" id="menu11" onClick="window.open('/modules/blog/liste_articles.php?id_categorie=1','_self')">Scripts</td></a>
			</tr><tr height="15"><td></td></tr>
		<tr onMouseOut="menuOut(12)">
			<a href="/modules/agenda/"><td onMouseOver="menuOver(12)" id="menu12" onClick="window.open('/modules/agenda/','_self')">Calendrier</td></a>
		</tr>
	
		<tr onMouseOut="menuOut(13)">
			<a href="/modules/blog/article.php"><td onMouseOver="menuOver(13)" id="menu13" onClick="window.open('/modules/blog/article.php','_self')">Article au hasard</td></a>
		</tr>
	
					</table>
				</td>
			</tr>
		</table>
	</div><div id="div_nav_gauche_recherche" style="display:none">		<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
			<tr height="25"class="fond-titre1">
				<td align="center">
					<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
						<tr height="10">
							<td width="10" style="background-image:url('/modules/commun/images/triangle_haut.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_recherche', 'haut')"></td>
							<td align="center" rowspan="2"><b>Rechercher</b></td>
							<td align="center" rowspan="2" width="10"></td>
						</tr>
						<tr height="10">
							<td width="10" style="background-image:url('/modules/commun/images/triangle_bas.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_recherche', 'bas')"></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr class="fond-titre2">
				<td>
					<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0" class="nav_gauche_2">
					<form method="POST" action="/modules/blog/recherche.php">
						<tr height="10"><td></td></tr>
						<tr>
							<td><input type="text" id="str_recherche" name="str_recherche" size="16"></td>
						</tr>
						<tr>
							<td><input type="submit" id="btn_rechercher" name="btn_rechercher" value="OK"></td>
						</tr>
						<tr height="10"><td></td></tr>
					</form>
					</table>
				</td>
			</tr>
		</table>
</div><div id="div_nav_gauche_commentaires" style="display:none"><table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25" class="fond-titre1">
		<td align="center">
			<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
				<tr height="10">
					<td width="10" style="background-image:url('/modules/commun/images/triangle_haut.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_commentaires', 'haut')"></td>
					<td align="center" rowspan="2"><b>Commentaires</b></td>
					<td align="center" rowspan="2" width="10"></td>
				</tr>
				<tr height="10">
					<td width="10" style="background-image:url('/modules/commun/images/triangle_bas.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_commentaires', 'bas')"></td>
				</tr>
			</table>
		</td>
	</tr>
	<tr class="fond-titre2">
		<td>
			
		</td>
	</tr>
</table>
</div><div id="div_nav_gauche_nuancier" style="display:none"><script>
function ChangeVisibilite(id_element, visible)
{
	elt = document.getElementById(id_element);

	if (visible==false)
	{
		elt.style.visibility = "hidden";
		elt.style.height = 0;
	}
	else
	{
		elt.style.visibility = "visible";
		elt.style.height = "";
	}
}
</script>

<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr height="25" class="fond-titre1">
		
		<td>
			<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
				<tr height="10">
					<td width="10" style="background-image:url('/modules/commun/images/triangle_haut.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_nuancier', 'haut')"></td>
					<td align="center" rowspan="2"><b>Nuancier</b></td>
					<td align="center" rowspan="2" width="10"></td>
				</tr>
				<tr height="10">
					<td width="10" style="background-image:url('/modules/commun/images/triangle_bas.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_nuancier', 'bas')"></td>
				</tr>
			</table>
		</td>
	</tr>
	<tr class="fond-titre2">
		<td>
			
			<center>
			.fond-navigateur<br>
			<input type="text" value="#dddddd" size="7" id="champ-.fond-navigateur" onChange="SetClassBgcolor('.fond-navigateur', this.value); SetCookie('css-.fond-navigateur', this.value)"><input type="button" value="ok"><br>
			.fond-cadrepage<br>
			<input type="text" value="#ccddff" size="7" id="champ-.fond-cadrepage" onChange="SetClassBgcolor('.fond-cadrepage', this.value); SetCookie('css-.fond-cadrepage', this.value)"><input type="button" value="ok"><br>
			.fond-page<br>
			<input type="text" value="#ccddff" size="7" id="champ-.fond-page" onChange="SetClassBgcolor('.fond-page', this.value); SetCookie('css-.fond-page', this.value)"><input type="button" value="ok"><br>
			.fond-contenu<br>
			<input type="text" value="#ccddff" size="7" id="champ-.fond-contenu" onChange="SetClassBgcolor('.fond-contenu', this.value); SetCookie('css-.fond-contenu', this.value)"><input type="button" value="ok"><br>
			.fond-titre1<br>
			<input type="text" value="#3333ff" size="7" id="champ-.fond-titre1" onChange="SetClassBgcolor('.fond-titre1', this.value); SetCookie('css-.fond-titre1', this.value)"><input type="button" value="ok"><br>
			.fond-titre2<br>
			<input type="text" value="#5555ff" size="7" id="champ-.fond-titre2" onChange="SetClassBgcolor('.fond-titre2', this.value); SetCookie('css-.fond-titre2', this.value)"><input type="button" value="ok"><br>
			.article-blog<br>
			<input type="text" value="#ccddff" size="7" id="champ-.article-blog" onChange="SetClassBgcolor('.article-blog', this.value); SetCookie('css-.article-blog', this.value)"><input type="button" value="ok"><br>
			.commentaire-blog<br>
			<input type="text" value="#ccddff" size="7" id="champ-.commentaire-blog" onChange="SetClassBgcolor('.commentaire-blog', this.value); SetCookie('css-.commentaire-blog', this.value)"><input type="button" value="ok"><br>
			liens<br>
			<input type="text" value="blue" size="7" id="champ-A" onChange="SetClassColor('A', this.value); SetCookie('css-A', this.value)"><input type="button" value="ok"><br>
			police<br>
			<input type="text" value="Comics Sans MS" size="7" id="champ-BODY-font" onChange="SetClassFont('BODY', this.value); SetCookie('css-BODY-font', this.value)"><input type="button" value="ok"><br>
			<input type="button" value="RAZ" onClick="RazParametresUtilisateur()"><br>
			</center>
			
		</td>
	</tr>
</table>
<script language="javascript">
	InitialyseNuancier();
</script></div><div id="div_nav_gauche_blog_stats" style="display:none">		<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
			<tr height="25"class="fond-titre1">
				<td align="center">
					<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
						<tr height="10">
							<td width="10" style="background-image:url('/modules/commun/images/triangle_haut.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_blog_stats', 'haut')"></td>
							<td align="center" rowspan="2"><b>Stats Blog</b></td>
							<td align="center" rowspan="2" width="10"></td>
						</tr>
						<tr height="10">
							<td width="10" style="background-image:url('/modules/commun/images/triangle_bas.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_blog_stats', 'bas')"></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr class="fond-titre2">
				<td>
					<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
					<form method="POST" action="/modules/blog/recherche.php">
						<tr height="10"><td></td></tr>
						<tr>
							<td align="center" style="font-size:12"><nobr> commentaires</nobr><br>dans<br><nobr>15 articles</nobr></td>
						</tr>
						<tr height="10"><td></td></tr>
					</form>
					</table>
				</td>
			</tr>
		</table>
</div><div id="div_nav_gauche_publicite" style="display:none">		<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
			<tr height="25"class="fond-titre1">
				<td align="center">
					<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
						<tr height="10">
							<td width="10" style="background-image:url('/modules/commun/images/triangle_haut.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_publicite', 'haut')"></td>
							<td align="center" rowspan="2"><b>Publicité</b></td>
							<td align="center" rowspan="2" width="10"></td>
						</tr>
						<tr height="10">
							<td width="10" style="background-image:url('/modules/commun/images/triangle_bas.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_publicite', 'bas')"></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr class="fond-titre2">
				<td>
					<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
					<form method="POST" action="/modules/blog/recherche.php">
						<tr height="10"><td></td></tr>
						<tr>
							<td align="center" style="font-size:12">
<script type="text/javascript">
google_ad_client = "pub-4084643915209244";
google_ad_width = 125;
google_ad_height = 125;
google_ad_format = "125x125_as";
google_ad_type = "text_image";
google_ad_channel ="";
</script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script><br>
<script type="text/javascript">
google_ad_client = "pub-4084643915209244";
google_ad_width = 110;
google_ad_height = 32;
google_ad_format = "110x32_as_rimg";
google_cpa_choice = "CAAQieybzgEaCPd6JB7xAZlbKNGZ5HQ";
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
							</td>
						</tr>
						<tr height="10"><td></td></tr>
					</form>
					</table>
				</td>
			</tr>
		</table>
</div><div id="div_nav_gauche_autres_blogs" style="display:none">		<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
			<tr height="25"class="fond-titre1">
				<td align="center">
					<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
						<tr height="10">
							<td width="10" style="background-image:url('/modules/commun/images/triangle_haut.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_autres_blogs', 'haut')"></td>
							<td align="center" rowspan="2"><b>Autres Blogs</b></td>
							<td align="center" rowspan="2" width="10"></td>
						</tr>
						<tr height="10">
							<td width="10" style="background-image:url('/modules/commun/images/triangle_bas.gif'); cursor:pointer" onClick="changePosition('div_nav_gauche_autres_blogs', 'bas')"></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr class="fond-titre2">
				<td>
					<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
					<form method="POST" action="/modules/blog/recherche.php">
						<tr height="10"><td></td></tr>
						<tr>
							<td align="center" style="font-size:12"><a href="http://ougl.over-blog.com" target="_blank"><font color="#000000">Ludo, prof au Japon</font></a></td>
						</tr>
						<tr>
							<td align="center" style="font-size:12"><a href="http://iroiro.over-blog.com" target="_blank"><font color="#000000">iroiro</font></a></td>
						</tr>
						<tr>
							<td align="center" style="font-size:12"><a href="http://paristokyo.over-blog.com" target="_blank"><font color="#000000">Paris-Tokyo</font></a></td>
						</tr>
						<tr height="10"><td></td>
						</tr>
						<tr>
							<td align="center" style="font-size:12"><a href="http://so.fun.free.fr/modules/espace_perso/url_hasard.php?login_utilisateur=Forrest" target="_blank"><font color="#000000">Hasard parmi 12 blogs</font></a></td>
						</tr>
						<tr height="10"><td></td>
						</tr>
					</form>
					</table>
				</td>
			</tr>
		</table>
</div><script src="/modules/commun/scripts/modules_navigation.js"></script>
						</td>
						<td width="25">
						</td>
						<td class="fond-contenu">
							<table class="fond-page" width="100%" height="10" cellpadding="0" cellspacing="0" border="0">
								<tr>
									<td>
									<center>
<script type="text/javascript"><!--
google_ad_client = "pub-4084643915209244";
google_ad_width = 468;
google_ad_height = 15;
google_ad_format = "468x15_0ads_al_s";
google_ad_channel ="";
google_color_border = "CCDDFF";
google_color_bg = "CCDDFF";
google_color_link = "000000";
google_color_text = "333333";
google_color_url = "666666";
//--></script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
									<br><br>
									</center>
									</td>
								</tr>
							</table>
							<table width="100%" height="10" cellpadding="0" cellspacing="0" border="0">
								<tr>
									<td><script language="javascript">
	function SetBgColor(id_element, couleur)
	{
		elt = document.getElementById(id_element);
		elt.style.background = couleur;
	}
</script>
<title>SOFUN - Blog, article : Diaporama javascript en fondu enchainé</title>
<font size="-2">dimanche 05 mars 2006 - 23:09</font>
<fieldset id="article22" class="article-blog">
<legend><a href="/modules/blog/article.php?id_article=22"><font color="black"><b>Diaporama javascript en fondu enchainé</b></font></a></legend>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>
			<table width="100%" cellpadding="0" cellspacing="0" border="0">
				<tr>
					<td width="15"></td>
					<td>Depuis une dixaine de jours, j'ai enfin pris le temps d'ajouter une amélioration à mon diaporama en javascript : la transition progressive en dégradé flou.<br>
Ce soir, comme je désespérait de ne trouver de photo pour illustrer joliement cette nouvelle fonctionnalité, je me suis souvenu qu'il m'est arrivé de prendre des vacances. Voici donc sept photos prises aux Arcs (bien qu'il eu été plus facile de les prendre à l'appareil photo), en 2004.<br>
Si je me souviens bien, la photo la moins enneigée correspond à la vallée de Bourg Saint Maurice (t'as avalé le boursin Maurice ?).<br>
<br>
<!-- Début diaporama -->
<script src="http://so.fun.free.fr/modules/commun/scripts/diaporama_objet.js"></script>
<script>
	nouveau_id_diaporama = monDiaporama.length;
	monDiaporama[nouveau_id_diaporama] = new Diaporama(nouveau_id_diaporama, 100, 2,	2000, 600, 450, "flou");
	monDiaporama[nouveau_id_diaporama].ajoutePhoto("http://so.fun.free.fr/modules/blog/photos/les-arcs_2004_1.jpg");
	monDiaporama[nouveau_id_diaporama].ajoutePhoto("http://so.fun.free.fr/modules/blog/photos/les-arcs_2004_2.jpg");
	monDiaporama[nouveau_id_diaporama].ajoutePhoto("http://so.fun.free.fr/modules/blog/photos/les-arcs_2004_3.jpg");
	monDiaporama[nouveau_id_diaporama].ajoutePhoto("http://so.fun.free.fr/modules/blog/photos/les-arcs_2004_4.jpg");
	monDiaporama[nouveau_id_diaporama].ajoutePhoto("http://so.fun.free.fr/modules/blog/photos/les-arcs_2004_5.jpg");
	monDiaporama[nouveau_id_diaporama].ajoutePhoto("http://so.fun.free.fr/modules/blog/photos/les-arcs_2004_6.jpg");
	monDiaporama[nouveau_id_diaporama].ajoutePhoto("http://so.fun.free.fr/modules/blog/photos/les-arcs_2004_7.jpg");
	//monDiaporama[nouveau_id_diaporama].masquerPanneauCommande();
	monDiaporama[nouveau_id_diaporama].ajouteCadre(3,"#000000");
	monDiaporama[nouveau_id_diaporama].placeDiaporama();
	monDiaporama[nouveau_id_diaporama].testImagesOk();
</script>
<!-- Fin diaporama -->

<br>
Passons maintenant à la partie technique :<br>
Pour la mise en place, la procédure est exactement la même que pour le <a href="http://so.fun.free.fr/modules/blog/article.php?id_article=16">diaporama en "slide"</a> (je ne trouve pas de mot français pour le désigner). Il suffit ensuite de modifier la ligne :<br>
<br>
<fieldset>
<pre >
<div style="font-family:arial">
monDiaporama[nouveau_id_diaporama] = new Diaporama(nouveau_id_diaporama, <b>50</b>, <b>10</b>, <b>2000</b>, <b>500</b>, <b>600</b>);
</div></pre>
</fieldset>
<br>
... en y ajoutant un nouveau paramètre : <br>
<br>
<fieldset>
<pre >
<div style="font-family:arial">
monDiaporama[nouveau_id_diaporama] = new Diaporama(nouveau_id_diaporama, <b>100</b>, <b>2</b>, <b>2000</b>, <b>500</b>, <b>600</b>, <b>"flou"</b>);
</div></pre>
</fieldset>
<br>
La ligne "<b>new Diaporama</b>" s'utilise alors ainsi :
	<ul>
	<li> <b>100</b> : temps, en millisecondes, entre chaque étape de réduction de la photo au premier plan. Plus le nombre est grand, plus la transition est longue, et inversement.
	<li> <b>2</b> : pourcentage de progression effectué à chaque étape. Varie entre 1 et 100. Plus le nombre est petit, plus la transition est fluide et lente.
	<li> <b>2000</b> : temps de pause, en millisecondes, entre chaque transition.
	<li> <b>500</b> : largeur des photos en pixel. La photo réelle doit avoir exactement la même largeur que celle que vous aurez définit ici car elle ne sera pas redimentionnée automatiquement comme avec une balise IMG.
	<li> <b>600</b> : hauteur des photos en pixel. La photo réelle doit avoir exactement la même hauteur que celle que vous aurez définit ici car elle ne sera pas redimentionnée automatiquement comme avec une balise IMG.
	</ul>

Pour le premier paramètre, je conseille de ne pas le diminuer en dessous de 50 : mon PC, bien qu'il tienne la route, travaille à plus de 50% lors d'une transition à cette cadence, donc il faut penser à vos visiteurs qui peuvent avoir une machine qui commence à souffrir.<br>
De plus, 100 et 2 donnent à peu près le même résultat que 50 et 1.<br>
La durée théorique d'une transition peut être calculée ainsi :
<ul>
<li><b>paramètre_1 x 100 / paramètre_2 = durée en millisecondes.</b>
<li>exemple : 100 x 100 / 2 = 2000 millisecondes, soit 2 secondes.
</ul>

Voila, je pense que ça devrait suffire comme explication en plus des explications du <a href="http://so.fun.free.fr/modules/blog/article.php?id_article=16">diaporama en "slide"</a>, mais n'hésitez pas à demander des précisions.<br>
Ce script a été testé sur Firefox 1.5 et Internet Explorer 6 dans leur version Windows uniquement.<br>
Je vous invite également à laisser un commentaire avec le lien de vos diaporamas afin de montrer que ça marche ailleurs qu'ici.<br>
<br>
11/03/06 : après avoir parcouru quelques sites, j'ai vu qu'on appelle cet effet le "fondu enchaîné". Je ne m'en souvenait plus.</td>
					<td width="15"></td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
	</tr>
</table>
</fieldset>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td align="right">publié par Forrest<br><nobr><a href="/modules/blog/article.php?id_article=22&affiche_commentaire=true">commentaires ()</a></nobr><br>
		</td>
	</tr>
</table>
<br><script language="javascript">
	function SetBgColor(id_element, couleur)
	{
		elt = document.getElementById(id_element);
		elt.style.background = couleur;
	}
</script>
<title>SOFUN - Blog, article : Pour une vie sans tabac</title>
<font size="-2">vendredi 27 janvier 2006 - 21:57</font>
<fieldset id="article21" class="article-blog">
<legend><a href="/modules/blog/article.php?id_article=21"><font color="black"><b>Pour une vie sans tabac</b></font></a></legend>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>
			<table width="100%" cellpadding="0" cellspacing="0" border="0">
				<tr>
					<td width="15"></td>
					<td>Depuis quelques temps, j'ai pu découvrir de nouvelles campagnes publicitaires dont le but est de nous sensibiliser sur le tabagisme en insistant sur le ridicule qu'il suscite. Je regrette seulement que ce genre d'annonce télévisuelle ne soit que très peu diffusé.<br>
<br>
La semaine dernière, j'ai finalament mis la main sur le site officiel de cette campagne publicitaire : <a href="http://fr.help-eu.com/pages/index-1.html" target="_blank">Pour une vie sans tabac</a><br>
<br>
Sur ce site, on peut trouver les trois vidéos suivantes :<br>
<br>
<center>
<a href="/modules/download/pour_une_vie_sans_tabac_1.wmv" target="_blank"><img src="/modules/blog/photos/pour_une_vie_sans_tabac_1.jpg" border="0"></a><br>
<br>
<a href="/modules/download/pour_une_vie_sans_tabac_2.wmv" target="_blank"><img src="/modules/blog/photos/pour_une_vie_sans_tabac_2.jpg" border="0"></a><br>
<br>
<a href="/modules/download/pour_une_vie_sans_tabac_3.wmv" target="_blank"><img src="/modules/blog/photos/pour_une_vie_sans_tabac_3.jpg" border="0"></a><br>
</center>
<br>
Il n'y a pas grand chose à ajouter, les images parlent mieux que les mots.</td>
					<td width="15"></td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
	</tr>
</table>
</fieldset>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td align="right">publié par Forrest<br><nobr><a href="/modules/blog/article.php?id_article=21&affiche_commentaire=true">commentaires ()</a></nobr><br>
		</td>
	</tr>
</table>
<br><script language="javascript">
	function SetBgColor(id_element, couleur)
	{
		elt = document.getElementById(id_element);
		elt.style.background = couleur;
	}
</script>
<title>SOFUN - Blog, article : Roll-Over progressif en javascript</title>
<font size="-2">mercredi 14 décembre 2005 - 21:28</font>
<fieldset id="article20" class="article-blog">
<legend><a href="/modules/blog/article.php?id_article=20"><font color="black"><b>Roll-Over progressif en javascript</b></font></a></legend>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>
			<table width="100%" cellpadding="0" cellspacing="0" border="0">
				<tr>
					<td width="15"></td>
					<td>Il y a quelques temps, je faisai découvrir mon rollover progressif à l'occasion du <a href="http://so.fun.free.fr/modules/blog/article.php?id_article=15">coloriage</a> de mon site.<br>
A partir d'aujourd'hui, vous pourrez vous même utiliser de petit outil que j'ai réalisé moi même (ce n'est pas une simple récupération sur le net).<br>
Afin de montrer les possibilités de ce module, positionnez votre souris au dessus de la photo et celle-ci va être progressivement remplacée par une autre. Avec les réglages sur cet article, la transition est complète en trois secondes à peu de choses près.<br>

<br>
<center>
<script src="http://so.fun.free.fr/modules/commun/scripts/rollover_flou.js"></script>
<script>
	nouveau_id_rollover = monRolloverFlou.length;
	monRolloverFlou[nouveau_id_rollover] = new RolloverFlou(nouveau_id_rollover, 25, 1,	1000, 163, 200);
	monRolloverFlou[nouveau_id_rollover].ajouteCadre(3, "#000000");
	monRolloverFlou[nouveau_id_rollover].place("http://so.fun.free.fr/modules/blog/photos/forrest_normal.jpg", "http://so.fun.free.fr/modules/blog/photos/forrest_vieillit.jpg");
</script>
</center>
<br>
<br>
Je me suis moi-même surpris par la qualité de cette transition (avec ces deux photos en particulier) qui n'utilise que deux images, comme un rollover classique. Concernant mon aspect vieillit, celui-ci a été réalisé à l'aide du logiciel <a href="http://www.dcs.st-and.ac.uk/~morph/Transformer/" target="_blank">Face Transformer</a> découvert dans <a href="http://ougl.over-blog.com/article-658471.html" target="_blank">l'article de Ludo</a>. Un autre exemple de mise en application de ce rollover progressif est visible sur <a href="http://iroiro.over-blog.com/article-1154909.html" target="_blank">cet article</a> de MP qui n'a pas résisté à la tentation.<br>
<br>
Quant à l'utilisation de ce module, c'est très similaire à l'utilisation du <a href="http://so.fun.free.fr/modules/blog/article.php?id_article=16">diaporama</a> et en voici le mode d'emploi :
<ul>
<li> insérez le code suivant à l'emplacement souhaité :<br>
<table align="center">
<tr>
<td>
<fieldset>
<pre ><div style="font-family:arial">&#60;script src="<b>http://so.fun.free.fr/modules/commun/scripts/rollover_flou.js</b>"&#62;&#60;/script&#62;
&#60;script&#62;
	nouveau_id_rollover = monRolloverFlou.length;
	monRolloverFlou[nouveau_id_rollover] = new RolloverFlou(nouveau_id_rollover, <b>25</b>, <b>1</b>, <b>1000</b>, <b>163</b>, <b>200</b>);
	<i>monRolloverFlou[nouveau_id_rollover].ajouteCadre(<b>3</b>, <b>"#000000"</b>);</i>
	monRolloverFlou[nouveau_id_rollover].place("<b>http://mon.serveur.fr/.../photo_01.jpg</b>",
		"<b>http://mon.serveur.fr/.../photo_02.jpg</b>");
&#60;/script&#62;</div></pre>
</fieldset>
</td>
</tr>
</table>
<br>
<li>apportez les modification suivantes :
	<ul>
	<li>ligne "<b>new RolloverFlou</b>" :
		<ul>
		<li> <b>25</b> : temps, en millisecondes, entre chaque variation de l'opacité des photos. Plus le nombre est grand, plus la transition est longue, et inversement.
		<li> <b>1</b> : pourcentage de variation de l'opacité à chaque cycle. Varie entre 1 et 99. Plus le nombre est petit, plus la transition est fluide et longue.
		<li> <b>1000</b> : ce paramètre ne sert à rien pour le moment. Ce n'est qu'un résidut provenant du diaporama. Pas besoin d'y toucher.
		<li> <b>163</b> : largeur des photos en pixel. La photo réelle doit avoir exactement cette largeur car elle ne sera pas redimentionnée automatiquement comme avec une balise IMG.
		<li> <b>200</b> : hauteur des photos en pixel. La photo réelle doit avoir exactement cette hauteur car elle ne sera pas redimentionnée automatiquement comme avec une balise IMG.
		</ul>
	<li>ligne "<b>ajouteCadre</b>" : une ligne facultative qui permet d'ajouter une bordure au rollover.
		<ul>
		<li><b>3</b> : épaisseur de la bordure en pixels.
		<li><b>#000000</b> : code couleur pour la bordure.
		</ul>
	<li>ligne "<b>place</b>" : permet de définir les deux photos du rollover et d'afficher le résultat. La ligne est volontairement découpée en deux lignes, mais il s'agit là d'un choix de lisibilité. N'oubliez pas de mettre les adresses de vos photos à la place des miennes ;)
	</ul>
</ul>
Si vous conservez la toute première ligne intacte, le script sera utilisé à partir de ce site. Cela ne me pose aucun problème. Je tiens seulement à préciser que celui-ci peut être modifié à tout moment afin d'apporter des corrections pour résoudre les problèmes qui me sont signalés ou d'y ajouter de nouvelles fonctionnalités. En revanche, et bien que je fasse tout ce qui m'est possible pour éviter d'y apporter tout problème nouveau par rapport aux versions précédentes, il n'est pas impossible d'obtenir des effets secondaires indésirables (je ne parles pas de risques de voir Jean-Pierre COFFE débarquer chez vous pour critiquer votre stock alimentaire, ça ne m'est jamais arrivé sinon une crise cardiaque l'aurai terrassé). Je vous conseille donc de garder une copie du javascript que vous pouvez télécharger <a href="http://so.fun.free.fr/modules/commun/scripts/rollover_flou.js" target="_blank">ici</a>. (Avec Firefox, il faut faire un "click droit" sur le lien puis "Enregistrer la cible du lien sous..."). Dans le cas de utilisation de votre copie du fichier javascript, il vous faut remplacer l'adresse par la votre.<br>
<br>
Bien sur, comme il s'agit de javascript, les utilisateurs d'overblog qui sont toujours en mode "Confiance" devront attendre de passer en mode "Privilège" pour pouvoir l'utiliser.<br>
<br>
Voila, je pense que ça devrait suffire comme explication, mais n'hésitez pas à demander des précisions.<br>
Je vous invite également à laisser un commentaire avec le lien de vos réalisation afin de montrer que ça marche ailleurs qu'ici.<br>
J'invite également les utilisateurs de Mac à me confirmer le bon fonctionnement de cet outils sur leur navigateur préféré ou à m'informer de tout problème car je n'ai testé que sous Windows XP avec Internet Explorer 6.0 et Firefox 1.5 (le tout en version française).</td>
					<td width="15"></td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
	</tr>
</table>
</fieldset>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td align="right">publié par Forrest<br><nobr><a href="/modules/blog/article.php?id_article=20&affiche_commentaire=true">commentaires ()</a></nobr><br>
		</td>
	</tr>
</table>
<br><center>
			<a href="liste_articles.php?page=1">Suivant</a>
		</center></td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
				<!-- //////////////////////////////////////////////////////////////////////////////////////////// -->
				<!-- Fin ligne 3 -->
			</td>
		</tr>
		<tr valign="top" height="1">
			<td width="100%">
				<!-- Début ligne de réglage de la largeur minimale -->
				<!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->
					<img src="/modules/commun/images/spacer.gif" width="800" height="1">
				<!-- //////////////////////////////////////////////////////////////////////////////////////////// -->
				<!-- Fin ligne de réglage de la largeur minimale -->
			</td>
		</tr>
		<tr height="1">
			<td>
				<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<a href="/modules/rss/rss2.php"><img src="/modules/commun/images/rss2.gif" border="0"></a><br>
<a href="http://www.pagerank.fr/" title="Mon PageRank" target="_blank"><img src="http://www.pagerank.fr/pagerank-actuel.gif?uri=so.fun.free.fr/" style="border: none;" alt="PageRank Actuel"/></a><br>

Nombre de surfeurs égarés en ce moment : 109
<script language="JavaScript" src="http://www.gvisit.com/record.php?sid=37a9040918617690061739d49e688130" type="text/javascript" DEFER></script>
</td>
<td align="right">
<script type="text/javascript">
google_ad_client = "pub-4084643915209244";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text_image";
google_ad_channel ="";
google_color_border = "33FF33";
google_color_bg = "FF9933";
google_color_link = "000000";
google_color_url = "666666";
google_color_text = "333333";
</script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td>
</tr>
</table>

			</td>
		</tr>
	</table>

</td>
</tr>
</table>
<!-- Fin tableau pour dessiner le cadre -->

<!-- Début référencement -->
<noscript>
<a href="http://indexeur.free.fr">Nouveau moteur de recherche français</a><br>
<a href="http://indexeur.online.fr">Nouveau moteur de recherche français</a><br>

<a href="http://so.fun.free.fr/">accueil</a><br>
<a href="http://so.fun.free.fr/modules/commun/">accueil</a><br>
<a href="http://so.fun.free.fr/modules/blog/">blog</a><br>
<a href="http://so.fun.free.fr/modules/blog/liste_articles.php">blog : liste complète</a><br>
<a href="http://so.fun.free.fr/modules/blog/article.php">blog : article choisi au hasard</a><br>
<a href="http://so.fun.free.fr/modules/blog/liste_articles.php?id_categorie=0">blog : Divers</a><br>
<a href="http://so.fun.free.fr/modules/chat/chat.php">Chat / Discussion / Applet Java</a><br>
<a href="http://so.fun.free.fr/modules/moi/intro.php">CV - Intro</a><br>
<a href="http://so.fun.free.fr/modules/moi/formation.php">CV - Formation</a><br>
<a href="http://so.fun.free.fr/modules/moi/experience.php">CV - Expérience</a><br>
<a href="http://so.fun.free.fr/modules/moi/competences.php">CV - Compétences</a><br>
<a href="http://so.fun.free.fr/modules/moi/divers.php">CV - Divers</a><br>
<a href="http://so.fun.free.fr/modules/liens/liens.php">Liens</a><br>
<a href="http://so.fun.free.fr/modules/contact/contact.php">Contact</a><br>
<a href="http://so.fun.free.fr/modules/livredor/livredor.php">Livre d'or</a><br>
<br>
<a href="http://so.fun.free.fr/modules/blog/article.php?id_article=8">Blog Article : Tout a un commencement</a><br>
<a href="http://so.fun.free.fr/modules/blog/article.php?id_article=8&affiche_commentaire=true">Blog Article : Tout a un commencement</a><br>
<a href="http://so.fun.free.fr/modules/blog/article.php?id_article=9">Blog Article : Restaurant Japonais</a><br>
<a href="http://so.fun.free.fr/modules/blog/article.php?id_article=9&affiche_commentaire=true">Blog Article : Restaurant Japonais</a><br>
<a href="http://so.fun.free.fr/modules/blog/article.php?id_article=10">Blog Article : L'age de glace</a><br>
<a href="http://so.fun.free.fr/modules/blog/article.php?id_article=10&affiche_commentaire=true">Blog Article : L'age de glace</a><br>
<a href="http://so.fun.free.fr/modules/blog/article.php?id_article=11">Blog Article : Les pigeons : une organisation internationnale</a><br>
<a href="http://so.fun.free.fr/modules/blog/article.php?id_article=11&affiche_commentaire=true">Blog Article : Les pigeons : une organisation internationnale</a><br>
<a href="http://so.fun.free.fr/modules/blog/article.php?id_article=12">Blog Article : Roll-Over à 10000 Yen</a><br>
<a href="http://so.fun.free.fr/modules/blog/article.php?id_article=12&affiche_commentaire=true">Blog Article : Roll-Over à 10000 Yen</a><br>
<a href="http://so.fun.free.fr/modules/blog/article.php?id_article=13">Blog Article : Quotidien japonais</a><br>
<a href="http://so.fun.free.fr/modules/blog/article.php?id_article=13&affiche_commentaire=true">Blog Article : Quotidien japonais</a><br>
<a href="http://so.fun.free.fr/modules/blog/article.php?id_article=14">Blog Article : Quelle heure est-il chez vous ?</a><br>
<a href="http://so.fun.free.fr/modules/blog/article.php?id_article=14&affiche_commentaire=true">Blog Article : Quelle heure est-il chez vous ?</a><br>
<a href="http://so.fun.free.fr/modules/blog/article.php?id_article=15">Blog Article : Coloriage</a><br>
<a href="http://so.fun.free.fr/modules/blog/article.php?id_article=15&affiche_commentaire=true">Blog Article : Coloriage</a><br>
<a href="http://so.fun.free.fr/modules/blog/article.php?id_article=16">Blog Article : Armada Rouen 2003 en Diaporama Javascript</a><br>
<a href="http://so.fun.free.fr/modules/blog/article.php?id_article=16&affiche_commentaire=true">Blog Article : Armada Rouen 2003 en Diaporama Javascript</a><br>
<a href="http://so.fun.free.fr/modules/blog/article.php?id_article=17">Blog Article : Bande dessinée - Grimmy - Mother Goose & Grimm</a><br>
<a href="http://so.fun.free.fr/modules/blog/article.php?id_article=17&affiche_commentaire=true">Blog Article : Bande dessinée - Grimmy - Mother Goose & Grimm</a><br>
<a href="http://so.fun.free.fr/modules/blog/article.php?id_article=18">Blog Article : Marre des chaînes e-mail ?</a><br>
<a href="http://so.fun.free.fr/modules/blog/article.php?id_article=18&affiche_commentaire=true">Blog Article : Marre des chaînes e-mail ?</a><br>
<a href="http://so.fun.free.fr/modules/blog/article.php?id_article=19">Blog Article : Mise à jour du diaporama en javascript</a><br>
<a href="http://so.fun.free.fr/modules/blog/article.php?id_article=19&affiche_commentaire=true">Blog Article : Mise à jour du diaporama en javascript</a><br>
<a href="http://so.fun.free.fr/modules/blog/article.php?id_article=20">Blog Article : Roll-Over progressif en javascript</a><br>
<a href="http://so.fun.free.fr/modules/blog/article.php?id_article=20&affiche_commentaire=true">Blog Article : Roll-Over progressif en javascript</a><br>
<a href="http://so.fun.free.fr/modules/blog/article.php?id_article=21">Blog Article : Pour une vie sans tabac</a><br>
<a href="http://so.fun.free.fr/modules/blog/article.php?id_article=21&affiche_commentaire=true">Blog Article : Pour une vie sans tabac</a><br>
<a href="http://so.fun.free.fr/modules/blog/article.php?id_article=22">Blog Article : Diaporama javascript en transition progressive floue</a><br>
<a href="http://so.fun.free.fr/modules/blog/article.php?id_article=22&affiche_commentaire=true">Blog Article : Diaporama javascript en transition progressive floue</a><br>
<br>
<a href="http://so.fun.free.fr/modules/blog/liste_articles.php?page=0">blog : Liste complète page 0</a><br>
<a href="http://so.fun.free.fr/modules/blog/liste_articles.php?page=1">blog : Liste complète page 1</a><br>
<a href="http://so.fun.free.fr/modules/blog/liste_articles.php?page=2">blog : Liste complète page 2</a><br>
<a href="http://so.fun.free.fr/modules/blog/liste_articles.php?page=3">blog : Liste complète page 3</a><br>


<!-- Duplication -->

<a href="http://so.fun.online.fr/">accueil</a><br>
<a href="http://so.fun.online.fr/modules/commun/">accueil</a><br>
<a href="http://so.fun.online.fr/modules/blog/">blog</a><br>
<a href="http://so.fun.online.fr/modules/blog/liste_articles.php">blog : liste complète</a><br>
<a href="http://so.fun.online.fr/modules/blog/article.php">blog : article choisi au hasard</a><br>
<a href="http://so.fun.online.fr/modules/blog/liste_articles.php?id_categorie=0">blog : Divers</a><br>
<a href="http://so.fun.online.fr/modules/chat/chat.php">Chat / Discussion / Applet Java</a><br>
<a href="http://so.fun.online.fr/modules/moi/intro.php">CV - Intro</a><br>
<a href="http://so.fun.online.fr/modules/moi/formation.php">CV - Formation</a><br>
<a href="http://so.fun.online.fr/modules/moi/experience.php">CV - Expérience</a><br>
<a href="http://so.fun.online.fr/modules/moi/competences.php">CV - Compétences</a><br>
<a href="http://so.fun.online.fr/modules/moi/divers.php">CV - Divers</a><br>
<a href="http://so.fun.online.fr/modules/liens/liens.php">Liens</a><br>
<a href="http://so.fun.online.fr/modules/contact/contact.php">Contact</a><br>
<a href="http://so.fun.online.fr/modules/livredor/livredor.php">Livre d'or</a><br>
<br>
<a href="http://so.fun.online.fr/modules/blog/article.php?id_article=8">Blog Article : Tout a un commencement</a><br>
<a href="http://so.fun.online.fr/modules/blog/article.php?id_article=8&affiche_commentaire=true">Blog Article : Tout a un commencement</a><br>
<a href="http://so.fun.online.fr/modules/blog/article.php?id_article=9">Blog Article : Restaurant Japonais</a><br>
<a href="http://so.fun.online.fr/modules/blog/article.php?id_article=9&affiche_commentaire=true">Blog Article : Restaurant Japonais</a><br>
<a href="http://so.fun.online.fr/modules/blog/article.php?id_article=10">Blog Article : L'age de glace</a><br>
<a href="http://so.fun.online.fr/modules/blog/article.php?id_article=10&affiche_commentaire=true">Blog Article : L'age de glace</a><br>
<a href="http://so.fun.online.fr/modules/blog/article.php?id_article=11">Blog Article : Les pigeons : une organisation internationnale</a><br>
<a href="http://so.fun.online.fr/modules/blog/article.php?id_article=11&affiche_commentaire=true">Blog Article : Les pigeons : une organisation internationnale</a><br>
<a href="http://so.fun.online.fr/modules/blog/article.php?id_article=12">Blog Article : Roll-Over à 10000 Yen</a><br>
<a href="http://so.fun.online.fr/modules/blog/article.php?id_article=12&affiche_commentaire=true">Blog Article : Roll-Over à 10000 Yen</a><br>
<a href="http://so.fun.online.fr/modules/blog/article.php?id_article=13">Blog Article : Quotidien japonais</a><br>
<a href="http://so.fun.online.fr/modules/blog/article.php?id_article=13&affiche_commentaire=true">Blog Article : Quotidien japonais</a><br>
<a href="http://so.fun.online.fr/modules/blog/article.php?id_article=14">Blog Article : Quelle heure est-il chez vous ?</a><br>
<a href="http://so.fun.online.fr/modules/blog/article.php?id_article=14&affiche_commentaire=true">Blog Article : Quelle heure est-il chez vous ?</a><br>
<a href="http://so.fun.online.fr/modules/blog/article.php?id_article=15">Blog Article : Coloriage</a><br>
<a href="http://so.fun.online.fr/modules/blog/article.php?id_article=15&affiche_commentaire=true">Blog Article : Coloriage</a><br>
<a href="http://so.fun.online.fr/modules/blog/article.php?id_article=16">Blog Article : Armada Rouen 2003 en Diaporama Javascript</a><br>
<a href="http://so.fun.online.fr/modules/blog/article.php?id_article=16&affiche_commentaire=true">Blog Article : Armada Rouen 2003 en Diaporama Javascript</a><br>
<a href="http://so.fun.online.fr/modules/blog/article.php?id_article=17">Blog Article : Bande dessinée - Grimmy - Mother Goose & Grimm</a><br>
<a href="http://so.fun.online.fr/modules/blog/article.php?id_article=17&affiche_commentaire=true">Blog Article : Bande dessinée - Grimmy - Mother Goose & Grimm</a><br>
<a href="http://so.fun.online.fr/modules/blog/article.php?id_article=18">Blog Article : Marre des chaînes e-mail ?</a><br>
<a href="http://so.fun.online.fr/modules/blog/article.php?id_article=18&affiche_commentaire=true">Blog Article : Marre des chaînes e-mail ?</a><br>
<a href="http://so.fun.online.fr/modules/blog/article.php?id_article=19">Blog Article : Mise à jour du diaporama en javascript</a><br>
<a href="http://so.fun.online.fr/modules/blog/article.php?id_article=19&affiche_commentaire=true">Blog Article : Mise à jour du diaporama en javascript</a><br>
<a href="http://so.fun.online.fr/modules/blog/article.php?id_article=20">Blog Article : Roll-Over progressif en javascript</a><br>
<a href="http://so.fun.online.fr/modules/blog/article.php?id_article=20&affiche_commentaire=true">Blog Article : Roll-Over progressif en javascript</a><br>
<a href="http://so.fun.online.fr/modules/blog/article.php?id_article=21">Blog Article : Pour une vie sans tabac</a><br>
<a href="http://so.fun.online.fr/modules/blog/article.php?id_article=21&affiche_commentaire=true">Blog Article : Pour une vie sans tabac</a><br>
<a href="http://so.fun.online.fr/modules/blog/article.php?id_article=22">Blog Article : Diaporama javascript en transition progressive floue</a><br>
<a href="http://so.fun.online.fr/modules/blog/article.php?id_article=22&affiche_commentaire=true">Blog Article : Diaporama javascript en transition progressive floue</a><br>
<br>
<a href="http://so.fun.online.fr/modules/blog/liste_articles.php?page=0">blog : Liste complète page 0</a><br>
<a href="http://so.fun.online.fr/modules/blog/liste_articles.php?page=1">blog : Liste complète page 1</a><br>
<a href="http://so.fun.online.fr/modules/blog/liste_articles.php?page=2">blog : Liste complète page 2</a><br>
<a href="http://so.fun.online.fr/modules/blog/liste_articles.php?page=3">blog : Liste complète page 3</a><br>

</noscript>
<!-- Fin référencement -->

</body>
	<!-- Définition du titre de la page dans le cas où aucun autre titre n'a été défini avant -->
	<title>SOFUN - Le Site Où il Fallait Un Nom</title>
	<!-- script pour l'activation du PNG fix -->
	<script>
		if (window.attachEvent)
		{
			correctPNG();
		}
	</script>
</html>

            [db] => c_sqldb Object
                (
                    [db_connect_id] => Resource id #10
                    [user] => so.fun
                    [password] => pvqw1j1v
                    [server] => sql.free.fr
                    [dbname] => so_fun
                    [query_result] => Resource id #36
                )

        )

)