PhP
1757Messages postés
11 décembre 2000Date d'inscription
5 févr. 2002 à 21:07
Re-slt,
Afficher des jooooliiiiis boutons c simple avec un peu d'astuce, quelques touches de javascript et le tour est joué :
1) Créé 2 images jpg : 1 pour ton bouton RESET l'autre pour le bouton SUBMIT et nomment les respectivement reset.jpg et submit.jpg
Nota : si tu veux des boutons arrondis ou avec une forme non conventionnelle utilise à la place des images gif (avec une couleur transparente là où tu désires faire apparaîter le fond de ta page) et nomment les reset.gif et submit.git : n'oublie pas de remplacer les extensions .jpg par .gif dans le code qui suit !
2) Copie les 2 codes qui suivent dans des pages html que tu nomment respectivement page1.htm et page2.htm. Place ces 2 pages dans le même répertoire que les images.
3) Lance le navigateur IE (pas Netscape ! ne marchera pas sans modifications du code, te voilà prévenu !) et charge le fichier page1.htm : menu [Fichier] [Ouvrir ...]
Modifie la zone de texte et clique sur ton bouton qui représente le reset (le bouton de gauche) et hop le texte retrouve son apparence initiale !
Clique sur l'image du bouton submit et hop la page 2 !
Elle est pas belle la vie ?
;:-)
Code page1.htm :
<html>
<head>
<style>
</style>
<script language="Javascript">
<!--
// Réinitialise n'importe quel formulaire
// form_name : nom du formulaire
function effacer(form_name)
{
// Récupère une référence sur le formulaire à partir de son nom
ref=window.document.getElementById(form_name);
ref.reset();
}
// Valide n'importe quel formulaire
// form_name : nom du formulaire
function envoyer(form_name)
{
// Récupère une référence sur le formulaire à partir de son nom
ref=window.document.getElementById(form_name);
ref.submit();
}
// -->
</script>
</head>
<body>
<form name="mon_formulaire" action="page2.htm" method="post">
<table>
<tr colspan=2>
<td><input type="text" value="The Truth is Out There"></td>
</tr>
<tr>
<td><a href="javascript:effacer('mon_formulaire')"><img src="reset.jpg" border=0></a></td>
<td><a href="javascript:envoyer('mon_formulaire')"><img src="submit.jpg" border=0></a></td>
</tr>
</table>
</form>
</body>
</html>
Code page2.htm :
<html>
<head>
<style>
.perso
{
font-family:arial;
font-weight:bold;
font-size:24pt;
color:#0000BB;
}
</style>
</head>
<body><p class=perso>
Et voici la page 2 PEANUTS</p>
</body>
</html>
Pour le design des boutons évidemment c'est autre chose !
On est doué ou on l'est pas ...
@+
Philippe
[[ The Truth is Out There ]]