Habbows.com ~ Le forum

Toute l'équipe te souhaite la bienvenue !
 
AccueilSiteContactS'enregistrerConnexion



Partagez | 
 

 Astuces HTML

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
ptdr998
Administrateur
Administrateur
avatar

Messages Messages : 575

MessageSujet: Astuces HTML    Sam 8 Jan 2011 - 23:47


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:
HABBOWS.EU

--------------------------
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...

_________________________________________________
Coordiialement : ptdr998, fondateur
Revenir en haut Aller en bas
MrKevin1506

avatar

Messages Messages : 138

MessageSujet: Re: Astuces HTML    Dim 9 Jan 2011 - 11:31

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
Revenir en haut Aller en bas
multi

avatar

Messages Messages : 63

MessageSujet: Re: Astuces HTML    Dim 9 Jan 2011 - 14:02

Bravo :p
Revenir en haut Aller en bas
Mathilde
Responsable Modérateurs
Responsable Modérateurs
avatar

Messages Messages : 347

MessageSujet: Re: Astuces HTML    Lun 10 Jan 2011 - 21:02

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

_________________________________________________
William Shakeaspeare. ♥️
Revenir en haut Aller en bas
MrKevin1506

avatar

Messages Messages : 138

MessageSujet: Re: Astuces HTML    Mar 11 Jan 2011 - 18:07

Mais, je comprends pas en fait ?
Où les mettre ?
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Astuces HTML    

Revenir en haut Aller en bas
 
Astuces HTML
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [SANS SUITE] Astuces et Conseils pour creation de niveaux [psp]
» Vos astuces pour se faire des Kamas !
» Astuces Virtua Tennis 2
» Astuces et bon plans du web. (en construction)
» Revoir les astuces du jeu

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Habbows.com ~ Le forum :: Concours/Evenements :: Blablazone-
Sauter vers: