Un texte en relief !!

Commenter

Contenu du snippet

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

Source / Exemple : 


<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&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é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

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (pi0up51)