Aller au contenu

  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

[Résolu] Afficher image en fonction d'un champ texte

BaK

Par BaK
dans Programmation

 Partager

Messages recommandés

BaK Godlike Member

BaK

Posté(e)
Posté(e) (modifié)

Bonjour à tous,

 

Je fais mes premiers pas en PHP/JS, je me donne de la peine et .. j'en ai! :P

 

Voilà tout d'abord ce que j'ai fait:

<html>
<head>
<title>Test champs remis à zéro</title>
<script language="Javascript" type="text/javascript" ></script>
</head>
<body>
  Liste Elèves:
 <select name="liste_eleves" id="eleve_id" onChange="if (this.options[this.options.selectedIndex].value !='')document.getElementById('monImage').src=this.options[this.options.selectedIndex].value;">
				<option value="monImage" selected> </option>
				<option value="C:\INSTALL\Images\blbl.gif">eleve1</option>
				<option value="C:\INSTALL\Images\icon_Vache.gif">eleve2</option>
				<option value="C:\INSTALL\Images\icon_woot.gif">eleve3</option>
				<option value="C:\INSTALL\Images\victoire-584.gif">eleve4</option>
				<option value="C:\INSTALL\Images\ciao.gif">eleve5</option>
		</select>
		<img src="" alt="mon image" id="monImage">
</body>
</html>

Ce qui donne:

imageeleve0ix6.png

 

 

et ça lorsque l'on choisit un élève:

imageeleve1ul1.png

 

Maintenant, je voudrais reproduire ce comportement, mais à partir d'un champ texte:

imageeleve2nq3.png

 

Pour que lorsque l'on tape un chiffre de 1 à 5, que l'on click sur "Go", l'image correspondante s'affiche.

 

Ma première idée serait de créer un array pour y déclarer les 5 chiffres. Ensuite, lors du click, de tester si la valeur du champ texte correspond à une valeur du tableau, et si c'est le cas d'afficher l'image correspondante.

Par contre, comment mettre ça en code... :P :P

 

Qqun pourrait m'indiquer comment faire ça? Ou me donner des pistes, des exemples... ?

 

Merci d'avance, a+ :P

Modifié par BaK

KewlCat Devil Member !

KewlCat

Posté(e)
Posté(e)

Si tu avais, dès le début, généré un Array contenant tes images, et mis les "numéros" des élèves dans les value="" tu aurais pu procéder de la même façon avec la liste et avec le champ texte (puisque la valeur de l'option sélectionnée, et la valeur du champ, auraient été utilisées pour retrouver l'image correspondante).

Bref.

 

Une solution consiste donc à générer un bloc <script> contenant l'instanciation d'un nouvel objet Array et son remplissage. Pour faire simple, tu dois mettre en index (ou "clé") le numéro de l'élève et en valeur l'URL de l'image.

Sur le onchange du champ texte (ou sur l'appui du bouton "Go", comme tu veux) tu déclenches la fonction Javascript qui va vérifier qu'il existe bien un élément dans l'Array correspondant à la clé saisie, et modifie l'attribut src de l'image avec la valeur correspondante.

BaK Godlike Member

BaK

Posté(e)
  • Auteur
Posté(e)

Salut KewlCat,

 

Merci bcp pour ta réponse!

Mais euh, il est où le code à copier/coller?

Nan je rigole, merci pour ces instructions qui devraient me permettre d'y arriver par moi-même! :P

 

Je reviens pour vous montrer le résultat, ou pour demander un coup de pouce supplémentaire :P

BaK Godlike Member

BaK

Posté(e)
  • Auteur
Posté(e)

Re

 

Alors ça serait plutôt pour demander à nouveau un peu d'aide... :P

 

J'ai ça:

<html>
<head>
<title>Test</title>

<script language="Javascript" type="text/javascript" >

<!--

var liste_eleves= new Array(5)
enfant[0]='C:\INSTALL\Images\blbl.gif';
enfant[1]='C:\INSTALL\Images\icon_Vache.gif';
enfant[2]='C:\INSTALL\Images\icon_woot.gif';
enfant[3]='C:\INSTALL\Images\victoire-584.gif';
enfant[4]='C:\INSTALL\Images\ciao.gif';


function quel_eleve()
{
var input_eleve_id = document.getElementById("eleve_id").value;
if (enfant[input_eleve_id] == null)
   alert ("Entrez un n°")
else document.getElementById("monImage").src = enfant[input_eleve_id];
}

//-->
</script>
</head>
<body>

Elève n°:
  <input type="text" name="eleve_id" value="" />
  <img src="" alt="mon image" id="monImage">

<input type="button" value="Go" onClick="java script: quel_eleve()"> ;

</body>
</html>

 

Mais le bouton "Go" ne fait rien du tout. Qu'est ce que j'ai oublié?

KewlCat Devil Member !

KewlCat

Posté(e)
Posté(e)

A première vue....

l'id sur le champ texte ?

de nommer ton tableau pareil tout le temps ?

d'éviter les commentaires HTML à l'intérieur d'un bloc censé être de type "text/javascript" ?

...

BaK Godlike Member

BaK

Posté(e)
  • Auteur
Posté(e) (modifié)

Yes, j'y suis! :P

<html>
<head>
<title>Test</title>

<script language="Javascript" type="text/javascript" >

var eleve= new Array(5)
eleve[0]='blbl.gif';
eleve[1]='icon_Vache.gif';
eleve[2]='icon_woot.gif';
eleve[3]='victoire-584.gif';
eleve[4]='ciao.gif';


function quel_eleve()
{
var input_eleve_id = document.getElementById("eleve_id").value;
if (input_eleve_id == "")
   alert ("Entrez un n°")
else 
	 if (input_eleve_id > 5)
		alert ("Entrez un n° compris entre 1 et 5")
	 else document.getElementById("monImage").src = eleve[input_eleve_id-1];
}


</script>
</head>
<body>

Elève n°:
  <input type="text" name="eleve_id" id="eleve_id" value="" maxlength="1" />

  <img src="" alt="mon image" id="monImage">

  <input TYPE="button" value="Go" onClick="java script: quel_eleve()">

</body>
</html>

 

Merci KewlCat pour ces derniers conseils!

 

J'ai encore été embêté avec les images sous Firefox. Pas moyen qu'il les affiche avec les liens suivants:

C:\INSTALL\Images\ciao.gif

C:/INSTALL/Images/ciao.gif

C:\\INSTALL\\Images\\ciao.gif

 

Lorsque j'ouvre directement l'image dans FF, voilà le lien qu'il utilise:

file:///C:/INSTALL/Images/ciao.gif

mais ça reste également sans effet dans mon code...

 

J'ai donc mis les images au même endroit que le fichier HTML. :P

 

Prochaine étape, alimenter le menu déroulant à partir du tableau, comme tu me l'as signalé! :P

 

++

Modifié par BaK
BaK Godlike Member

BaK

Posté(e)
  • Auteur
Posté(e)

Encore une petite question au passage

Sur le onchange du champ texte (ou sur l'appui du bouton "Go", comme tu veux) tu déclenches la fonction Javascript qui va vérifier qu'il existe bien un élément dans l'Array correspondant à la clé saisie, et modifie l'attribut src de l'image avec la valeur correspondante.

 

J'ai essayé ça:

<input type="text" name="eleve_id" id="eleve_id" value="" maxlength="1" size="1" onchange="java script: quel_eleve()" />

 

avec cet ajout dans la partie JavaScipt:

document.getElementById("eleve_id").onchange()

 

mais rien ne se passe lorsque je change la valeur du champ texte... :P

BaK Godlike Member

BaK

Posté(e)
  • Auteur
Posté(e)

Pfiou, je suis finalement parvenu à ce que je voulais! :P

 

<html>
<head>
<title>Test</title>

<script language="Javascript" type="text/javascript" >

function reset_fields()
{
document.getElementById('liste_eleves').selectedIndex=0;

document.getElementById('eleve_id').value="";
}


var eleve = new Array(5)
eleve[0]='blbl.gif';
eleve[1]='icon_Vache.gif';
eleve[2]='icon_woot.gif';
eleve[3]='victoire-584.gif';
eleve[4]='ciao.gif';


function select_choix_eleve()
{
var choix = document.getElementById('liste_eleves').options[document.getElementById('liste_eleves').selectedIndex].value;
document.getElementById('monImage').src= eleve[choix];

/*document.getElementById('eleve_id').value=null;*/
document.getElementById('eleve_id').value=parseInt(choix)+1;
}


function txt_quel_eleve()
{
var input_eleve_id = document.getElementById("eleve_id").value;
var seloption = document.getElementById('liste_eleves');
if (input_eleve_id == "")
   alert ("Entrez un n°")
else
	 if (input_eleve_id > 5)
		alert ("Entrez un n° compris entre 1 et 5")
	 else document.getElementById("monImage").src = eleve[input_eleve_id-1];

seloption.selectedIndex=0;
}


</script>
</head>
<body>

<body onLoad ="reset_fields()">

  <img src="" alt="mon image" id="monImage">
  <br />
  <br />

Liste Elèves:
  <select name="liste_eleves" id="liste_eleves"
   onChange="java script:select_choix_eleve();">
				<option value="" selected> </option>
				<option value="0">eleve1</option>
				<option value="1">eleve2</option>
				<option value="2">eleve3</option>
				<option value="3">eleve4</option>
				<option value="4">eleve5</option>
  </select>
  <br />
  <br />

Elève n°:
  <input type="text" name="eleve_id" id="eleve_id" value="" maxlength="1" size="1" />
  <br />
  <br />
  <input type="button" value="Go" onClick="java script: txt_quel_eleve()" id="bouton_go">

</body>
</html>

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

×
 Partager
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...