Membre de ClickFR, Reseau francophone Paie-Par-Click
Accueil
Accueil
- [ CSS : ] [ DHTML : ] [ HTML : ] [ JavaScript : ] [ Refs : ]
Accueil

DHTML
Effets non-contextuels

  Ecriture en 'relief'

fonction de ce script  principe de ce script  le script lui-meme  demonstration du script  telechargement du script  Compatibilite du script... a partir de : 

  Fonction
Le but de ce script est de placer un texte (un titre) sur la page avec un effet de 'relief'. Ce script vous évitera surtout d'avoir à faire le travail sur toutes vos pages.
  Principe
L'effet sera créé par simple superposition légèrement décallée de 3 calques portant le même texte mais dans des couleurs différentes.
Pour éviter d'avoir à écrire les calques à la main, une fonction le fait toute seule. Il suffit de déterminer le texte à afficher, son placement absolu dans la page, éventuellement les trois couleurs du relief et c'est tout.
  Le script
dans la partie <head>
<style>
/* Les styles utilisés par chaque calque (Attention : ne pas changer les noms) */
.style-fond1 { font-family: arial; font-size: 24px; color: #333333; }
.style-fond2 { font-family: arial; font-size: 24px; color: #CCCCCC; }
.style-fond3 { font-family: arial; font-size: 24px; color: #FF0000; }
</style>

<script language="JavaScript">
// détection du navigateur
ns4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;

// La fonction de placement précis du titre
function place_titre(x,y) {
var deb;
var fin;

// Elements de syntaxe pour Netscape
if (ns4) {
deb = "document.";
fin = "";
}

// Elements de syntaxe pour Internet Explorer
if (ie4) {
deb = "";
fin = ".style";
}

// Placement des 3 calques en décallage
for ( j = 0; j < 3; j++ ) {
eval(deb + "fond" + (j+1) + fin).left = x + j;
eval(deb + "fond" + (j+1) + fin).top = y + j;
}
}


// Le tableau qui accueillera le code des calques
var calques = new Array();

// Création des calques
function genere_calques(titre) {
for ( i = 0; i < 4; i++ ) {

// Le premier calque est invisible pour compatibilité avec Netscape
if ( i == 0) {
calques[i] = "<div name='fond" + i + "' id='fond" + i + "' style='position: absolute; top: 0px; left: 0px; z-index: " + i + "'>";
calques[i] += "</div>";
}

// Les 3 autres calques
else {
calques[i] = "<div name='fond" + i + "' id='fond" + i + "' style='position: absolute; top: 0px; left: 0px; z-index: " + i + "'>";
calques[i] += "<span class='style-fond" + i + "'>" + titre + "</span>";
calques[i] += "</div>";
}
}
}
</script>

dans la partie <body>
<script language="JavaScript">
// Lancement de la création des calques
genere_calques('Mon titre');

// Ecriture des calques
document.write(calques[0],calques[1],calques[2],calques[3]);

// Placement des calques en X et en Y
place_titre(50,150);
</script>

  Démonstration

Voir la démonstration
  Téléchargement
Ce script est disponible en deux versions :
  • le script est intégré à la page où il agit,
  • le script est dans un fichier séparé de la page où il agit (fichier.js et fichier.html).

    L'intérêt d'un script dans un fichier séparé est de pouvoir le partager entre plusieurs pages html.
    Cela permet aussi de le rendre inaccessible à toute personne qui souhaiterai l'enregistrer pour une autre utilisation.
    		•
    Script intégré :
    enc_titre_relief.zip
    2 Ko    		 telechargez le script telechargez le script
    Script séparé :
    enc_titre_relief2.zip
    2 Ko
    Recherche
    		aide sur la recherche
    CSS 2
    HTML 4
    Javascript 1.3
    Références
    Aide générale
    hit-parade
    Votez TOP Ouaibe !

    statistiques
    aide sur les contacts aide sur la mailing-list aide sur la newsletter