Astuces HTML

Administrateur Messages : 575

Voici une poignée d'astuce ^^

Message en quittant la page

Ajoutez simplement l'attribut onUnload à la balise <*body*> de votre site. (sans étoiles)

Code:: <BODY onUnload="alert('Merci de votre visite ! A bientôt !')">

--------------------------
Légende d'une image

Code:: <A HREF="javascript:void(0)" OnClick="alert('Légende image')"><IMG SRC="URL_IMAGE" border="0"></A>

Ceci ne marche que sur les sites, et non sur les forums !
Pour voir l'effet, cliquez ICI
(n'oubliez pas de cliquez sur l'image ^^)

--------------------------
Bouton-Sources

Code:: <FORM>
<INPUT TYPE=button NAME="view" VALUE=" Visualiser le code source "
OnClick='window.location="view-source:" +window.location.href'>
</FORM>

Ce script permet de visionner les sources de la page/site

--------------------------
Fond d'écran Fix

Code:: <body background="image" bgproperties="fixed">

Ce script vous permet de faire un fond d'écran fix qui ne bouge pas.

--------------------------
Anti-Clique droit

Placez ce script entre les balises et de votre code HTML :

Code:: <SCRIPT language=JavaScript1.1>

</SCRIPT>

--------------------------
Un Text différent a chaque fois

Code:: <SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

--------------------------
Compte a rebours avant la fermeture de la page

Code:: <BODY OnLoad='compt=setTimeout("self.close();",5000)'>

Pour personaliser ce script, précisez simplement la délai en milisecondes avant la fermeture de la fenêtre (ici 5000 soit 5 secondes).

--------------------------
Positionner une image au pixel près

Code:: <IMG STYLE="position:absolute; TOP:45px; LEFT:180px; WIDTH:100px; HEIGHT:100px" SRC="URL_IMAGE">

Cette astuce ne fonctionne pas sous Netscape

--------------------------
Une image toujours visible

Ce JavaScript permet d'afficher en permanence une image (votre logo par exemple) en bas à droite sur une page, quels que soient les déplacements de vos visiteurs sur cette page.

Placez entre <*HEAD*> et <*/HEAD*> :

Code:: <SCRIPT LANGUAGE="JavaScript">



</SCRIPT>

Puis dans la balise <*BODY*> insérez :

Code:: <BODY onload="setVariables(); checkLocation();"><div id="branding" style="position:absolute; visibility:show; left:235px; top:-50px; z-index:2">
<table width=10 bgcolor=#ffffff><td>
<a href="index.html" onmouseover="window.status='Merci pour la visite !';return true" onmouseout="window.status='';return true"><center><img src="votreimage.gif" width="65" height="45" border="0"></center></a></font></td>
</table>
</div>

--------------------------
Précharger les images d'une page

A placer entre les balises HEAD

Code:: <SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

Où image1 et image2 sont les noms des fichiers d'images que vous allez précharger. Vous ajouterez bien entendu les deux lignes contenant le nom d'une image autant de fois que vous en avez dans votre page.

--------------------------
Diapo auto d'images

Code:: <SCRIPT LANGUAGE="JavaScript">

</script>

--------------------------
Aérés ses images

Pour éviter qu'une image ne serre de trop près le texte qu'il encadre, utilisez les attributs d'espacement vertical et horizontal de la balise IMG.

Code:: <IMG src="votre_image" Vspace="10" Hspace="20">

--------------------------
Infobulle image en passant la souris dessus

Code:: <img src="image" alt="texte">

Réultat:

--------------------------
Une navigation aléatoire

Ce JavaScript va vous permettre de piocher aléatoirement dans un stock d'URL lorsque vous cliquez sur un lien unique. C'est une fonction random qui se matérialise par les lignes suivantes, à placer entre les balises HEAD

Code:: <SCRIPT LANGUAGE="JavaScript">
function GetRandomURL()
{
var locationlist = new URLList (
"http://www.lien1.com/",
"http://www.lien2.com/",
"http://www.lien3.com/",
"http://www.lien4.com/",
"http://www.lienx.com/"
);

num = Math.round ( ( rand.next() * (locationlist.count-1)) );

return locationlist.list[num];
}

function URLList () {
var argv = URLList.arguments;
var argc = argv.length;
this.list = new Object();
for (var i = 0; i < argc; i++)
this.list[i] = argv[i];
this.count = argc;
return this;
}

function NextRandomNumber() {
var hi = this.seed / this.Q;
var lo = this.seed % this.Q;
var test = this.A * lo - this.R * hi;
if (test > 0)
this.seed = test;
else
this.seed = test + this.M;
return (this.seed * this.oneOverM);
}
function RandomNumberGenerator() {
var d = new Date();
this.seed = 2345678901 +
(d.getSeconds() * 0xFFFFFF) +
(d.getMinutes() * 0xFFFF);
this.A = 48271;
this.M = 2147483647;
this.Q = this.M / this.A;
this.R = this.M % this.A;
this.oneOverM = 1.0 / this.M;
this.next = NextRandomNumber;
return this;
}
var rand = new RandomNumberGenerator();
</SCRIPT>

Puis, faite un lien pour les diriges a la pages ou il y a les codes ci-dessus

--------------------------
Pluie sur le site

Code:: <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>

--------------------------
Afficher le cadre d'une image au survol de la souris

Code:: <img name="image_1" src="mon_image.gif" onmouseout="this.border=0" onmouseover="this.border=1" border="0">

--------------------------
Un décompte très précis

Envie de savoir combien de temps vous devrez attendre avant un événement précis ? Ce compte à rebours vous donne en temps réel, et à la seconde près, le temps qu'il reste avant... Pâques par exemple.Pour créer ce décompte, copiez tout d'abord le script suivant dans l'en-tête de votre page. Précisez simplement la date de référence du compte à rebours en mode anglais. Ici, nous avons choisi Pâques à minuit (Apr 14 2002 00:00:00). Vous pouvez également personnaliser les textes d'affichage du script :

Code:: <SCRIPT LANGUAGE="JavaScript">

</script>

Insérez ensuite dans votre page le formulaire qui affichera la compte à rebours. Il s'agit d'un simple champ texte de la forme suivante :

Code:: <form name=timeForm>
<input type="texte" name=input1 size=110 border-style="none" style="border-bottom: 0px solid; border-left: 0px solid;border-right: 0px solid;border-top: 0px solid;font:12px arial, helvetica,sans-serif">
</form>

Il ne reste plus qu'à lancer l'exécution du script à l'aide de l'attribut onLoad de la balise <*body*> de votre page. Un jeu d'enfant :

Code:: <BODY onLoad="getTime()">

--------------------------
Un bouton horloge

Une petite horloge qui vous indique l'heure et, sur clic, le temps passé sur une page. Copiez le code suivant entre les tags <*BODY*>

Code:: <SCRIPT LANGUAGE="JavaScript">


</SCRIPT>

--------------------------
Compte a rebours 2

Un compte à rebours, ça peut servir à compter le nombre de jours qu'il reste d'ici à Paques :
Placez ce script entre les balises <*head*>

Code:: <SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

La date butoir de votre compte à rebours doit être formulée en anglais de la façon suivante : December 25, 2001 (Mois Jour, Année).
Placez ensuite cette portion de code à l'endroit où vous souhaitez que le compte à rebours s'affiche :

Code:: <SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

--------------------------
Un curseur de type sniper

Intégrez entre <*HEAD*>

Code:: <style>

</style>

Puis, entre et :

Code:: <p><div id="leftright" style="width:expression(document.body.clientWidth-2)"></div>
<div id="topdown" style="height:expression(document.body.clientHeight-2)"></div>

<script language="JavaScript1.2">

</script></p>

A suivre...

Messages : 138

Je comprends rien du tout oO
Il faut les placer direct dans le texte ?

Impossible sur ce forum, et il faudrait un site pour que tout marche

Messages : 63

Bravo :p

Responsable Modérateurs Messages : 347

Bravo,j'ai tout compris (:
*n'a rien compris Ô_o xd*
Sinon,c'est super ;d

Messages : 138

Mais, je comprends pas en fait ?
Où les mettre ?