A voir également:
- Afficher un exemple dans un tableau
- Tableau word exemple - Guide
- Tableau croisé dynamique - Guide
- Url exemple - Guide
- Tableau ascii - Guide
- Trier un tableau excel - Guide
2 réponses
Dalida
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
921
1 mars 2008 à 18:34
1 mars 2008 à 18:34
salut,
avec un p'tit bout de JS.
il faut utiliser l'évènement 'onchange' de chacun des <input> que tu feras pointer vers une fonction récupère les valeurs de tous les paramètres puis l'applique à ton texte exemple. pour retrouver les balises en JS il faut leur attribuer un identifiant.
une base à travailler :
HTML
JS
avec un p'tit bout de JS.
il faut utiliser l'évènement 'onchange' de chacun des <input> que tu feras pointer vers une fonction récupère les valeurs de tous les paramètres puis l'applique à ton texte exemple. pour retrouver les balises en JS il faut leur attribuer un identifiant.
une base à travailler :
HTML
<p id="preview">Texte exemple</p> <input id="input1" onchange="displayPreview()" /> <input id="input2" onchange="displayPreview()" /> <input id="input3" onchange="displayPreview()" />
JS
displayPreview()
{
var font = document.getElementById( 'input1' );
var size = document.getElementById( 'input2' );
var color = document.getElementById( 'input3' );
var preview = document.getElementById( 'preview' );
if( font && size && color && preview )
{
preview.style.font = font.value;
preview.style.fontSize = size.value;
preview.style.color = color.value;
}
}
Dalida
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
921
3 mars 2008 à 10:04
3 mars 2008 à 10:04
salut,
pourquoi cela ne fonctionne-t-il pas et que veux-tu précisément ?
pourquoi cela ne fonctionne-t-il pas et que veux-tu précisément ?
Ben en fait j'ai un tableau auquel j'ai donner id "exemple"
<td id="exemple" width="100%">
<p>voici un exemple de l'affichage selon vos choix<p>
</td>
et je souhaite qu'un exemple de style du texte s'affiche dans ce tableau en fonction de ce que l'utilisateur choisira dans le formulaire plus haut, plus précisément perso2 (couleur du texte), perso4 (taille du texte), perso6 (police du texte), perso8 (texte en gras), perso9 (texte en italic) et perso 10 (texte souligné).
<td id="exemple" width="100%">
<p>voici un exemple de l'affichage selon vos choix<p>
</td>
et je souhaite qu'un exemple de style du texte s'affiche dans ce tableau en fonction de ce que l'utilisateur choisira dans le formulaire plus haut, plus précisément perso2 (couleur du texte), perso4 (taille du texte), perso6 (police du texte), perso8 (texte en gras), perso9 (texte en italic) et perso 10 (texte souligné).
Dalida
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
921
>
kilian67
3 mars 2008 à 14:04
3 mars 2008 à 14:04
et en quoi ce que je t'ai filé ne correspond pas ?
ce n'est qu'une idée, le <div> tu peux le remplacer par n'importe quelle autre élément, idem pour les champs du formulaire.
c'est seulement le principe que je te présente :
• l'évènement 'onchange' dans le formulaire
• une fonction qui collecte les infos de style et les applique à l'exemple
ce n'est qu'une idée, le <div> tu peux le remplacer par n'importe quelle autre élément, idem pour les champs du formulaire.
c'est seulement le principe que je te présente :
• l'évènement 'onchange' dans le formulaire
• une fonction qui collecte les infos de style et les applique à l'exemple
kilian67
>
Dalida
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
3 mars 2008 à 20:34
3 mars 2008 à 20:34
En fait j'ai fait ça :
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Sans titre</title>
<meta name="generator" content="Namo WebEditor v6.0">
<script language="JavaScript">
displayPreview()
{
var font = document.getElementById( 'input1' );
var size = document.getElementById( 'input2' );
var color = document.getElementById( 'input3' );
var preview = document.getElementById( 'preview' );
if( font && size && color && preview )
{
preview.style.font = font.value;
preview.style.fontSize = size.value;
preview.style.color = color.value;
}
}</script>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<p id="preview">Texte exemple</p>
<input id="input1" onchange="displayPreview()" />
<input id="input2" onchange="displayPreview()" />
<input id="input3" onchange="displayPreview()" />
</body>
</html>
et j'ai des erreurs sur la page mais je ne sais pas les quelles !
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Sans titre</title>
<meta name="generator" content="Namo WebEditor v6.0">
<script language="JavaScript">
displayPreview()
{
var font = document.getElementById( 'input1' );
var size = document.getElementById( 'input2' );
var color = document.getElementById( 'input3' );
var preview = document.getElementById( 'preview' );
if( font && size && color && preview )
{
preview.style.font = font.value;
preview.style.fontSize = size.value;
preview.style.color = color.value;
}
}</script>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<p id="preview">Texte exemple</p>
<input id="input1" onchange="displayPreview()" />
<input id="input2" onchange="displayPreview()" />
<input id="input3" onchange="displayPreview()" />
</body>
</html>
et j'ai des erreurs sur la page mais je ne sais pas les quelles !
3 mars 2008 à 09:55