Comment donner un effet 3D à son texte en javascript ?

 

par meltech1 |

     
Comment donner un effet 3D à son texte en javascript ?

Dans votre site Internet il y a du texte que vous souhaitez mettre en valeur. Pour ce faire vous avez plusieurs possibilités : un effet stabilo (vu dans un autre article de comment fait-on), un effet K2000 (vu dans un autre article de comment fait-on) ou bien lui donner un effet de 3D grâce à l'article qui suit. Un effet 3D c'est un effet de relief sur le texte que vous choisissez. Voici comment faire.

Quelles sont les fournitures nécessaires ?

  • Internet Explorer
  • Logiciel bloc notes

Étapes de réalisation

1.

Commencez par ouvrir votre site Internet avec "bloc notes" pour en obtenir le code source. C'est le programme dans lequel vous allez programmer ce qui suit.

2.

Maintenant cherchez la balise <head> dans le programme et insérez-y le script suivant :
<TITLE>Essai Texte</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<STYLE TYPE="text/css">
.Txt {font-size:15px;font-family:Verdana,sans serif;font-weight:bold;}
.Ligne1 {font-size:21px;font-family:Verdana,sans serif;font-weight:bold;}
.Entete {font-size:21px;font-family:Verdana,sans serif;font-weight:bold;}
</STYLE>
<SCRIPT SRC="gftexte.js" LANGUAGE ="javascript"></SCRIPT>.

3.

Ensuite cherchez la balise <body> et insérez-y le script suivant :
<script language="JavaScript">
var Texte = "Je suis où je veux ...<BR>x =50<BR>y =250 "
var Position_X = 50;
var Position_Y = 250;
var EpaisseurBord = 1;
var StyleFont = "Entete";
var Coul_Exterieure = "#99ccff";
var Coul_Interieure = "#0040f0";
var Coul_Ombre = "#000000";
WriteNeon( Texte, Position_X, Position_Y, EpaisseurBord, StyleFont, Coul_Interieure, Coul_Exterieure, Coul_Ombre);
</script>
<table border=1 cellspacing=0 cellpadding=0>
<tr>
<td class=Txt height=50 nowrap valign=center>
Bonjour la première ligne...
</td>
<td class=Txt nowrap valign=center>
 
</td>
</tr>
<tr>
<td class=Txt height=50 nowrap valign=center>
Bonjour la seconde ligne...
</td>
<td class=Txt nowrap valign=center>
<div style="position:relative;left:0px;top:0px;">
<script language="JavaScript">
WriteNeon( "je suis à la suite ...", 0, 0, 3, "Ligne1", "#ffff00", "#c0c000", "#000000");
</script>
</div>
 
</td>
</tr>
</table>.

4.

Faites une page javascript .js et insérez-y le script suivant :
var Num = 1000;

//--------------------------------------------------
function GetBeginLayer( id_, x_, y_, l_, h_, v_, z_){
var Html="";
if( document.layers){
if( l_[0]="a") l_ = 800; // pas d'auto pour NS4
Html +='<layer id="' +id_ +'" left="'+ x_ +'" top="' +y_ +'" width="' +l_ +'" height="'+ h_+'" visibility="'+ v_ +'">';
}
else{
if( l_[0]!="a") l_ +="px"; // Ajoute px si pas auto
Html +='<div id="' +id_ +'" style="position:absolute;left:'+ x_ +'px;top:' +y_ +'px;width:'+ l_ +';height:'+ h_ +'px;z-index:'+ z_ +';visibility:' +v_+'">';
}
return( Html);
}
//--------------------
function GetEndLayer(){
var Html ="";
if( document.layers) Html +='</layer>'; else Html +='</div>';
return( Html);
}
//--------------------------------------------------------
function WriteNeon( txt_, x_, y_, ep_, cl_, tc_, fc_, oc_){
var i, k, x, y;
var Fin;
var FirstLayer;
var Html="";
var Epais = 1;
var Larg = "auto";
FirstLayer = Num;
if( ep_) Epais =ep_;
if( oc_){
if( ep_==0) ep_=1;
x = x_ +ep_ +1;
y = y_ -ep_ +1;
Fin = 2*(ep_ +1);
for (i= 1; i <Fin; i++, y++){
Html += GetBeginLayer( 'F' +Num, x, y, Larg, 10, "visible", Num);
Html += '<span class="'+ cl_ +'"><font color="'+oc_ +'">'+txt_+'</font></span>';
Html += GetEndLayer();
Num ++;
}
x = x_ -ep_ +1;
y = y_ +ep_ +1;
Fin --;
for (i= 1; i <Fin; i++, x++){
Html += GetBeginLayer( 'F' +Num, x, y, Larg, 10, "visible", Num);
Html += '<span class="'+ cl_ +'"><font color="'+oc_ +'">'+txt_+'</font></span>';
Html += GetEndLayer();
Num ++;
}
}
x = x_;
y = y_;
for(i = -Epais; i < (Epais+1); i++){
for(k = -Epais; k < (Epais+1); k++){
Html += GetBeginLayer( 'F' +Num, x +k, y +i, Larg, 10, "visible", Num);
Html += '<span class="'+ cl_ +'"><font color="'+fc_ +'">'+txt_+'</font></span>';
Html += GetEndLayer();
Num ++;
}
}
Html += GetBeginLayer( 'F' +Num, x_, y_, Larg, 10, "visible", Num);
Html += '<span class="'+ cl_ +'"><font color="'+tc_ +'">'+txt_+'</font></span>';
Html += GetEndLayer();

document.write( Html);
if( document.layers){ // pour NS4 établissement de l'ordre
for( i=FirstLayer; i < (Num+1); i++){
document.layers['F'+i].zIndex= i;
}
}
}

Pour terminer enregistrez le tout avec "bloc notes" et ouvrez avec IE. Vous remarquez que votre texte s'affiche en 3D. Vous avez donc terminé la programmation de cet artcile.

Astuces et mises en garde

Mise(s) en garde :

Pour modifier le texte à mettre en 3D allez dans la balise <body>.

Sur le même thème

damneya

Comment ajouter des métadonnées sur iWeb ?

Pour attirer des visiteurs sur un site internet, il est important d’ajouter à son site des métadonnées et des mots-clés qui seront recherchés dans les moteurs de recherche. Pour ajouter des métadonnées sur iWeb sans éditer le code HTLM brut, pre

kat5

Comment utiliser le logiciel Dreamweaver ?

Dreamweaver est un logiciel permettant de concevoir un site Internet. Et comme tout logiciel, il est simple d'utilisation, mais certaines bases sont nécessaires. Alors à vos claviers, à votre souris, nous allons partir à la découverte de ce logiciel

damneya

Comment créer un blog ?

Un blog ou plus exactement un weblog est un site personnel que vous pouvez créer pour vous exprimer sur vos points de vues. Quelles étapes faut-il suivre pour créer un bon blog?

Chercher un article sur Comment fait-on