(a savoir que tu pourrais précharger les images... si tu veux en savoir plus regarde sur google et "rollover" qui utilise cette technique)
"chemin" doit être le chemin complet sur le serveur "http://...."
Code : Tout sélectionner
var compteur_i = 1;
function setText(element)
{
if( compteur_i <= 7)
{
// récupération de la source de l'image
var src = element.src;
// récupération de l'indice du dernier "/" de la source
var indice1 = src.lastIndexOf("/");
// récupération de l'indice du dernier "." de la source
var indice2 = src.lastIndexOf(".");
// récupération de la chaine contenu entre "/" et "."
// value contient la valeur à placer dans le champ texte... anciennement "element.value"
value = src.substring(indice1+1,indice2);
document.getElementById('checknum0'+compteur_i).value = value ;
element.src = 'http://www.site.com/site/images/'+value+'-ok.gif';
compteur_i++;
}
}
if(value.indexOf("-ok"))
{
document.getElementById('checknum0'+compteur_i).value = value ;
element.src = 'http://www.site.com/site/images/'+value+'-ok.gif';
compteur_i++;
}
comme ça on ne supprime pas réelement l'action onclick pour éventuellement s'en reservir par la suite en cas de modification d'un chiffre. Puisque pour l'instant une fois cliqué on ne peut plus revenir en arrière... mais ça c'est une autre histoire.var compteur_i = 1;
function setText(element)
{
if( compteur_i <= 7)
{
// récupération de la source de l'image
var src = element.src;
// récupération de l'indice du dernier "/" de la source
var indice1 = src.lastIndexOf("/");
// récupération de l'indice du dernier "." de la source
var indice2 = src.lastIndexOf(".");
// récupération de la chaine contenu entre "/" et "."
// value contient la valeur à placer dans le champ texte... anciennement "element.value"
value = src.substring(indice1+1,indice2);
if(value.indexOf("-ok"))
{
document.getElementById('checknum0'+compteur_i).value = value ;
element.src = 'http://www.site.com/site/images/'+value+'-ok.gif';
compteur_i++;
}
}
} Mais ca fait comme si je n'avais pas mis ce dernier test.Code : Tout sélectionner
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<!-- Date de création: 21/10/2007 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title>Remplir une grille de loterie</title>
<meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" />
<style type="text/css">
/* <![CDATA[ */
input.choix_nombre {
width: 30px;
height: 30px;
line-height: 30px;
font-family: verdana, helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
border: 3px groove #f00;
color: #33c;
background-color: #ff0;
text-align: center;
margin: 2px;
}
input.selectionne {
border: 1px solid #ccc;
text-align: center;
}
/* ]]> */
</style>
<script type="text/javascript">
/* <![CDATA[ */
/**
* Fonction d'ajout d'un nombre sélectionné.
*
* Cette fonction va récupérer le nombre envoyé par un des boutons et
* chercher le premier champ vide pour l'y insérer.
* Le nombre cliqué sera désactivé, donc on ne pourra cliquer deux fois
* le même nombre.
* Si tous les champs sont remplis, on active et affiche le bouton d'envoi.
*
* @param {Int} nombre Entier envoyé par un des boutons.
*/
function ajoutNombre(nombre)
{
/* On boucle sur les champs à remplir */
for(var i = 1; i <= 7; i++)
{
/* On recrée l'identifiant du champ à traiter */
idChamp = 'checknum'+ i;
/* On identifie le champ */
var champ = document.getElementById(idChamp);
/* On vérifie si le champ est vide */
if(champ.value == '')
{
/* Le champ est vide, on y insère le nombre */
champ.value = nombre;
/* On désactive le bouton cliqué */
var idBouton = 'bouton'+ nombre;
/* Ce bouton est maintenant désactivé et on ne pourra plus cliquer dessus */
document.getElementById(idBouton).disabled = true;
/* S'il s'agit du dernier champ, on active le bouton d'envoi et on l'affiche */
if(i == 7)
{
document.getElementById('envoi').disabled = false;
document.getElementById('envoi').style.display = 'inline';
}
/* On sort de la boucle, inutile de continuer pour rien */
break;
}
}
}
/**
* Fonction de ré-activation des boutons.
*
* Appelée par le bouton reset, cette fonction va ré-activer
* les boutons qui ont été cliqués et désactivés par la fonction
* précédente, ajoutNombre()
*/
function activerBoutons()
{
var idBouton;
var val;
/* On boucle sur chaque bouton */
for(var i = 1; i <= 42; i++)
{
/* Reconstruction de l'identifiant de chaque bouton */
val = (i < 10) ? '0'+ i : i;
idBouton = 'bouton'+ val;
/* On ré-active le bouton. */
document.getElementById(idBouton).disabled = false;
document.getElementById('envoi').style.display = 'none';
}
}
/* ]]> */
</script>
</head>
<body>
<form id="loterie" action="./" method="post">
<fieldset style="border: none;">
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton01" value="01" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton02" value="02" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton03" value="03" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton04" value="04" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton05" value="05" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton06" value="06" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton07" value="07" /><br />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton08" value="08" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton09" value="09" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton10" value="10" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton11" value="11" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton12" value="12" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton13" value="13" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton14" value="14" /><br />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton15" value="15" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton16" value="16" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton17" value="17" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton18" value="18" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton19" value="19" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton20" value="20" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton21" value="21" /><br />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton22" value="22" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton23" value="23" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton24" value="24" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton25" value="25" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton26" value="26" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton27" value="27" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton28" value="28" /><br />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton29" value="29" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton30" value="30" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton31" value="31" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton32" value="32" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton33" value="33" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton34" value="34" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton35" value="35" /><br />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton36" value="36" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton37" value="37" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton38" value="38" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton39" value="39" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton40" value="40" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton41" value="41" />
<input class="choix_nombre" type="button" onclick="ajoutNombre(this.value);" id="bouton42" value="42" />
<hr />
<input class="selectionne" type="text" size="1" maxlength="2" readonly="readonly" name="checknum1" id="checknum1" value="" />
<input class="selectionne" type="text" size="1" maxlength="2" readonly="readonly" name="checknum2" id="checknum2" value="" />
<input class="selectionne" type="text" size="1" maxlength="2" readonly="readonly" name="checknum3" id="checknum3" value="" />
<input class="selectionne" type="text" size="1" maxlength="2" readonly="readonly" name="checknum4" id="checknum4" value="" />
<input class="selectionne" type="text" size="1" maxlength="2" readonly="readonly" name="checknum5" id="checknum5" value="" />
<input class="selectionne" type="text" size="1" maxlength="2" readonly="readonly" name="checknum6" id="checknum6" value="" />
<input class="selectionne" type="text" size="1" maxlength="2" readonly="readonly" name="checknum7" id="checknum7" value="" />
<hr />
<input type="reset" name="effacer" id="effacer" value="Recommencer !" onclick="activerBoutons();" />
<input type="submit" style="display: none;" name="envoi" id="envoi" value="Jouer !" disabled="disabled" />
</fieldset>
</form>
</body>
</html>
if(value.indexOf("-ok") == -1)