Se connecter / S'enregistrer

Résolu Image à la place d'une case à cocher...

Solutions (34)
Tags :
  • Input
  • Programmation
|
Bonjour,

J'ai un formulaire qui se présente a peu prés comme ceci :

1. <form method="post" action="traitement.php" >
2. <input type="checkbox" name="data[carbone]" value="1"> carbone
3. <input type="checkbox" name="data[cuivre]" value="2"> cuivre
4. <input type="checkbox" name="data[eau]" value="4"> eau
5. <input type="checkbox" name="data[fer]" value="8">fer
6. <input type="checkbox" name="data[sable]" value="16">sable
7. <input type="checkbox" name="data[feu]" value="32">feu
8. <input type="checkbox" name="data[pierre]" value="64">pierre
9. <input type="submit" value="Ok">
10. </form>

J'aimerai pouvoir remplacer la case à cocher par une petite photo différente à chaque fois selon l'élément (carbone cuivre, eau.....) j'ai essayé avec input type image mais cela fais un submit au clic directement... Il y a t'il une solution html a ce problème ?

De plus j'aimerai qu'une fois cette image cliquée elle puisse être entourée d'une bordure par exemple ou au moins qu'elle soit identifiable comme selectionnée....

Bon je ne sais pas si cela est faisable mais merci de m'aiguiller sur quelques pistes peut être....merci par avance

Yoann
Contenus similaires
Meilleure solution
partage
|
ah mince

il faut rajouter ça :
  1. <script type="text/javascript">
  2. function cocheImage(id){
  3. if(document.getElementById('data_'+id).checked){
  4. document.getElementById('data_'+id).checked = false;
  5. document.getElementById('image_'+id).style.border = '1px solid transparent';
  6. }else{
  7. document.getElementById('data_'+id).checked = true;
  8. document.getElementById('image_'+id).style.border = '1px solid black';
  9. }
  10. return false;
  11. }
  12. </script>



un cadre est ajouté autour de l'image lorsque la case est cochée
  • Commenter cette solution |
Score
0
òh
òi
|
j'essaye de mélanger la salade dans tout les sens...mais pour l'instant pas grand chose. si je trouve une solution je t'en ferai part, dans tous les cas mille merci à toi..et bonne nuit tout de même !

yoann...
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Peut-être que le mélange des solutions peut donner quelque chose ;) 
  • Commenter cette réponse |
Score
0
òh
òi
|
oui j'ai déjà un lien accueil, c'est vrai que c'est finalement la solution la plus simple je vais essayer de rendre ce lien un peu plus attractif pour qu'il soit cliqué plutôt que le page arrière du navigateur....

pour ce qui est des métas je les ai enlevé....devrais je les laisser ?
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Ah oui pardon, comme un con j'ai remis "int"...

Sinon, une solution pas forcément propre, c'est de mettre un lien pour revenir à la page index sur tes pages de résultat. S'ils font un retour, bah tant pis ils devront rafraichir ou décocher ceux qu'ils ne veulent plus, et puis sinon ils auront le lien.
Et tant que j'y pense, est-ce que tu as laissé les <meta> pour le cache aussi ?
  • Commenter cette réponse |
Score
0
òh
òi
|
non toujours pas....j'ai enlevé le int aussi sur ce dernier code. mais peut être que ie ou opéra n'autorise pas ce comportement ?
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Remplace le code par :
  1. <script type="text/javascript">
  2. var inputs = document.getElementsByTagName("input" );
  3. for (int i=0; i<inputs.length; i++)
  4. {
  5. if (inputs[0].type == "checkbox")
  6. {
  7. inputs[0].checked = false;
  8. }
  9. }
  10. </script>
  • Commenter cette réponse |
Score
0
òh
òi
|
oui ça s'exécute sans erreurs comme cela..mais c'est toujours le même comportement avec ie et opéra....
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Ah oui pardon, en javascript il n'y a pas de type de données, enlève le "int" et ça devrait s'exécuter correctement
  • Commenter cette réponse |
Score
0
òh
òi
|
si je le mets a la suite du script précédent cela me génére une erreur, comme çela peut être :?

<script type="text/javascript">
var inputs = document.getElementsByTagName("input" );
for (int i=0; i<inputs.length; i++)
{
inputs.setAttribute("autocomplete", "off" );
}
</script>
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
J'ai oublié de préciser que c'était du code javascript.
Mets le en bas de ta page dans la balise <script>.
  • Commenter cette réponse |
Score
0
òh
òi
|
j'ai essayé de mettre ce code dans le head et aussi à la suite de l'autre mais non ça n'a pas l'air de fonctionner.....il est capricieux cet internet explorer dis donc !!
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Faudrait voir si de le mettre sur chaque checkbox ne marche pas.
Pour faire ça plus simplement que de copier autocomplete="off" sur chaque checkbox:
  1. var inputs = document.getElementsByTagName("input");
  2. for (int i=0; i<inputs.length; i++)
  3. {
  4. inputs[i].setAttribute("autocomplete", "off");
  5. }
  • Commenter cette réponse |
Score
0
òh
òi
|
ça marche super avec mozilla...mais pas avec internet explorer et opéra.... bizarre ça !

et en javascript ?

getElementById('lajesaispasquoimettre').setAttribute("autocomplete","off");


ça peut se faire comme çela ? mais comment appeler tous mes id ? ('-') ?
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Essaie d'ajouter autocomplete="off" à ta balise <form>
  • Commenter cette réponse |
Score
0
òh
òi
|
Non cela n'a pas l'air de fonctionner, et aprés lecture de ces deux sites sur le web (je t'ai mis les liens) et testé quelques métas >> expires pragma no-cache....je n'ai pas encore trouvé la solution....mais j'y regarderai encore un peu dans la semaine à tête reposé.....


http://www.procata.com/cachetest/
http://www.mnot.net/cache_docs/

Cela doit bien pouvoir se faire....


merci beaucoup omar..............
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Il y a peut être l'opérateur ternaire qui est compliqué, utilisé pour la couleur:
  1. (condition) ? valeur si vrai : valeur si fausse;


Et sinon, pour le problème de retour en arrière, c'est généralement spécifique aux navigateurs qui gardent tes choix en cache.
Tu peux essayer d'ajouter une balise <meta> dans le <head> (sans grande conviction) :
  1. <meta http-equiv="CACHE-CONTROL" content="NO-CACHE">


Sinon, il faudrait voir si c'est pas possible de désactiver toutes les checkbox lors du chargement de la page, mais je ne suis pas sûr qu'il la recharge vraiment vu que c'est en cache. Enfin, essaie déjà ça et dis-moi si ça marche.
  • Commenter cette réponse |
Score
0
òh
òi
|
Miracle ça marche, et le plus miraculeux c'est que je comprends (dans les grandes lignes) le code, le bouquin de christian wenz m'aide pour ça aussi........

si je peux me permettre (et après promis j'arrête de t'ennuyer..!!) il y aurait t'il une solution pour que lorsque on fait un retour arrière avec le bouton arrière du navigateur pour que les éléments sélectionnés ne le soient plus car la apparemment il garde en mémoire les choix.....et ce n'est qu'n faisant un refresh ou en recliquant dessus qu'ils se dé-sélectionnent.....bon ça c'est un détail je l'avoue...

en tous cas un grand merci à toi une nouvelle fois.....

et on est d'accord c'est des Gucci c'est des goûts de ch.....héhé

salutations....

yoann (de moins en moins débutant)
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Alors:
Dans tes images tu mets des onmouseover et onmouseout comme ça :
  1. <img ... onmouseover="enter(this);" onmouseout="leave(this);" >


Ca va appeler les deux méthodes javascript enter et leave:
  1. function enter(elt) {
  2. var name = elt.id.split("_")[1];
  3. var color = (document.getElementById('data_'+name).checked) ? "yellow" : "green";
  4. elt.style.border = '2px solid '+color;
  5. }
  6. function leave(elt) {
  7. var name = elt.id.split("_")[1];
  8. var color = (document.getElementById('data_'+name).checked) ? "red" : "transparent";
  9. elt.style.border = '2px solid '+color;
  10. }


Et tu as les 4 couleurs utilisées (yellow, green, red et transparent). Donc si tu veux changer la bordure jaune, tu peux remplacer yellow par red par exemple, et comme ça, ça restera rouge quand tu survoles.

Et si tu ne mets pas de bordure, oui il risque d'y avoir un espèce de "saut" d'image pour ajouter les 2px de bordure à chaque fois que tu vas survoler une image.
  • Commenter cette réponse |
Score
0
òh
òi
|
* l'image dont l'élément n'est pas sélectionné : bordure blanche car mon image est blanche autour donc cela ne se verra pas je me trompe ?. (ou bien transparent comme cela je pourrai voir ce que cela donne au niveau du code mon but sur ce forum est avant tout d'apprendre)
* l'image dont l'élément n'est pas sélectionné et on a la souris dessus : une bordure verte.
* l'image dont l'élément est sélectionné : une bordure rouge.
* l'image dont l'élément est sélectionné et on a la souris dessus : une bordure jaune.


Peut être que le dernier comportement (jaune) n'est pas indispensable, cela risque de brouiller le visiteur je ne sais pas trop...

En tous cas on doit pouvoir dé-sélectionner et revenir à la bordure blanche ou transparente...

Pour finir si je ne mets pas de bordures au premier comportement (image non sélectionné et pas de souris dessus) ne risque t'il pas d'y avoir un décalage de toutes mes vignettes de 2 px lorsque je passerai par dessus ? (ça c'est juste pour savoir...) !

Merci Omar...
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
1) Tu n'as pas besoin d'ouvrir un autre <script>
2) quel fonctionnement tu veux exactement ? Il y a 4 états possibles :
  • l'image dont l'élément n'est pas sélectionné
  • l'image dont l'élément n'est pas sélectionné et on a la souris dessus
  • l'image dont l'élément est sélectionné
  • l'image dont l'élément est sélectionné et on a la souris dessus

    Quelle couleur tu veux pour chacun de ces états ? Et j'arrangerai le code pour.
    • Commenter cette réponse |
    Score
    0
    òh
    òi
    |
    Voila ce que j'ai écrit mais ai-je fait une erreur de syntaxe ? car le comportement est étrange la bordure reste verte après avoir survolé l'image, quand je la clique elle devient rouge et quand je repasse à nouveau dessus elle redevient verte...




    1. <form method="post" action="http://www.chimie-facile.com/traitement2.php" >
    2. div style="display:none;">
    3. <p align="center">
    4. <input type="checkbox" name="data[feu]" id="data_feu" value="1">
    5. feu
    6. <input type="checkbox" name="data[air]" id="data_air" value="2">
    7. air
    8. </p>
    9. </div>
    10.  
    11. <div align="center">
    12.  
    13. <img src="Images/imagesformulaire/feu.png" id="image_feu" style="padding:0px; cursor:pointer; border:2px solid transparent;" onclick="cocheImage('feu')" onmouseover="this.style.border='2px solid green';" onmouseout(leave(this));" >
    14.  
    15. <img src="Images/imagesformulaire/air.png" id="image_air" style="padding:0px; cursor:pointer; border:2px solid transparent;" onclick="cocheImage('air')" onmouseover="this.style.border='2px solid green';" onmouseout(leave(this));" >
    16.  
    17.  
    18. <input type="submit" class="button" value="Cliquer ensuite ici pour rechercher des combinaisons">
    19. </div>
    20. </form>
    21.  
    22. <script type="text/javascript">
    23. function cocheImage(id){
    24. if(document.getElementById('data_'+id).checked){
    25. document.getElementById('data_'+id).checked = false;
    26. document.getElementById('image_'+id).style.border = '2px solid transparent';
    27. }else{
    28. document.getElementById('data_'+id).checked = true;
    29. document.getElementById('image_'+id).style.border = '2px solid red';
    30. }
    31. return false;
    32. }
    33. </script>
    34.  
    35. <script type="text/javascript"> <!-- dois-je ouvrir un nouveau <script type comme j'ai fait pour ce 2émcode ?-->
    36. function leave(elt) {
    37. var name = elt.id.split("_" )[1];
    38. if (!document.getElementById('data_'+name).checked)
    39. {
    40. elt.style.border='2px solid transparent';
    41. }
    42. else
    43. {
    44. elt.style.border='2px solid red';
    45. }
    46. }
    47. </script>
    48. </div>
    • Commenter cette réponse |
    Score
    0
    òh
    òi
    , Modérateur |
    Ah oui désolé, c'est moi qui ai remis "black" pour le onmouseout aussi.

    remplace le onmouseout par ça:
    1. onmouseout(leave(this));


    et ajoute cette fonction javascript en dessous de cocheImage:
    1. function leave(elt) {
    2. var name = elt.id.split("_")[1];
    3. if (!document.getElementById('data_'+name).checked)
    4. {
    5. elt.style.border='2px solid transparent';
    6. }
    7. else
    8. {
    9. elt.style.border='2px solid red';
    10. }
    11. }



    Ca devrait le faire.
    • Commenter cette réponse |
    Score
    0
    òh
    òi
    |
    Bonjour Omar,

    la fonction que tu m'as donné marche bien sur le survol mais quand la souris quitte l'image la bordure reste noire j'ai donc mis un onmouseout transparent (je peux faire ça ?) apparement ça marche...

    le problème maintenant c'est que quand je sélectionne un élément (quand je clique une image) et que je vais cliquer sur une autre la sélection disparait....la bordure initiale ne reste pas. est ce l'effet de onmouseout qui agit ?

    merci par avance...

    je t'ai mis une réduction de mon code :


    1. <form method="post" action="http://www.chimie-facile.com/traitement2.php" >
    2. <div style="display:none;">
    3. <p align="center">
    4. <input type="checkbox" name="data[feu]" id="data_feu" value="1">
    5. feu
    6. <input type="checkbox" name="data[air]" id="data_air" value="2">
    7. air
    8. </p>
    9. </div>
    10.  
    11. <div align="center">
    12.  
    13. <img src="Images/imagesformulaire/feu.png" id="image_feu" style="padding:0px; cursor:pointer; border:2px solid transparent;" onclick="cocheImage('feu')"onmouseover="this.style.border='2px solid green';" onmouseout="this.style.border='2px solid transparent';" >
    14.  
    15. <img src="Images/imagesformulaire/air.png" id="image_air" style="padding:0px; cursor:pointer; border:2px solid transparent;" onclick="cocheImage('air')" "onmouseover="this.style.border='2px solid green';" onmouseout="this.style.border='2px solid transparent';" >
    16.  
    17.  
    18. <input type="submit" class="button" value="Cliquer ensuite ici pour rechercher des combinaisons">
    19. </div>
    20. </form>
    21.  
    22. <script type="text/javascript">
    23. function cocheImage(id){
    24. if(document.getElementById('data_'+id).checked){
    25. document.getElementById('data_'+id).checked = false;
    26. document.getElementById('image_'+id).style.border = '2px solid transparent';
    27. }else{
    28. document.getElementById('data_'+id).checked = true;
    29. document.getElementById('image_'+id).style.border = '2px solid red';
    30. }
    31. return false;
    32. }
    33. </script>
    34. </div>
    • Commenter cette réponse |
    Score
    0
    òh
    òi
    , Modérateur |
    Salut,

    Tu peux ajouter:
    1. onmouseover="this.style.border='1px solid black';" onmouseout="this.style.border='1px solid black';"
    dans le code HTML de chacune de tes images
    • Commenter cette réponse |
    Score
    0
    òh
    òi
    |
    me revoilà....

    une petite dernière question :

    Est il possible de créer un effet de survol sur les images avec ce code ? par exemple si la souris passe sur l'image est ce que la bordure pourrait apparaitre ?

    Je pense que cela rendrait plus attractif ma série d'image....

    merci par avance....

    Yoann
    • Commenter cette réponse |
    Score
    0
    òh
    òi
    |
    Meilleure réponse sélectionnée par yoann54.
    • Commenter cette réponse |
    Score
    0
    òh
    òi
    |
    un GRAND merci seb !!!
    • Commenter cette réponse |
    Score
    0
    òh
    òi
    , Témoin (collector) |
    +1 seb33300
    • Commenter cette réponse |
    Score
    0
    òh
    òi
    |
    avec un <input type="image" src="url">
    • Commenter cette réponse |
    Score
    0
    òh
    òi
    |
    Oui ça marche super...merci beaucoup

    une petite dernière question peut t-on remplacer le bouton submit par une image de son choix ?
    • Commenter cette réponse |
    Score
    0
    òh
    òi
    |
    Merci seb pour cette réponse rapide....j'ai cependant un peu de mal a comprendre le code et comment l'image est redirigée vers le bon checkbox : est ce name="data[carbone]" ou id="data_carbone" qui identifie cela ?

    et y a t'il une solution pour que l'on voit que l'image a été coché ? car j'ai plus de 20 éléments que l'on peut associer entre eux....et c'est pas évident de se rappeler sur lesquels on a cliqué.....

    merci en tous cas de m'aider....
    • Commenter cette réponse |
    Score
    0
    òh
    òi
    , Modérateur |
    T'as oublié la fonction cocheImage Seb ;) 
    Enfin, sauf si tu lui laisses faire :) 
    • Commenter cette réponse |
    Score
    0
    òh
    òi
    |
    Tu peux faire ça :

    1. <form method="post" action="traitement.php" >
    2. <div style="display:none;">
    3. <input type="checkbox" name="data[carbone]" id="data_carbone" value="1"> carbone
    4. <input type="checkbox" name="data[cuivre]" id="data_cuivre" value="2"> cuivre
    5. <input type="checkbox" name="data[eau]" id="data_eau" value="4"> eau
    6. <input type="checkbox" name="data[fer]" id="data_fer" value="8"> fer
    7. <input type="checkbox" name="data[sable]" id="data_sable" value="16"> sable
    8. <input type="checkbox" name="data[feu]" id="data_feu" value="32"> feu
    9. <input type="checkbox" name="data[pierre]" id="data_pierre" value="64"> pierre
    10. </div>
    11.  
    12. <img src="carbone.png" id="image_carbone" style="padding:2px; cursor:pointer; border:1px solid transparent;" onclick="cocheImage('carbone')">
    13. <img src="cuivre.png" id="image_cuivre" style="padding:2px; cursor:pointer; border:1px solid transparent;" onclick="cocheImage('cuivre')">
    14. <img src="eau.png" id="image_eau" style="padding:2px; cursor:pointer; border:1px solid transparent;" onclick="cocheImage('eau')">
    15. <img src="fer.png" id="image_fer" style="padding:2px; cursor:pointer; border:1px solid transparent;" onclick="cocheImage('fer')">
    16. <img src="sable.png" id="image_sable" style="padding:2px; cursor:pointer; border:1px solid transparent;" onclick="cocheImage('sable')">
    17. <img src="feu.png" id="image_feu" style="padding:2px; cursor:pointer; border:1px solid transparent;" onclick="cocheImage('feu')">
    18. <img src="pierre.png" id="image_pierre" style="padding:2px; cursor:pointer; border:1px solid transparent;" onclick="cocheImage('pierre')">
    19.  
    20. <input type="submit" value="Ok">
    21. </form>
    • Commenter cette réponse |

    Ce n'est pas ce que vous cherchiez ?

    Tom's guide dans le monde
    • Allemagne
    • Italie
    • Irlande
    • Royaume Uni
    • Etats Unis
    Suivre Tom's Guide
    Inscrivez-vous à la Newsletter
    • ajouter à twitter
    • ajouter à facebook
    • ajouter un flux RSS