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>
<!-- début
function non(clic) {
var msg="VOTRE_MESSAGE";
if (navigator.appName == 'Netscape' && clic.which==3) {
alert(msg);
return false;}
else
if (navigator.appName == 'Microsoft Internet Explorer' && event.button==2) {
alert(msg);
return false;
}
return true;
}
document.onmousedown = non;
// fin -->
</SCRIPT>
--------------------------
Un Text différent a chaque fois
- Code:
-
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var a = Math.random() + ""
var rand1 = a.charAt(5)
quotes = new Array
quotes[1] = "première phrase"
quotes[2] = "deuxième phrase"
quotes[3] = "troisième phrase"
quotes[4] = "quatrième phrase"
quotes[5] = "cinquième phrase"
quotes[6] = "sixième phrase"
quotes[7] = "septième phrase"
quotes[8] = "huitième phrase"
quotes[9] = "neuvième phrase"
quotes[0] = "dixième phrase"
var quote = quotes[rand1]
document.write(quote);
// End -->
</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">
<!-- Original: Randy Bennett (rbennett@thezone.net) -->
<!-- Begin
function setVariables() {
imgwidth=65; // largeur de l'image
imgheight=45; // hauteur de l'image
if (navigator.appName == "Netscape") {
horz=".left";
vert=".top";
docStyle="document.";
styleDoc="";
innerW="window.innerWidth";
innerH="window.innerHeight";
offsetX="window.pageXOffset";
offsetY="window.pageYOffset";
}
else {
horz=".pixelLeft";
vert=".pixelTop";
docStyle="";
styleDoc=".style";
innerW="document.body.clientWidth";
innerH="document.body.clientHeight";
offsetX="document.body.scrollLeft";
offsetY="document.body.scrollTop";
}
}
function checkLocation() {
objectXY="branding";
var availableX=eval(innerW);
var availableY=eval(innerH);
var currentX=eval(offsetX);
var currentY=eval(offsetY);
x=availableX-(imgwidth+30)+currentX;
y=availableY-(imgheight+20)+currentY;
evalMove();
setTimeout("checkLocation()",10);
}
function evalMove() {
eval(docStyle + objectXY + styleDoc + horz + "=" + x);
eval(docStyle + objectXY + styleDoc + vert + "=" + y);
}
// End -->
</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">
<!-- debut de code
if (navigator.appVersion.substring(0,1) >= 3) {
i1=new Image;
i1.src='image1';
i2=new Image;
i2.src='image2';
}
// fin du code -->
</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">
<!--
var timeDelay = 5(a modif au cas ou);
var Pix = new Array
("mon_image_01.jpg"
,"mon_image_02.jpg"
,"mon_image_03.jpg"
,"mon_image_04.jpg"
);
var howMany = Pix.length;
timeDelay *= 1000;
var PicCurrentNum = 0;
var PicCurrent = new Image();
PicCurrent.src = Pix[PicCurrentNum];
function startPix() {
setInterval("slideshow()", timeDelay);
}
function slideshow() {
PicCurrentNum++;
if (PicCurrentNum == howMany) {
PicCurrentNum = 0;
}
PicCurrent.src = Pix[PicCurrentNum];
document["ChangingPix"].src = PicCurrent.src;
}
// End -->
</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">
<!--
function getTime() {
now = new Date();
y2k = new Date("Mar 31 2002 00:00:00");
days = (y2k - now) / 1000 / 60 / 60 / 24;
daysRound = Math.floor(days);
hours = (y2k - now) / 1000 / 60 / 60 - (24 * daysRound);
hoursRound = Math.floor(hours);
minutes = (y2k - now) / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
minutesRound = Math.floor(minutes);
seconds = (y2k - now) / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
secondsRound = Math.round(seconds);
sec = (secondsRound == 1) ? " seconde" : " secondes";
min = (minutesRound == 1) ? " minute" : " minutes, ";
hr = (hoursRound == 1) ? " heure" : " heures, ";
dy = (daysRound == 1) ? " jour" : " jours, "
document.timeForm.input1.value = "Encore " + daysRound + dy + hoursRound + hr + minutesRound + min + secondsRound + sec + " avant le passage des cloches !";
newtime = window.setTimeout("getTime();", 1000);
}
// -->
</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">
<!-- Original: Michael Tartaglia <stonedstan@hotmail.com> -->
<!-- Begin
day = new Date();
miVisit = day.getTime();
function clock() {
dayTwo = new Date();
hrNow = dayTwo.getHours();
mnNow = dayTwo.getMinutes();
scNow = dayTwo.getSeconds();
miNow = dayTwo.getTime();
if (hrNow == 0) {
hour = 12;
ap = " AM";
} else if(hrNow <= 11) {
ap = " AM";
hour = hrNow;
} else if(hrNow == 12) {
ap = " PM";
hour = 12;
} else if (hrNow >= 13) {
hour = (hrNow - 12);
ap = " PM";
}
if (hrNow >= 13) {
hour = hrNow - 12;
}
if (mnNow <= 9) {
min = "0" + mnNow;
}
else (min = mnNow)
if (scNow <= 9) {
secs = "0" + scNow;
} else {
secs = scNow;
}
time = hour + ":" + min + ":" + secs + ap;
document.form.button.value = time;
self.status = time;
setTimeout('clock()', 1000);
}
function timeInfo() {
milliSince = miNow;
milliNow = miNow - miVisit;
secsVisit = Math.round(milliNow / 1000);
minsVisit = Math.round((milliNow / 1000) / 60);
alert("Vous avez passé " + milliNow + " millisecondes sur cette page"
+ "... soit environ " + minsVisit + " minutes, et "
+ secsVisit + " secondes.");
}
document.write("<form name="form">"
+ "<input type=button value="Click for info!""
+ " name=button onClick="timeInfo()"></form>");
onError = null;
clock();
// End -->
</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">
<!--
function getRemaining() {
today = new Date();
targetdate = new Date("December 25, 2001");
targetdate.setYear(today.getYear());
milliseconds = (24 * 60 * 60 * 1000);
remaining = ((targetdate.getTime() - today.getTime()) / milliseconds);
remaining = Math.round(remaining);
}
// -->
</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">
<!--
getRemaining();
document.write("Il vous reste ",remaining," Avant Paques!");
// -->
</SCRIPT>
--------------------------
Un curseur de type sniper
Intégrez entre <*HEAD*>
- Code:
-
<style>
<!--
#leftright, #topdown{
position:absolute;
left:0;
top:0;
width:1px;
height:1px;
layer-background-color:black;
background-color:black;
z-index:100;
font-size:1px;
}
-->
</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">
<!--
/*
Document crosshair Script-
By Dynamic Drive (www.dynamicdrive.com)
*/
if (document.all&&!window.print){
leftright.style.width=document.body.clientWidth-2
topdown.style.height=document.body.clientHeight-2
}
else if (document.layers){
document.leftright.clip.width=window.innerWidth
document.leftright.clip.height=1
document.topdown.clip.width=1
document.topdown.clip.height=window.innerHeight
}
function followmouse1(){
//move cross engine for IE 4+
leftright.style.pixelTop=document.body.scrollTop+event.clientY+1
topdown.style.pixelTop=document.body.scrollTop
if (event.clientX<document.body.clientWidth-2)
topdown.style.pixelLeft=document.body.scrollLeft+event.clientX+1
else
topdown.style.pixelLeft=document.body.clientWidth-2
}
function followmouse2(e){
//move cross engine for NS 4+
document.leftright.top=e.y+1
document.topdown.top=pageYOffset
document.topdown.left=e.x+1
}
if (document.all)
document.onmousemove=followmouse1
else if (document.layers){
window.captureEvents(Event.MOUSEMOVE)
window.onmousemove=followmouse2
}
function regenerate(){
window.location.reload()
}
function regenerate2(){
setTimeout("window.onresize=regenerate",400)
}
if ((document.all&&!window.print)||document.layers)
//if the user is using IE 4 or NS 4, both NOT IE 5+
window.onload=regenerate2
//-->
</script></p>
A suivre...