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

inserer une image avec du Javascript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager