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