inserer une image avec du Javascript

**loic_akela** · 07/06/2009, 22h52

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

**le_chomeur** · 07/06/2009, 23h31

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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�

**loic_akela** · 08/06/2009, 00h16

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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>

**le_chomeur** · 08/06/2009, 09h04

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

**loic_akela** · 08/06/2009, 09h56

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.

**loic_akela** · 08/06/2009, 10h10

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....

**loic_akela** · 08/06/2009, 13h57

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

**andry.aime** · 08/06/2009, 14h07

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

**loic_akela** · 08/06/2009, 21h40

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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>

inserer une image avec du Javascript

JavaScript

Discussions similaires

Partager

Partager