Codes HTML : de quoi agrémenter vos pages

Vous pouvez utiliser un générateur de tableaux pour éviter de vous mélanger les pinceaux avec les balises d'ouverture et de fermeture ! NB : Pour les utilisateurs de e-monsite, il faut absolument enlever tous les espaces et retour à la ligne, sinon le tableau ne s'affiche pas ! Les bordures : On peut définir les bordures pour le tableau en entier dans la balise "table" ou pour une cellule seulement dans la balise "td".

La Variable 1 définit le type de bordure :

pas d'attribut spécifié

solid = ligne continue

dashed = ligne discontinue

dotted = ligne en pointillés

double = 2 lignes

groove = relief

ridge = ombré

inset = relief éclairé par le bas

outset = relief éclairé par le haut

La Variable 2 définit l'épaisseur de la bordure soit par un nombre, soit par un attribut :

border-width:1

border-width:5

border-width:10

border-width:thin (=fin)

border-width:medium (=moyen)

border-width:thick (=épais)

La Variable 3 définit la couleur de la bordure soit par son nom, soit par son code (voir un tableau de code de couleurs choisies, une palette de couleurs en camaïeu ou bien encore chercher une autre couleur) : La Variable 4 définit la couleur de l'arrière plan de la cellule ou du tableau. 4) Modifier son curseur

Sur toute la page :

Insérer dans la partie "head" : url étant l'adresse du curseur en format .ani ou .cur.
Voici un site où vous trouverez des fichiers .ani et où vous apprendrez à les créer vous-mêmes.

Pour un lien particulier, avec une forme prédéfinie de curseur :

Ajouter une balise "style" derrière l'url comme ceci : Variable : pointer (main); help (point d'interrogation), crosshair (croix de visée), move (croix de redimensionnement), text (texte), wait (sablier)

Avec l'image de votre choix (compatibilité e-monsite testée par Sécotine)

Insérer dans le "head" :
Et dans le "body" :
A modifier : l'adresse de l'image en jpeg ou gif (format 15X16 minimum conseillé)

Une trainée d'image derrière le curseur

A insérer dans le "body" :

<SCRIPT LANGUAGE="JavaScript"> 
/* 
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT 
http://www.editeurjavascript.com

Script basé sur Trail par E.D Prod 1998 
http://javascript.lab.cc 
*/ 
var Xpos = 50; 
var Ypos = 50; 
var vara="DIV ID"; 
var varb="/DIV"; 
var styl='style="position:absolute;left:0px;top:0px;width:32px;height:32px;visibility:hidden;"' 
chaine='<'+vara+'="obj1" '+styl+'>' 
chaine='<'+vara+'="obj1" '+styl+'>' 
+'<img src="adresse de l'image" border=0>' 
+'<'+varb+'>' 
+'<'+vara+'="obj2" '+styl+'>' 
+'<img src="adresse de l'image" border=0>' 
+'<'+varb+'>' 
+'<'+vara+'="obj3" '+styl+'>' 
+'<img src="adresse de l'image" border=0>' 
+'<'+varb+'>' 
+'<'+vara+'="obj4" '+styl+'>' 
+'<img src="adresse de l'image" border=0>' 
+'<'+varb+'>' 
+'<'+vara+'="obj5" '+styl+'>' 
+'<img src="adresse de l'image" border=0>' 
+'<'+varb+'>' 
+'<'+vara+'="obj6" '+styl+'>' 
+'<img src="adresse de l'image" border=0>' 
+'<'+varb+'>' 
+'<'+vara+'="obj7" '+styl+'>' 
+'<img src="adresse de l'image" border=0>' 
+'<'+varb+'>' 
+'<'+vara+'="obj8" '+styl+'>' 
+'<img src="adresse de l'image" border=0>' 
+'<'+varb+'>' 
+'<'+vara+'="obj9" '+styl+'>' 
+'<img src="adresse de l'image" border=0>' 
+'<'+varb+'>' 
+'<'+vara+'="obj10" '+styl+'>' 
+'<img src="adresse de l'image" border=0>' 
+'<'+varb+'>' 
document.write(chaine); 
var div1 = document.getElementById("obj1").style; 
var div2 = document.getElementById("obj2").style; 
var div3 = document.getElementById("obj3").style; 
var div4 = document.getElementById("obj4").style; 
var div5 = document.getElementById("obj5").style; 
var div6 = document.getElementById("obj6").style; 
var div7 = document.getElementById("obj7").style; 
var div8 = document.getElementById("obj8").style; 
var div9 = document.getElementById("obj9").style; 
var div10 = document.getElementById("obj10").style; 
var objet;var coordx;var coordy; 
objet = new Array(div1,div2,div3,div4,div5,div6,div7,div8,div9,div10); 
coordx = new Array(0,0,0,0,0,0,0,0,0,0);coordy = new Array(0,0,0,0,0,0,0,0,0,0); 
function placeObj(i,px,py) { 
objet[i].left=px; 
objet[i].top=py; 
} 
function voirObj(i) { 
objet[i].visibility="visible"; 
} 
function cacheObj(i) { 
objet[i].visibility="hidden"; 
} 
function cacheObj(i) { 
objet[i].visibility="hidden"; 
}

if (document.getElementById) 
{ 
if(navigator.appName.substring(0,3) == "Net") 
document.captureEvents(Event.MOUSEMOVE); 
document.onmousemove = Pos_Souris; 
}

function Pos_Souris(e) 
{ 
Xpos = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft; 
Ypos = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop; 
}

function vole() { 
x0=coordx[0];y0=coordy[1];ex=Xpos+10;ey=Ypos+10 
reelx=x0+0.6;reely=y0+0.6; 
rx=reelx;ry=reely; 
rx+=(ex-rx)*0.6;ry+=(ey-ry)*0.6; 
reelx=rx;reely=ry; 
x0=Math.round(reelx);y0=Math.round(reely);

for (var i = 9; i > 0; i--) { 
coordx[i]=coordx[i-1]; 
coordy[i]=coordy[i-1]; 
}

coordx[0]=x0;coordy[0]=y0; 
for (var i = 0; i < 10; i++) { 
voirObj(i);placeObj(i,coordx[i]+i-2,coordy[i]-i); 
} 
setTimeout("vole()",10) 
} 
if(document.getElementById) 
window.onload = vole; 
</SCRIPT>

A modifier : "adresse de l'image" par l'adresse de votre image (en tout 10 fois ..). Eventuellement, vous pouvez essayer de mettre des images différentes (pas trop) pour varier les effets.

Deux images qui suivent le curseur

Images qui suivent le curseur selon la direction de déplacement ...A insérer dans le "body" :

<SCRIPT LANGUAGE="JavaScript">
/*
Image qui suit et regarde la souris
http://www.editeurjavascript.com/scripts/scripts_images_1_66.php

SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
*/
var x = 0;
var y = 0;

if (document.getElementById)
   {
   if(navigator.appName.substring(0,3) == "Net")
      document.captureEvents(Event.MOUSEMOVE);
   document.onmousemove = Pos_Souris;
   window.onload = Bouge_Image;
   }

function Pos_Souris(e)
   {
   x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
   y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
   }

posX = 0;
posY = 0;
anim = true;
oldpos = "url image gauche";

if(document.getElementById)
   {
   document.write('<DIV ID=teteronde style="position: absolute">');
   document.write('<A HREF="#" onClick="anim=false;document.getElementById(\'teteronde\').style.visibility = \'hidden\';return(false)">');
   document.write('<IMG SRC="url image droite" BORDER=0 HSPACE=0 VSPACE=0 NAME=tete ALT="Cliquez ici pour faire disparaître">');
   document.write('</A>');
   document.write('</DIV>');
   }
</SCRIPT>

A modifier : les urls des images gauche et droite.

Dernière mise à jour de cette rubrique le 17/10/2004

Accueil News Album photo E-cartes Forum Livre d'or Partenaires E-monsite Sondage Contact

Accueil

Outils & Design Web

Logiciels

Services

Boîte à idées

Perso

Newsletter

Intéractif

Partenaires E-monsite

Mes amis

Codes HTML : de quoi agrémenter vos pages