Logo Google 7 sept 2010

Boloky

WRInaute occasionnel
Re: logo google 7 sept

Je me demandais à quoi ce logo pouvait bien correspondre. Car je n'arrive pas à cliquer dessus comme d'habitude !
Très joli effet. Joyeux anniversaire google !!
 

spout

WRInaute accro
J'ai juste vu ce logo sur google.fr et google.co.uk, sur google.be et google.ca c'est toujours le logo classique.
 

rudddy

WRInaute passionné
c'est en jquery, chaque rond de couleur est un div à part, et ils ont codé un sacré calculateur pour faire bouger tout ça synchro !
 

ap34df

WRInaute occasionnel
Salut,

Pour ceux qui veulent jouer, voici les bouts de codes intéressants...

Code:
<script>window.google={kEI:"wx-GTLG4Gc7n4wbKu7GSCw",kEXPI:"17259,17315,23628,23756,24878,25834,25901",kCSI:{e:"17259,17315,23628,23756,24878,25834,25901",ei:"wx-GTLG4Gc7n4wbKu7GSCw",expi:"17259,17315,23628,23756,24878,25834,25901"},ml:function(){},pageState:"#",kHL:"fr",time:function(){return(new Date).getTime()},log:function(b,d,c){var a=new Image,e=google,g=e.lc,f=e.li;a.onerror=(a.onload=(a.onabort=function(){delete g[f]}));g[f]=a;c=c||"/gen_204?atyp=i&ct="+b+"&cad="+d+"&zx="+google.time();a.src=c;e.li=f+1},lc:[],li:0,j:{en:1,l:function(){google.fl=true},e:function(){google.fl=true},b:location.hash&&location.hash!="#",bv:3,pl:[],mc:0,sc:0.5},Toolbelt:{}};(function(){for(var d=0,c;c=["ad","bc","p","pa","zd","ac","pc","pah","ph","sa","spf","xx","zc","zz"][d++];)(function(a){google.j[a]=function(){google.j.pl.push([a,arguments])}})(c)})();
window.google.sn="webhp";window.google.timers={load:{t:{start:(new Date).getTime()}}};try{window.google.pt=window.gtbExternal&&window.gtbExternal.pageT();}catch(u){}window.google.jsrt_kill=1;
</script>

<body>


<style>#hplogo{position:relative;width:0;margin:0 auto;right:190px;height:160px}.particle{position:absolute;z-index:-1}.circle{-moz-border-radius:160px;-webkit-border-radius:160px;-khtml-border-radius:160px;border-radius:160px}
</style>



<div id="hplogo"><div style="background-color: rgb(237, 157, 51); height: 18.083px; width: 18.083px; left: 202.288px; top: 77.8354px;" class="particle circle"></div><div style="background-color: rgb(212, 77, 97); height: 18.077px; width: 18.077px; left: 347.743px; top: 82.8301px;" class="particle circle"></div><div style="background-color: rgb(79, 122, 242); height: 18.0823px; width: 18.0823px; left: 256.241px; top: 68.7757px;" class="particle circle"></div><div style="background-color: rgb(239, 154, 30); height: 18.0753px; width: 18.0753px; left: 214.279px; top: 58.8852px;" class="particle circle"></div><div style="background-color: rgb(73, 118, 243); height: 18.0759px; width: 18.0759px; left: 265.251px; top: 35.829px;" class="particle circle"></div><div style="background-color: rgb(38, 146, 48); height: 18.0847px; width: 18.0847px; left: 299.821px; top: 78.2881px;" class="particle circle"></div><div style="background-color: rgb(31, 158, 44); height: 18.076px; width: 18.076px; left: 293.808px; top: 59.2354px;" class="particle circle"></div><div style="background-color: rgb(28, 72, 221); height: 18.0762px; width: 18.0762px; left: 44.9099px; top: 88.291px;" class="particle circle"></div><div style="background-color: rgb(42, 86, 234); height: 18.0765px; width: 18.0765px; left: 267.761px; top: 52.1918px;" class="particle circle"></div><div style="background-color: rgb(51, 85, 216); height: 18.0808px; width: 18.0808px; left: 73.0734px; top: 82.6853px;" class="particle circle"></div><div style="background-color: rgb(54, 182, 65); height: 18.078px; width: 18.078px; left: 294.27px; top: 5.84402px;" class="particle circle"></div><div style="background-color: rgb(46, 93, 239); height: 18.0782px; width: 18.0782px; left: 234.747px; top: 62.1845px;" class="particle circle"></div><div style="background-color: rgb(213, 55, 71); height: 16.0929px; width: 16.0929px; left: 353.07px; top: 41.6349px;" class="particle circle"></div><div style="background-color: rgb(235, 103, 111); height: 16.0848px; width: 16.0848px; left: 335.839px; top: 52.2986px;" class="particle circle"></div><div style="background-color: rgb(249, 177, 37); height: 16.0777px; width: 16.0777px; left: 207.724px; top: 41.1425px;" class="particle circle"></div><div style="background-color: rgb(222, 54, 70); height: 16.0891px; width: 16.0891px; left: 320.841px; top: 70.3194px;" class="particle circle"></div><div style="background-color: rgb(42, 89, 240); height: 16.09px; width: 16.09px; left: 7.71719px; top: 59.777px;" class="particle circle"></div><div style="background-color: rgb(235, 156, 49); height: 16.0001px; width: 16.0001px; left: 180px; top: 81.0001px;" class="particle circle"></div><div style="background-color: rgb(196, 23, 49); height: 16.0005px; width: 16.0005px; left: 145.998px; top: 65.0003px;" class="particle circle"></div><div style="background-color: rgb(216, 32, 56); height: 16.0002px; width: 16.0002px; left: 144.999px; top: 49.0002px;" class="particle circle"></div><div style="background-color: rgb(95, 138, 248); height: 16.0763px; width: 16.0763px; left: 245.73px; top: 34.142px;" class="particle circle"></div><div style="background-color: rgb(239, 161, 30); height: 16.0011px; width: 16.0011px; left: 168.996px; top: 69.0015px;" class="particle circle"></div><div style="background-color: rgb(46, 85, 226); height: 16.0801px; width: 16.0801px; left: 273.07px; top: 98.6874px;" class="particle circle"></div><div style="background-color: rgb(65, 103, 228); height: 16.0793px; width: 16.0793px; left: 248.223px; top: 119.774px;" class="particle circle"></div><div style="background-color: rgb(11, 153, 26); height: 16.0835px; width: 16.0835px; left: 293.741px; top: 41.2106px;" class="particle circle"></div><div style="background-color: rgb(72, 105, 227); height: 16.0823px; width: 16.0823px; left: 266.732px; top: 114.19px;" class="particle circle"></div><div style="background-color: rgb(48, 89, 227); height: 16px; width: 16px; left: 78px; top: 67px;" class="particle circle"></div><div style="background-color: rgb(16, 161, 29); height: 16.0784px; width: 16.0784px; left: 293.753px; top: 23.1937px;" class="particle circle"></div><div style="background-color: rgb(207, 64, 85); height: 16px; width: 16px; left: 117px; top: 83px;" class="particle circle"></div><div style="background-color: rgb(205, 67, 89); height: 16.0005px; width: 16.0005px; left: 136.998px; top: 80.0005px;" class="particle circle"></div><div style="background-color: rgb(40, 85, 234); height: 16.0823px; width: 16.0823px; left: 14.2413px; top: 71.2237px;" class="particle circle"></div><div style="background-color: rgb(202, 39, 60); height: 16.0782px; width: 16.0782px; left: 330.878px; top: 80.288px;" class="particle circle"></div><div style="background-color: rgb(38, 80, 225); height: 16.0904px; width: 16.0904px; left: 25.069px; top: 81.645px;" class="particle circle"></div><div style="background-color: rgb(74, 123, 249); height: 16.0832px; width: 16.0832px; left: 232.722px; top: 46.1836px;" class="particle circle"></div><div style="background-color: rgb(61, 101, 231); height: 16.0882px; width: 16.0882px; left: 73.3527px; top: 12.9966px;" class="particle circle"></div><div style="background-color: rgb(244, 120, 117); height: 12.0847px; width: 12.0847px; left: 326.802px; top: 35.2746px;" class="particle circle"></div><div style="background-color: rgb(243, 103, 100); height: 12.0782px; width: 12.0782px; left: 319.184px; top: 45.7469px;" class="particle circle"></div><div style="background-color: rgb(29, 78, 235); height: 12.0917px; width: 12.0917px; left: 256.233px; top: 80.7168px;" class="particle circle"></div><div style="background-color: rgb(105, 139, 241); height: 12.0758px; width: 12.0758px; left: 244.246px; top: 87.8224px;" class="particle circle"></div><div style="background-color: rgb(250, 198, 82); height: 12.0888px; width: 12.0888px; left: 193.656px; top: 32.0908px;" class="particle circle"></div><div style="background-color: rgb(238, 82, 87); height: 12px; width: 12px; left: 97px; top: 56px;" class="particle circle"></div><div style="background-color: rgb(207, 42, 63); height: 12px; width: 12px; left: 105px; top: 75px;" class="particle circle"></div><div style="background-color: rgb(86, 129, 245); height: 12.0868px; width: 12.0868px; left: 41.6733px; top: 3.88285px;" class="particle circle"></div><div style="background-color: rgb(69, 119, 246); height: 12.0827px; width: 12.0827px; left: 10.2882px; top: 27.1624px;" class="particle circle"></div><div style="background-color: rgb(247, 179, 38); height: 12.0011px; width: 12.0011px; left: 165.996px; top: 55.001px;" class="particle circle"></div><div style="background-color: rgb(43, 88, 232); height: 12.0897px; width: 12.0897px; left: 266.278px; top: 87.7729px;" class="particle circle"></div><div style="background-color: rgb(250, 203, 94); height: 12.0788px; width: 12.0788px; left: 178.304px; top: 33.919px;" class="particle circle"></div><div style="background-color: rgb(224, 46, 61); height: 12px; width: 12px; left: 100px; top: 65px;" class="particle circle"></div><div style="background-color: rgb(241, 109, 111); height: 12.0805px; width: 12.0805px; left: 342.867px; top: 32.293px;" class="particle circle"></div><div style="background-color: rgb(80, 123, 242); height: 12.0795px; width: 12.0795px; left: 59.317px; top: 5.023px;" class="particle circle"></div><div style="background-color: rgb(86, 131, 247); height: 12.0751px; width: 12.0751px; left: 27.2804px; top: 9.10764px;" class="particle circle"></div><div style="background-color: rgb(49, 88, 226); height: 12.0784px; width: 12.0784px; left: 232.759px; top: 116.201px;" class="particle circle"></div><div style="background-color: rgb(240, 105, 108); height: 12px; width: 12px; left: 123px; top: 32px;" class="particle circle"></div><div style="background-color: rgb(55, 105, 246); height: 12.081px; width: 12.081px; left: 5.7339px; top: 37.815px;" class="particle circle"></div><div style="background-color: rgb(96, 132, 239); height: 12.0765px; width: 12.0765px; left: 63.2689px; top: 62.1458px;" class="particle circle"></div><div style="background-color: rgb(42, 92, 244); height: 12.0789px; width: 12.0789px; left: 5.7459px; top: 48.8128px;" class="particle circle"></div><div style="background-color: rgb(244, 113, 110); height: 12px; width: 12px; left: 108px; top: 36px;" class="particle circle"></div><div style="background-color: rgb(248, 194, 71); height: 12.0894px; width: 12.0894px; left: 169.353px; top: 42.9408px;" class="particle circle"></div><div style="background-color: rgb(231, 70, 83); height: 12px; width: 12px; left: 137px; top: 37px;" class="particle circle"></div><div style="background-color: rgb(236, 65, 71); height: 12.087px; width: 12.087px; left: 318.251px; top: 57.7594px;" class="particle circle"></div><div style="background-color: rgb(72, 118, 241); height: 10.0777px; width: 10.0777px; left: 225.748px; top: 100.181px;" class="particle circle"></div><div style="background-color: rgb(239, 92, 92); height: 10px; width: 10px; left: 101px; top: 46px;" class="particle circle"></div><div style="background-color: rgb(37, 82, 234); height: 10.0815px; width: 10.0815px; left: 225.748px; top: 108.207px;" class="particle circle"></div><div style="background-color: rgb(71, 121, 247); height: 10.0833px; width: 10.0833px; left: 16.7112px; top: 16.8337px;" class="particle circle"></div><div style="background-color: rgb(75, 120, 241); height: 10.0757px; width: 10.0757px; left: 231.794px; top: 93.2217px;" class="particle circle"></div></div>








<script>(function(){try{if(!google.doodle)google.doodle={};var a=200,g=-200,j=-200,k,l,m,n=0,o=0,p=0,q=35,r,s=[],t,u,v;google.doodle.init=function(){if(!v&&window.location.href.indexOf("#")==-1){v=true;if(t=document.getElementById("hplogo")){google.j&&google.j.en&&w(100,x,function(){return google.rein&&google.dstr});w(100,y,function(){return google.listen});w(100,z,function(){return google.browser})}}};var w=function(b,c,d){if(d())c();else b< 200&&window.setTimeout(function(){w(b+1,c,d)},b)},x=function(){if(!google.doodle.n){google.doodle.n= true;google.rein.push(google.doodle.init);google.dstr.push(A)}},y=function(){google.listen(document,"mousemove",B)},B=function(b){a=200;g=b.clientX-t.offsetLeft;j=b.clientY-t.offsetTop},C=function(){return[u?window.screenLeft:window.screenX,u?window.screenTop:window.screenY,document.body.clientWidth]},z=function(){u=google.browser.engine.IE&&google.browser.engine.version!="9.0";s=[D(202,78,9,"ed9d33"),D(348,83,9,"d44d61"),D(256,69,9,"4f7af2"),D(214,59,9,"ef9a1e"),D(265,36,9,"4976f3"),D(300,78,9,"269230"), D(294,59,9,"1f9e2c"),D(45,88,9,"1c48dd"),D(268,52,9,"2a56ea"),D(73,83,9,"3355d8"),D(294,6,9,"36b641"),D(235,62,9,"2e5def"),D(353,42,8,"d53747"),D(336,52,8,"eb676f"),D(208,41,8,"f9b125"),D(321,70,8,"de3646"),D(8,60,8,"2a59f0"),D(180,81,8,"eb9c31"),D(146,65,8,"c41731"),D(145,49,8,"d82038"),D(246,34,8,"5f8af8"),D(169,69,8,"efa11e"),D(273,99,8,"2e55e2"),D(248,120,8,"4167e4"),D(294,41,8,"0b991a"),D(267,114,8,"4869e3"),D(78,67,8,"3059e3"),D(294,23,8,"10a11d"),D(117,83,8,"cf4055"),D(137,80,8,"cd4359"),D(14, 71,8,"2855ea"),D(331,80,8,"ca273c"),D(25,82,8,"2650e1"),D(233,46,8,"4a7bf9"),D(73,13,8,"3d65e7"),D(327,35,6,"f47875"),D(319,46,6,"f36764"),D(256,81,6,"1d4eeb"),D(244,88,6,"698bf1"),D(194,32,6,"fac652"),D(97,56,6,"ee5257"),D(105,75,6,"cf2a3f"),D(42,4,6,"5681f5"),D(10,27,6,"4577f6"),D(166,55,6,"f7b326"),D(266,88,6,"2b58e8"),D(178,34,6,"facb5e"),D(100,65,6,"e02e3d"),D(343,32,6,"f16d6f"),D(59,5,6,"507bf2"),D(27,9,6,"5683f7"),D(233,116,6,"3158e2"),D(123,32,6,"f0696c"),D(6,38,6,"3769f6"),D(63,62,6,"6084ef"), D(6,49,6,"2a5cf4"),D(108,36,6,"f4716e"),D(169,43,6,"f8c247"),D(137,37,6,"e74653"),D(318,58,6,"ec4147"),D(226,100,5,"4876f1"),D(101,46,5,"ef5c5c"),D(226,108,5,"2552ea"),D(17,17,5,"4779f7"),D(232,93,5,"4b78f1")];var b=C();k=b[0];l=b[1];m=b[2];E()},A=function(){google.unlisten(document,"mousemove",B);r&&window.clearTimeout(r);if(s)for(var b=0,c;c=s[b++];)c.m()},E=function(){var b=C(),c=b[0],d=b[1];b=b[2];n=c-k;o=d-l;p=b-m;k=c;l=d;m=b;a=Math.max(0,a-2);c=true;for(d=0;b=s[d++];){b.update();if(c)c=b.i}q= c?250:35;r=window.setTimeout(E,q)},D=function(b,c,d,h){return new F(b,c,d,h)},F=function(b,c,d,h){this.x=this.o=b;this.y=this.p=c;this.k=this.h=d;b=100;this.a=b*(Math.random()-0.5);this.c=b*(Math.random()-0.5);this.l=3+Math.random()*98;this.r=0.1+Math.random()*0.4;this.e=0;this.g=1;this.i=false;this.d=document.createElement("div");this.d.className="particle";this.style=this.d.style;h="#"+h;if(u){this.d.innerHTML=".";this.style.fontFamily="Monospace";this.style.color=h;this.style.fontSize="100px"; this.style.lineHeight=0;this.style.cursor="default"}else{this.d.className+=" circle";this.style.backgroundColor=h}t.appendChild(this.d);this.m=function(){t.removeChild(this.d)};this.update=function(){this.x+=this.a;this.y+=this.c;this.a=Math.min(50,Math.max(-50,(this.a+(n+p)/this.h)*0.92));this.c=Math.min(50,Math.max(-50,(this.c+o/this.h)*0.92));var e=g-this.x,f=j-this.y,i=Math.sqrt(e*e+f*f);e/=i;f/=i;if(i< a){this.a-=e*this.l;this.c-=f*this.l;this.e+=(0.005-this.e)*0.4;this.g=Math.max(0,this.g*0.9- 0.01);this.a*=1-this.g;this.c*=1-this.g}else{this.e+=(this.r-this.e)*0.005;this.g=Math.min(1,this.g+0.03)}e=this.o-this.x;f=this.p-this.y;i=Math.sqrt(e*e+f*f);this.a+=e*this.e;this.c+=f*this.e;this.k=this.h+i/8;this.i=i< 0.3&&this.a< 0.3&&this.c< 0.3;if(!this.i){if(!u)this.style.width=this.style.height=this.k*2+"px";this.style.left=this.x-(u?20:0)+"px";this.style.top=this.y+"px"}}}}catch(G){google.ml(G,false,{_sn:"PAR"})};})();google.doodle.init()</script>




<script src="Google_fichiers/_0rTzKv-vvM.js"></script>
 

aztazt

Nouveau WRInaute
@finstreet : Beaucoup d'entre nous ont déjà regardé la source de la page et vu qu'il n'y a aucun lien sur les DIV de chacune des bulles. Inutile de nous rouler dans la farine !
 

rudddy

WRInaute passionné
aztazt a dit:
@finstreet : Beaucoup d'entre nous ont déjà regardé la source de la page et vu qu'il n'y a aucun lien sur les DIV de chacune des bulles. Inutile de nous rouler dans la farine !
non c'était bien tenté puisqu'en jQuery, pas besoin de lien sur le div pour déclencher qqch au clic, mais je l'ai grillé depuis le début ! (me^me si j'avoue que j'ai tenté ma chance ... :twisted: )
 

anemone-clown

WRInaute passionné
Moi j'aime bien les LOURDS logos (ben oui, en 1 Mb, on n'aime pas les logos!) de GG avec perte de temps à la clef, ça me permet d'utiliser Yahoo durant ces journées*. :lol:


* c'est tout à fait vrai.
 

finstreet

WRInaute accro
rudddy a dit:
non c'était bien tenté puisqu'en jQuery, pas besoin de lien sur le div pour déclencher qqch au clic, mais je l'ai grillé depuis le début ! (me^me si j'avoue que j'ai tenté ma chance ... :twisted: )

Tu as été pire ! :) Tu as laissé sous entendre que le résultat était un truc de cul lol je n'ose imaginer le nombre de mecs qui ont testé. Bande de gros cochons !
 

Schwarzer Stern

WRInaute impliqué
Légalement ou techniquement ?
J'imagine que techniquement, si Google l'a fait, c'est possible :) (un lien a été donné plus haut pour nue version html5, d'ailleurs)
Pour le côté légal, aucune certitude !
 

fredfan

WRInaute accro
j-mi a dit:
le voir avec de la musique clasqique ça donne bien aussi ;-)

C'est bizarre ça ne ressemble pas du tout à ce que je vois. Chez moi les ronds ont différentes tailles et ils grossissent quand on les éloigne de leur port d'attache.
C'est la version bridée pour IE sur cette vidéo ?
 

Djibou_Te@M

WRInaute occasionnel
Il reprend ses couleurs au nombre de lettres tapées... déjà que ça [censured]gueulait [/censured] hier :
Mardi 7 septembre 2010, 13h48
Google a surpris les internautes en remplaçant mardi 7 septembre le logo de sa page d'accueil par un "doodle" interactif (logos spéciaux de Google célébrant généralement un événement ou un anniversaire) composé de billes s'échappant dès que le curseur de la souris les approche. Particularité de ce logo disponible dans seulement certains pays : il ne mentionne aucune célébration d'événement.

Cette création réalisée en HTML5 n'a par ailleurs pas manqué d'énerver certains utilisateurs du moteur, agacés par le niveau de ressources système nécessaire au fonctionnement de l'animation. L'affichage de ce logo utiliserait environ 40 % du CPU sous Internet Explorer et environ 50 % sous Firefox, contre seulement 25 % sous Chrome, le navigateur de Google. Google cherchait-il à prouver la supériorité de son navigateur ?
Source : journal du net
 

finstreet

WRInaute accro
en même temps un geek qui se retrouve sur la page d'accueil de Google, il a un soucis le geek :) et les autres internautes ont bien aimé...
 

Djibou_Te@M

WRInaute occasionnel
Djibou_Te@M a dit:
Il reprend ses couleurs au nombre de lettres tapées... déjà que ça [censured]gueulait [/censured] hier :
Mardi 7 septembre 2010, 13h48
Google a surpris les internautes en remplaçant mardi 7 septembre le logo de sa page d'accueil par un "doodle" interactif (logos spéciaux de Google célébrant généralement un événement ou un anniversaire) composé de billes s'échappant dès que le curseur de la souris les approche. Particularité de ce logo disponible dans seulement certains pays : il ne mentionne aucune célébration d'événement.

Cette création réalisée en HTML5 n'a par ailleurs pas manqué d'énerver certains utilisateurs du moteur, agacés par le niveau de ressources système nécessaire au fonctionnement de l'animation. L'affichage de ce logo utiliserait environ 40 % du CPU sous Internet Explorer et environ 50 % sous Firefox, contre seulement 25 % sous Chrome, le navigateur de Google. Google cherchait-il à prouver la supériorité de son navigateur ?
Source : journal du net

Et moi qui croyait que ma RAM commençait a lacher ...
 

Madrileño

Membre Honoré
L'affichage de ce logo utiliserait environ 40 % du CPU sous Internet Explorer et environ 50 % sous Firefox, contre seulement 25 % sous Chrome, le navigateur de Google. Google cherchait-il à prouver la supériorité de son navigateur ?
C'est un exemple intéressant pour Google Chrome.
 

Chris30leboss

Nouveau WRInaute
Personne pour me répondre? :(

Sinon, par rapport à IE et FF, l'animation est beaucoup mieux gérer sur FF (les boules sont de tailles différentes).
 

Madrileño

Membre Honoré

Boloky

WRInaute occasionnel
Bah dans ton cas on voit bien les boules du logo mais aucune animation !! Un simple copié collé ne suffit donc pas.
 

Madrileño

Membre Honoré
Afficher le code source de la page.

N'hésitez pas à participer sur le forum en répondant aussi à d'autres topics (présentant vos avis par exemple).
 

fredfan

WRInaute accro
En local chez moi le logo fixe ne s'efface pas quand on active les ronds (firefox, IE et safari)
C'est dommage, je la trouve plus fluide que l'animation dotty dots, qui elle marche par contre
 

fredfan

WRInaute accro
J'ai fait ça en trois coups de cuillère à pot :
http://poufi.net
J'ai enlevé le formulaire et le javascript google analytics,ce qui nettoie déjà un peu le code
Je n'ai pas encore nettoyé le js parce que je suis nul, mais je vais m'y coller. Il faut enlever le bout de code qui prend le mot dans le formulaire
Les couleurs se changent dans :
var baseColor = [ [355,50], [355,50], [355,50], [355,50] ]; (euh... ok c'est du codage au tranchoir encore)
et le texte dans :
hexphrase = "506f756669"; (en hexadécimal)
Si tu fais enregistrer sous sur firefox (et sans doute d'autres) il te sauvera aussi un dossier bubble avec les js.
 

Chris30leboss

Nouveau WRInaute
Donc donc, voilà la page d'essai:

http://www.entraide-info.com/rubrique,essai-forumactif,562345.html

Et, voilà le code:

Code:
<script type="text/javascript" src="http://s3.e-monsite.com/2010/09/14/09/jquery.js"></script>
	<script type="text/javascript" src="http://s3.e-monsite.com/2010/09/14/09/alphabet.js"></script>
	<script type="text/javascript" src="http://s3.e-monsite.com/2010/09/14/10/main.js"></script>
	<style type="text/css">.fb_hidden{position:absolute;top:-10000px;z-index:10001}
.fb_reset{background:none;border-spacing:0;border:0;color:#000;cursor:auto;direction:ltr;font-family:"lucida grande", tahoma, verdana, arial, sans-serif;font-size:11px;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:1;margin:0;overflow:visible;padding:0;text-align:left;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;visibility:visible;white-space:normal;word-spacing:normal}
.fb_link img{border:none}
.fb_dialog{position:absolute;top:-10000px;z-index:10001}
.fb_dialog_advanced{background:rgba(82, 82, 82, .7);padding:10px;-moz-border-radius:8px;-webkit-border-radius:8px}
.fb_dialog_content{background:#fff;color:#333}
.fb_dialog_close_icon{background:url(http://static.ak.fbcdn.net/rsrc.php/zA63Q/hash/8o4lssjn.gif) no-repeat scroll 3px 0 transparent;cursor:pointer;display:block;height:16px;position:absolute;right:19px;top:18px;width:14px;top:10px\9;right:7px\9}
.fb_dialog_close_icon:hover{background:url(http://static.ak.fbcdn.net/rsrc.php/zA63Q/hash/8o4lssjn.gif) no-repeat scroll -10px 0 transparent}
.fb_dialog_loader{background-color:#f2f2f2;border:1px solid #606060;font-size:24px;padding:20px}
#fb_dialog_loader_close{background:url(http://static.ak.fbcdn.net/rsrc.php/z2APY/hash/41s5ptdj.gif) no-repeat scroll left top transparent;cursor:pointer;display:-moz-inline-block;display:inline-block;height:9px;margin-left:20px;position:relative;vertical-align:middle;width:9px}
#fb_dialog_loader_close:hover{background-image:url(http://static.ak.fbcdn.net/rsrc.php/z7ZL1/hash/bf2f4q72.png)}
.fb_dialog_top_left,
.fb_dialog_top_right,
.fb_dialog_bottom_left,
.fb_dialog_bottom_right{height:10px;width:10px;overflow:hidden;position:absolute}
.fb_dialog_top_left{background:url(http://static.ak.fbcdn.net/rsrc.php/zEYDZ/hash/4xk9rts8.png) no-repeat 0 0;left:-10px;top:-10px}
.fb_dialog_top_right{background:url(http://static.ak.fbcdn.net/rsrc.php/zEYDZ/hash/4xk9rts8.png) no-repeat 0 -10px;right:-10px;top:-10px}
.fb_dialog_bottom_left{background:url(http://static.ak.fbcdn.net/rsrc.php/zEYDZ/hash/4xk9rts8.png) no-repeat 0 -20px;bottom:-10px;left:-10px}
.fb_dialog_bottom_right{background:url(http://static.ak.fbcdn.net/rsrc.php/zEYDZ/hash/4xk9rts8.png) no-repeat 0 -30px;right:-10px;bottom:-10px}
.fb_dialog_vert_left,
.fb_dialog_vert_right,
.fb_dialog_horiz_top,
.fb_dialog_horiz_bottom{position:absolute;background:#525252;filter:alpha(opacity=70);opacity:.7}
.fb_dialog_vert_left,
.fb_dialog_vert_right{width:10px;height:100%}
.fb_dialog_vert_left{margin-left:-10px}
.fb_dialog_vert_right{right:0;margin-right:-10px}
.fb_dialog_horiz_top,
.fb_dialog_horiz_bottom{width:100%;height:10px}
.fb_dialog_horiz_top{margin-top:-10px}
.fb_dialog_horiz_bottom{bottom:0;margin-bottom:-10px}
.fb_dialog_iframe{line-height:0}
.fb_iframe_widget{position:relative;display:-moz-inline-block;display:inline-block}
.fb_iframe_widget iframe{position:relative;vertical-align:text-bottom}
.fb_iframe_widget span{position:relative}
.fb_hide_iframes iframe{position:relative;left:-10000px}
.fb_iframe_widget_loader{position:relative;display:inline-block}
.fb_iframe_widget_loader iframe{min-height:32px;z-index:2;zoom:1}
.fb_iframe_widget_loader .FB_Loader{background:url(http://static.ak.fbcdn.net/rsrc.php/z5R48/hash/ejut8v2y.gif) no-repeat;height:32px;width:32px;margin-left:-16px;position:absolute;left:50%;z-index:4}
.fb_button_simple,
.fb_button_simple_rtl{background-image:url(http://static.ak.fbcdn.net/rsrc.php/z6IY3/hash/5gh7aaaq.png);background-repeat:no-repeat;cursor:pointer;outline:none;text-decoration:none}
.fb_button_simple_rtl{background-position:right 0}
.fb_button_simple .fb_button_text{margin:0 0 0 20px;padding-bottom:1px}
.fb_button_simple_rtl .fb_button_text{margin:0 10px 0 0}
a.fb_button_simple:hover .fb_button_text,
a.fb_button_simple_rtl:hover .fb_button_text,
.fb_button_simple:hover .fb_button_text,
.fb_button_simple_rtl:hover .fb_button_text{text-decoration:underline}
.fb_button,
.fb_button_rtl{background:#29447e url(http://static.ak.fbcdn.net/rsrc.php/zDYYQ/hash/deh9tyqv.png);background-repeat:no-repeat;cursor:pointer;display:inline-block;padding:0 0 0 1px;text-decoration:none;outline:none}
.fb_button .fb_button_text,
.fb_button_rtl .fb_button_text{background:#5f78ab url(http://static.ak.fbcdn.net/rsrc.php/zDYYQ/hash/deh9tyqv.png);border-top:solid 1px #879ac0;border-bottom:solid 1px #1a356e;color:#fff;display:block;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-weight:bold;padding:2px 6px 3px 6px;margin:1px 1px 0 21px;text-shadow:none}
a.fb_button,
a.fb_button_rtl,
.fb_button,
.fb_button_rtl{text-decoration:none}
a.fb_button:active .fb_button_text,
a.fb_button_rtl:active .fb_button_text,
.fb_button:active .fb_button_text,
.fb_button_rtl:active .fb_button_text{border-bottom:solid 1px #29447e;border-top:solid 1px #45619d;background:#4f6aa3;text-shadow:none}
.fb_button_xlarge,
.fb_button_xlarge_rtl{background-position:left -60px;font-size:24px;line-height:30px}
.fb_button_xlarge .fb_button_text{padding:3px 8px 3px 12px;margin-left:38px}
a.fb_button_xlarge:active{background-position:left -99px}
.fb_button_xlarge_rtl{background-position:right -268px}
.fb_button_xlarge_rtl .fb_button_text{padding:3px 8px 3px 12px;margin-right:39px}
a.fb_button_xlarge_rtl:active{background-position:right -307px}
.fb_button_large,
.fb_button_large_rtl{background-position:left -138px;font-size:13px;line-height:16px}
.fb_button_large .fb_button_text{margin-left:24px;padding:2px 6px 4px 6px}
a.fb_button_large:active{background-position:left -163px}
.fb_button_large_rtl{background-position:right -346px}
.fb_button_large_rtl .fb_button_text{margin-right:25px}
a.fb_button_large_rtl:active{background-position:right -371px}
.fb_button_medium,
.fb_button_medium_rtl{background-position:left -188px;font-size:11px;line-height:14px}
a.fb_button_medium:active{background-position:left -210px}
.fb_button_medium_rtl{background-position:right -396px}
.fb_button_text_rtl,
.fb_button_medium_rtl .fb_button_text{padding:2px 6px 3px 6px;margin-right:22px}
a.fb_button_medium_rtl:active{background-position:right -418px}
.fb_button_small,
.fb_button_small_rtl{background-position:left -232px;font-size:10px;line-height:10px}
.fb_button_small .fb_button_text{padding:2px 6px 3px;margin-left:17px}
a.fb_button_small:active,
.fb_button_small:active{background-position:left -250px}
.fb_button_small_rtl{background-position:right -440px}
.fb_button_small_rtl .fb_button_text{padding:2px 6px;margin-right:18px}
a.fb_button_small_rtl:active{background-position:right -458px}
.fb_connect_bar_container div,
.fb_connect_bar_container span,
.fb_connect_bar_container a,
.fb_connect_bar_container img,
.fb_connect_bar_container strong{background:none;border-spacing:0;border:0;direction:ltr;font-style:normal;font-variant:normal;letter-spacing:normal;line-height:1;margin:0;overflow:visible;padding:0;text-align:left;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;visibility:visible;white-space:normal;word-spacing:normal;vertical-align:baseline}
.fb_connect_bar_container{position:fixed;left:0 !important;right:0 !important;height:42px !important;padding:0 25px !important;margin:0 !important;vertical-align:middle !important;border-bottom:1px solid #333 !important;background:#3b5998 !important;z-index:99999999 !important;overflow:hidden !important}
.fb_connect_bar_container_ie6{position:absolute;top:expression(document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+"px":body.scrollTop+"px")}
.fb_connect_bar{position:relative;margin:auto;height:100%;width:100%;padding:6px 0 0 0 !important;background:none;color:#fff !important;font-family:"lucida grande", tahoma, verdana, arial, sans-serif !important;font-size:13px !important;font-style:normal !important;font-variant:normal !important;font-weight:normal !important;letter-spacing:normal !important;line-height:1 !important;text-decoration:none !important;text-indent:0 !important;text-shadow:none !important;text-transform:none !important;white-space:normal !important;word-spacing:normal !important}
.fb_connect_bar a:hover{color:#fff}
.fb_connect_bar .fb_profile img{height:30px;width:30px;vertical-align:middle;margin:0 6px 5px 0}
.fb_connect_bar div a,
.fb_connect_bar span,
.fb_connect_bar span a{color:#bac6da;font-size:11px;text-decoration:none}
.fb_connect_bar .fb_buttons{float:right;margin-top:7px}
.fb_edge_widget_with_comment{position:relative;*z-index:1000}
.fb_edge_widget_with_comment span.fb_edge_comment_widget{position:absolute}
.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr{left:-4px}
.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_rtl{left:2px}
.fb_share_count_wrapper{position:relative;float:left}
.fb_share_count{background:#b0b9ec none repeat scroll 0 0;color:#333;font-family:"lucida grande", tahoma, verdana, arial, sans-serif;text-align:center}
.fb_share_count_inner{background:#e8ebf2;display:block}
.fb_share_count_right{margin-left:-1px;display:inline-block}
.fb_share_count_right .fb_share_count_inner{border-top:solid 1px #e8ebf2;border-bottom:solid 1px #b0b9ec;margin:1px 1px 0 1px;font-size:10px;line-height:10px;padding:2px 6px 3px;font-weight:bold}
.fb_share_count_top{display:block;letter-spacing:-1px;line-height:34px;margin-bottom:7px;font-size:22px;border:solid 1px #b0b9ec}
.fb_share_count_nub_top{border:none;display:block;position:absolute;left:7px;top:35px;margin:0;padding:0;width:6px;height:7px;background-repeat:no-repeat;background-image:url(http://static.ak.fbcdn.net/rsrc.php/zCXBS/hash/89zgzk50.png)}
.fb_share_count_nub_right{border:none;display:inline-block;padding:0;width:5px;height:10px;background-repeat:no-repeat;background-image:url(http://static.ak.fbcdn.net/rsrc.php/zAQB0/hash/1a8txe26.png);vertical-align:top;background-position:right 5px;z-index:10;left:2px;margin:0 2px 0 0;position:relative}
.fb_share_no_count{display:none}
.fb_share_size_Small .fb_share_count_right .fb_share_count_inner{font-size:10px}
.fb_share_size_Medium .fb_share_count_right .fb_share_count_inner{font-size:11px;padding:2px 6px 3px;letter-spacing:-1px;line-height:14px}
.fb_share_size_Large .fb_share_count_right .fb_share_count_inner{font-size:13px;line-height:16px;padding:2px 6px 4px;font-weight:normal;letter-spacing:-1px}
.fb_share_count_hidden .fb_share_count_nub_top,
.fb_share_count_hidden .fb_share_count_top,
.fb_share_count_hidden .fb_share_count_nub_right,
.fb_share_count_hidden .fb_share_count_right{visibility:hidden}</style></head><body>
<header role="banner">
	<canvas id="c" style="position: absolute;" width="1280" height="831"></canvas>

C'est du coupage, découpage et collage, mais c'est un bon début ^^

Le boules s'animent déjà (oui euh!! passez le curseur plus haut à gauche de l'animation ;)).

Merci :)
 

Chris30leboss

Nouveau WRInaute
Oui, justement, j'ai une question concernant le Forum.

Vous m'avez dit que je pouvais demander des avis sur mon site, mais sur quelle catégorie de Forum?

Merci d'avance! :)
 

Chris30leboss

Nouveau WRInaute
J'ai déjà hébergé les fichiers, comme dit:

J'ai fait ça en trois coups de cuillère à pot :
http://poufi.net
J'ai enlevé le formulaire et le javascript google analytics,ce qui nettoie déjà un peu le code
Je n'ai pas encore nettoyé le js parce que je suis nul, mais je vais m'y coller. Il faut enlever le bout de code qui prend le mot dans le formulaire
Les couleurs se changent dans :
var baseColor = [ [355,50], [355,50], [355,50], [355,50] ]; (euh... ok c'est du codage au tranchoir encore)
et le texte dans :
hexphrase = "506f756669"; (en hexadécimal)
Si tu fais enregistrer sous sur firefox (et sans doute d'autres) il te sauvera aussi un dossier bubble avec les js.

Et je cherche le code pour mettre en place tout ca :)

Merci, et désolé :)
 

Madrileño

Membre Honoré
Le mieux est d'essayer si en local cela fonctionne d'abord. Après l'ajouter au site pour vérifier que les scripts fonctionnent tous. Des fois c'est pour ça qu'un script ne fonctionne pas.
 

Madrileño

Membre Honoré
Après c'est une question de design en général et certaines fois de script.
Le plus simple serait de le présenter avec une nouvelle page c'est vite fait au lieu de perdre du temps.
 

Discussions similaires

Haut