UN TEXTE EN RELIEF !! , Source N°15731

Information sur la source

Catégorie :Effets Niveau : Initié Date de création : 25/07/2001 Vu : 10 739

Auteur : pi0up51

Site perso

Ecrire un message privé

Note :

5,33 / 10

1
2
3
4
5
6
7
8
9
10

Commentaire sur cette source (0)

Ajouter un commentaire et/ou une note

Description

DHTML et Javascript pour faire ce Texte en relief. On utilise les calques pour faire ce titre en relief !

Source

<html>
<head>
<title>Titre en relief</title>
<script language="JavaScript"><!--
var calkT,calkS;
function init() // choix du Navigateur
{
if (navigator.appName=="Netscape")
{
calkS=document.layers['shad'];
calkT=document.layers['text'];
}
else
{
calkS=document.all['shad'].style;
calkT=document.all['text'].style;
}
calkS.zIndex=1;calkT.zIndex=5;//le texte est au-dessus de l'ombre
}
function ch_shadow()//pour affecter la couleur de l'ombre
{
var ind=document.choix.shadow.selectedIndex;
calkS.color=document.choix.shadow.options[ind].text;
}
function ch_texte()//pour affecter la couleur du texte
{
var ind=document.choix.texte.selectedIndex;
calkT.color=document.choix.texte.options[ind].text;
}
function flip_z(e)//pour basculer entre relief et incrustation
{var tS=calkS.zIndex,tT=calkT.zIndex;
if (e==1)
{
calkT.top=150;calkT.left=20;
calkS.top=152;calkS.left=22;
calkS.zIndex=tT;calkT.zIndex=tS;
}
else
{
calkT.top=152;calkT.left=22;
calkS.top=150;calkS.left=20;
calkS.zIndex=5;calkT.zIndex=1;
}
}
function raz() // réinitialiser le style de relief
{
calkS.top=152;calkT.top=150;calkS.left=22;calkT.left=20;
calkS.zIndex=1;calkT.zIndex=5;
calkS.color='black';calkT.color='white';
}
//-->
</script>
</head>
<body bgcolor="#dddddd" onLoad="init();" >
<div id="shad" style="position:absolute;top:152;left:22;color:black" >
<h2>Voici un texte en relief</h2>
</div>
<div id="text" style="position:absolute;top:150;left:20;color:white">
<h2>Voici un texte en relief</h2>
</div>
<form name="choix">
<table border width=200 bgcolor=oldlace>
<tr><td align=center>
<input type=button onClick="flip_z(1)" value="Effet Lumière"></td>
<td align=center>
<input type=button onClick="flip_z(2)" value="Effet Gravure"></td>
</tr>
<tr><td align=center>
<font face="verdana" size=-2><B>Ombre </B></FONT>
<select name="shadow" onChange="ch_shadow()">
<option selected>Black
<option>Blue
<option>navy
<option>gray
</select>
</td><td align=center>
<font face="verdana" size=-2><B>Texte </B></FONT>
<select name="texte" onChange="ch_texte()">
<option selected>white
<option>yellow
<option>cyan
<option>oldlace
<option>lime
</select>
</td>
</tr>
<tr><td colspan=2 align=center bgcolor=oldlace>
<font face="Verdana" size=-2 color=navy>Attention Netscape ne permet pas de changer les couleurs
</FONT></TD>
</TR>
<tr><td colspan=2 align=center>
<input type=button value="Réinitialiser Relief" onClick="raz()"></TD>
</TR>
</table>
</form>
<br><BR>
</body>
</html>

<html>
<head>
<title>Titre en relief</title>
<script language="JavaScript"><!--
var calkT,calkS;
function init() // choix du Navigateur
{
if (navigator.appName=="Netscape") 
  {
   calkS=document.layers['shad'];
   calkT=document.layers['text'];
  }
 else 
  {
   calkS=document.all['shad'].style;
   calkT=document.all['text'].style;
  }
calkS.zIndex=1;calkT.zIndex=5;//le texte est au-dessus de l'ombre
}
function ch_shadow()//pour affecter la couleur de l'ombre
{
 var ind=document.choix.shadow.selectedIndex;
 calkS.color=document.choix.shadow.options[ind].text;
}
function ch_texte()//pour affecter la couleur du texte
{
 var ind=document.choix.texte.selectedIndex;
 calkT.color=document.choix.texte.options[ind].text;
}
function flip_z(e)//pour basculer entre relief et incrustation
{var tS=calkS.zIndex,tT=calkT.zIndex;
 if (e==1)
 {
  calkT.top=150;calkT.left=20;
  calkS.top=152;calkS.left=22;
  calkS.zIndex=tT;calkT.zIndex=tS;
 }
 else
 {
  calkT.top=152;calkT.left=22;
  calkS.top=150;calkS.left=20;
  calkS.zIndex=5;calkT.zIndex=1;  
 }
}
function raz() // réinitialiser le style de relief
{
 calkS.top=152;calkT.top=150;calkS.left=22;calkT.left=20;
 calkS.zIndex=1;calkT.zIndex=5;
 calkS.color='black';calkT.color='white';
}
//-->
</script>
</head>
<body bgcolor="#dddddd"  onLoad="init();" >
<div id="shad" style="position:absolute;top:152;left:22;color:black" >
<h2>Voici un texte en relief</h2>
</div>
<div id="text" style="position:absolute;top:150;left:20;color:white">
<h2>Voici un texte en relief</h2>
</div>
<form name="choix">
<table border width=200 bgcolor=oldlace>
<tr><td align=center>
<input type=button onClick="flip_z(1)" value="Effet Lumi&egrave;re"></td>
<td align=center>
<input type=button onClick="flip_z(2)" value="Effet Gravure"></td>
</tr>
<tr><td align=center>
<font face="verdana" size=-2><B>Ombre&nbsp;</B></FONT>
<select name="shadow" onChange="ch_shadow()">
<option selected>Black
<option>Blue
<option>navy
<option>gray
</select>
</td><td align=center>
<font face="verdana" size=-2><B>Texte&nbsp;</B></FONT>
<select name="texte" onChange="ch_texte()">
<option selected>white
<option>yellow
<option>cyan
<option>oldlace
<option>lime
</select>
</td>
</tr>
<tr><td colspan=2 align=center bgcolor=oldlace>
<font face="Verdana" size=-2 color=navy>Attention Netscape ne permet pas de changer les couleurs
</FONT></TD>
</TR>
<tr><td colspan=2 align=center>
<input type=button value="R&eacute;initialiser Relief" onClick="raz()"></TD>
</TR>
</table>
</form>
 
<br><BR>
</body>
</html>

Conclusion

On peut attribuer au texte divers attributs : Couleur respectives, et position respective en superpositions !!
Pour ce qui est des fonctions et de la compréhension du script, vous devriez y arriver assez facilement !!

@++
pi0up51
www.infobox51.fr.st