inserer une image avec du Javascript

Version imprimable

bonjour,
Je souhaite faire un code (en javascript) qui traduit un texte en image.
Pour commencer, je voudrais traduire une lettre.

Mon problème est que je ne sais pas comment afficher cette image et que je débute en JS.

voici toujours le code que j'ai fait :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <head> <SCRIPT LANGUAGE="JavaScript"> function afficher(form2) { if (document.form2.input.value=="a") document.write(<img src="semaphore/smphr_a.gif" width="100" height="94" />); } </SCRIPT> </HEAD> <BODY> <FORM NAME="form2"> <INPUT NAME="input" TYPE="text" VALUE="" maxlength="1"> Zone de texte d'entrée <BR> <INPUT TYPE="button" NAME="bouton" VALUE="Afficher" onclick="afficher(form2)"><BR> </FORM> </body>
bien entendu, je mettrais un switch à la place du if pour avoir toute les lettres de l'alphabet. Mais déjà, j'aimerais que "a" fonctionne.

Merci d'avance

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<script type="text/javascript">
 
 
			function afficher(monForm){
				//La div qui va accueillir les images
				var conteneur = document.getElementById('imgAInserer');
 
				//Création d'une image vide
				var monImg = document.createElement('img');
 
				//On test la valeur de l'input
				if(monForm["nomImg"].value == "a"){
 
					//On définit la source de l'image
					monImg.src = "mesImages/test.jpg";
					//On ajoute l'image dans le conteneur
					conteneur.appendChild(monImg);
				}
				else{
					//On définit la source de l'image
					monImg.src = "mesImages/default.jpg";
					//On ajoute l'image dans le conteneur
					conteneur.appendChild(monImg);
				}
			}
		</script>
	</head>
	<body>
		<div id="imgAInserer"></div>
		<form NAME="form2">
<input NAME="nomImg" TYPE="text" VALUE="" maxlength="1"> Zone de texte d'entrée <BR>
<input TYPE="button" NAME="bouton" VALUE="Afficher" onclick="afficher(this.form)"><BR>
</FORM>
	</body>
</html>

essayes ça , j'ai tout commenté ;)

Ok, merci, ça marche. Merci pour la rapidité de la réponse

Maintenant, je voudrais insérer plusieurs images. J'ai rajouté un .charAt() pour voir ce qu'il y avait dans le texte ainsi qu'une boucle for... Mais bon, cela ne fonctionne pas trop !

voici mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script type="text/javascript">
function afficher(monForm)
{ var i=0;
var long=monForm.length;
for (i=0, i<long, i++)
{	var conteneur = document.getElementById('imgAInserer');
var monImg = document.createElement('img');
if(monForm["nomImg"].value.charAt(i) == "a")
{	monImg.src = "images/test.gif";
conteneur.appendChild(monImg);
}
else{
monImg.src = "images/defaut.gif";
conteneur.appendChild(monImg);
				}
			}
		};
		</script>
	</head>
	<body>
		<div id="imgAInserer"></div>
		<form NAME="form2">
<input NAME="nomImg" TYPE="text" VALUE="" maxlength="50"> Zone de texte d'entrée <BR>
<input TYPE="button" NAME="bouton" VALUE="Afficher"  onclick="afficher(this.form)"><BR>
</FORM>
</body>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function afficher(monForm)
{ var i=0;
var long=monForm["nomImg"].value.length;
for (i=0, i<long, i++)
{	var conteneur = document.getElementById('imgAInserer');
var monImg = document.createElement('img');
if(monForm["nomImg"].value.charAt(i) == "a")
{	monImg.src = "images/test.gif";
conteneur.appendChild(monImg);
}
else{
monImg.src = "images/defaut.gif";
conteneur.appendChild(monImg);
				}
			}
		};

tu as oublié de récupérer la longueur du champs

08/06/2009, 09h56
loic_akela

Ok, mais même en rajoutant cela, rien ne s'affiche (même pas des images par défauts)

question subsidiaire : j'ai tester avec un Switch, mais je voulais savoir si il n'y avait pas plus rapide. Comme les images sont nommées test_a.gif, test_b.gif, etc

monImg.src = "images/test_" + monForm["nomImg"].value.charAt(i) +".gif";

(en testant avant si c'est bien une lettre !)

J'ai aussi essayer, mais cela ne m'affiche rien.
08/06/2009, 10h10
loic_akela

désolé pour la question subsidiaire, la méthode marche mais j'avais oublié une partie du code ( conteneur.etc....). C'est plus joli et moins long à écrire quand même !!

Par contre, je n'arrive toujours pas quand il y a plus d'une lettre....

J'ai trouver l'erreur, c'est bon, je poste ici le code complet qui marche.
toutes les images sont de la forme : test_a.gif
le code teste si c'est une lettre, sinon, il met l'image par défaut.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<script type="text/javascript">
		function afficher(monForm)
		{	
			var i=0;
			var long=monForm["nomImg"].value.length;
			for (i=0; i<long; i++)
			{	var conteneur = document.getElementById('imgAInserer');
				var monImg = document.createElement('img');
				var regelText = /^[a-zA-Z]$/;
				if (regelText.test(monForm["nomImg"].value.charAt(i)))
				{	monImg.src = "image/test_" + monForm["nomImg"].value.charAt(i).toLowerCase() +".gif";
					conteneur.appendChild(monImg);
				}
				else {
				monImg.src = "image/image_default.gif";
				conteneur.appendChild(monImg);
				}
			}
		}
		</script>
	<link href="../font.css" rel="stylesheet" type="text/css" />
</head>
	<body>
    <blockquote>
      <p class="minititre"> Sémaphore en reception</p>
    </blockquote>
    <form NAME="form2">
<input NAME="nomImg" TYPE="text" VALUE="" maxlength="50" width="500"> texte a coder <BR>
<input TYPE="button" NAME="bouton" VALUE="afficher"  onclick="afficher(this.form)"><BR>
</FORM>

et pour ceux qui veulent directement utiliser le programme (coder en sémaphore) ou qui veulent me dire comment l'améliorer :
http://emowgli.go1.cc/coder_tout.html

Merci

08/06/2009, 14h07
andry.aime

amélioration

Salut
Pour pour effacer la traduction, tu peux faire un code JS sans recharger la page

Code:

document.getElementById('imgAInserer').innerHTML='';

Je continue à améliorer mon code. Au lieu d'afficher une image par défaut, je pourrais "tout simplement" mettre le texte non codé. Ainsi, {Yo 2} donnerais {image_y, image_o, ,2} au lieu de {image_y, image_o,image_default ,image_ default}

passons au code. Tout marche bien jusqu'au "else". Le texte [a-z] s'affiche bien en image, les unes à la suite des autres, mais en revanche, quand il y a un chiffre, le chiffre s'affiche et efface le reste... pour rependre l'exemple cidessus : voila ce qui s'affiche : {2} ce qui est un peu court...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <script type="text/javascript"> function b_semaphore(monForm) { var i=0; var long=monForm["textOriginal"].value.length; for (i=0; i<long; i++) { var conteneur = document.getElementById('textCoder'); var regelText = /^[a-zA-Z]$/; if (regelText.test(monForm["textOriginal"].value.charAt(i))) { var monImg = document.createElement('img'); monImg.src = "semaphore/smphr_" + monForm["textOriginal"].value.charAt(i).toLowerCase() +".gif"; } else { document.getElementById('textCoder').innerHTML=monForm["textOriginal"].value.charAt(i); } conteneur.appendChild(texte); } } </script> <body> <form NAME="form2"> <input name="textOriginal" type="text" width="500" /> <input TYPE="button" NAME="bouton" VALUE="coder en sémaphore" onclick="b_semaphore(this.form)" > </FORM> <div id="textCoder"></div>