DHP {Codes HTML pour des effets magiques}

ACCUEIL

FORUM

FAQ

CONTACT

Menu

Accueil
FAQ
Forum
Vos droits
Publicités

Créations

Bannières
Intros flash
Codes HTML Polices HP
Banque images
Annuaire HP Cartes musicales

Partenaires

Devenez partenaires

Inscrivez votre site HP dans l'annuaire

Votre pub sur ce site

Codes HTML pour des effets magiques

Reçois les News DHP par sms (1 appel = abonnement 4 news) en appelant le numéro ci-dessous et en tapant le code orange

Le code service est :

21500

Comment les insérer sur mon site ?

Il suffit de suivre le lien si vous ne savez pas !

Si vous ni arrivez pas, écrivez moi !

Les codes HTML

Attention ! Les codes sont dans des zones de texte ! Alors ils peuvent s'effacer ! Alors si par mégarde vous avez effacé quelque chose, cliquez ici !

Vocabulaire important :

*"l'entête" est la partie qui se situe entre les balises <head> et </head>

*"le corps" est la partie qui se situe entre les balises <body> et </body>

Menu : Accédez directement au code voulu :

1) Texte qui tremble

2) Texte qui clignote

3) De la neige sur votre page

4) Une image qui traverse l'écran

5) Ouverture de la page en rideau

1) Effet produit : Texte qui tremble

Voir l'effet

Étape 1 : code à insérer dans l'entête de votre page

Étape 2 : Placez ensuite cette portion de code dans le corps de votre page en précisant le même texte pour chaque calque (remplacez "vive Harry Potter" par votre texte)

<BODY onLoad="initObjects()"> <div id="shaketick0" class="ticker" style="COLOR: #ffeeee"> Vive Harry Potter ! </div> <div id="shaketick1" class="ticker" style="COLOR: #ffcccc"> Vive Harry Potter ! </div> <div id="shaketick2" class="ticker" style="COLOR: #ff9999"> Vive Harry Potter ! </div> <div id="shaketick3" class="ticker" style="COLOR: #ff7777"> Vive Harry Potter ! </div> <div id="shaketick4" class="ticker" style="COLOR: #ff5555"> Vive Harry Potter ! </div> <div id="shaketick5" class="ticker" style="COLOR: #ff2222"> Vive Harry Potter ! </div> <div id="shaketick6" class="ticker" style="COLOR: #ff0000"> Vive Harry Potter ! </div> </body>

2) Effet produit : Texte qui clignote

Voir l'effet

Étape 1 : insérer ce script entre la balise <head> et </head> de votre page

Étape 2 : insérez ce script dans votre page (entre <body> et </body>) et remplacez "vive DHP" par votre texte

Étape 3 : remplacez la balise <body> de votre page par la balise <BODY onLoad="doFlash()">

3) Effet produit : De la neige (pluie)

Voir l'effet

Étape 1 : Insérez ce script après la balise <body>

<SCRIPT LANGUAGE="JavaScript"> var no = 50; var speed = 1; var ns4up = (document.layers) ? 1 : 0; var ie4up = (document.all) ? 1 : 0; var s, x, y, sn, cs; var a, r, cx, cy; var i, doc_width = 800, doc_height = 600; function initRain() { a = 6; r[i] = 1; sn = Math.sin(a); cs = Math.cos(a); cx[i] = Math.random() * doc_width + 1; cy[i] = Math.random() * doc_height + 1; x[i] = r[i] * sn + cx[i]; y[i] = cy[i]; } function makeRain() { r[i] = 1; cx[i] = Math.random() * doc_width + 1; cy[i] = 1; x[i] = r[i] * sn + cx[i]; y[i] = r[i] * cs + cy[i]; } function updateRain() { r[i] += s; x[i] = r[i] * sn + cx[i]; y[i] = r[i] * cs + cy[i]; } function raindropNS() { for (i = 0; i < no; ++ i) { updateRain(); if ((x[i] <= 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) { makeRain(); doc_width = self.innerWidth; doc_height = self.innerHeight; } document.layers["dot"+i].top = y[i]; document.layers["dot"+i].left = x[i]; } setTimeout("raindropNS()", speed); } function raindropIE() { for (i = 0; i < no; ++ i) { updateRain(); if ((x[i] <= 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) { makeRain(); doc_width = document.body.clientWidth; doc_height = document.body.clientHeight; } document.all["dot"+i].style.pixelTop = y[i]; document.all["dot"+i].style.pixelLeft = x[i]; } setTimeout("raindropIE()", speed); } if (ns4up) { doc_width = self.innerWidth; doc_height = self.innerHeight; } else if (ie4up) { doc_width = document.body.clientWidth; doc_height = document.body.clientHeight; } x = new Array(); y = new Array(); r = new Array(); cx = new Array(); cy = new Array(); s = 8; for (i = 0; i < no; ++ i) { initRain(); if (ns4up) { if (i == 0) { document.write("<layer name='dot"+i+"' left='1' top='1' visibility='show'><font color='blue'>,</font></layer>"); } else { document.write("<layer name='dot"+i+"' left='1' top='1' visibility='show'><font color='blue'>,</font></layer>"); } } else if (ie4up) { if (i == 0) { document.write("<div id='dot"+i+"' style='POSITION: absolute; Z-INDEX: "+i+"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;'><font color='blue'>,</font></div>"); } else { document.write("<div id='dot"+i+"' style='POSITION: absolute; Z-INDEX: "+i+"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;'><font color='blue'>,</font></div>"); } } } if (ns4up) { raindropNS(); } else if (ie4up) { raindropIE(); } // End --> </SCRIPT>

Étape 2 : Précisez le nombre de gouttes de pluie que vous souhaitez voir tomber sur votre site (var no = 50;) et la vitesse de celles-ci (var speed = 1;)

4) Effet produit : Une image traverse l'écran

Voir l'effet

Étape 1 : Insérez ce script entre les balises <head> et </head>

Étape 2 : Insérez ce script dans le corps de votre page, remplacez "votre_image.jpg" par le nom de votre image, ajustez la taille du calque avec celle de votre image (width: 188) et la régler aussi dans le script de l'animation (if (parseInt(anim.left) <- 188)). Et pour finir, réglez la hauteur en pixel à laquelle l'image traversera votre page (top: 140).

Étape 3 : Changer la balise <body> par la balise <body onload="init();">

5) Effet produit : Ouverture en rideau

Voir l'effet

Étape 1 : Insérez ce script dans l'entête de votre page (ajustez la couleur de votre choix : red = rouge, green = vert...)

Étape 2 : Copiez ensuite ce script juste après la balise <body>

<div id="i1" class="intro"></div> <div id="i2" class="intro"></div> <script language="JavaScript1.2"> var speed=20 var temp=new Array() var temp2=new Array() if (document.layers){ for (i=1;i<=2;i++){ temp[i]=eval("document.i"+i+".clip") temp2[i]=eval("document.i"+i) temp[i].width=window.innerWidth/2 temp[i].height=window.innerHeight temp2[i].left=(i-1)*temp[i].width } } else if (document.all){ var clipright=document.body.clientWidth/2,clipleft=0 for (i=1;i<=2;i++){ temp[i]=eval("document.all.i"+i+".style") temp[i].width=document.body.clientWidth/2 temp[i].height=document.body.offsetHeight temp[i].left=(i-1)*parseInt(temp[i].width) } } function openit(){ window.scrollTo(0,0) if (document.layers){ temp[1].right-=speed temp[2].left+=speed if (temp[2].left>window.innerWidth/2) clearInterval(stopit) } else if (document.all){ clipright-=speed temp[1].clip="rect(0 "+clipright+" auto 0)" clipleft+=speed temp[2].clip="rect(0 auto auto "+clipleft+")" if (clipright<=0) clearInterval(stopit) } } function gogo(){ stopit=setInterval("openit()",100) } gogo() </script>

Site créé par kirjava websites, toutes reproductions interdites, certains documents distribués sur ce site sont libre de droits, d'autre non. Référez-vous à la page "vos droits". Toutes les images incorporées sur ce site sont la propriété de la Warner Bross, si vous désirez les diffuser sur votre site il est obligatoire de le préciser.

Webmaster : kirjava Crédits : Warner Bross™ / J.K Rowling Designer HP 2004

Devenez partenaire !