Changer le texte en cliquant dessus avec la souris

[RW02]

Bonjour à tous les forumeurs,

Je suis néophyte et je cherche à mettre en oeuvre la fonction suivante :

Dans un tableau Jimdo, je gère un site autour du jeu de Scrabble et je souhaite proposer aux visiteurs un jeu d'anagramme. Pour cela, j'affiche un mot dans la colonne 1 et en cliquant sur la cellule à droite en colonne 2, je veux faire apparaitre la solution !!!

colonne 1 colonne 2
RENAULT NATUREL
BERLIET LIBERTE
NOVOTEL VOLONTE
etc

Pourriez-vous me donner des pistes pour réaliser celà ? Est-ce faisable ?

Merci d'avance et bonne soirée

[FredVig]

Bonjour. C'est le même principe qui est exploité dans le tuto de jimdo "texte en accordéon" http://www.jimdoforum.fr/t1918-texte-accordeon
mais dans un tableau, il faut cibler d'autres éléments, ça peut être un peu compliqué à développer si vous êtes novice dans ces langages, et très formateur si vous essayez de comprendre.
Commencez à essayer de reproduire le tuto jimdo, en étudiant comment cela fonctionne.
Vous pourrez ensuite remplacer les parties de codes qui concerne la structure tableau.

[FredVig]

Notez que, comme il s'agit d'un tableau, il doit être possible de réaliser une fonction similaire avec un code infiniment plus simple.
Vous voulez qu'une solution écrite dans une cellule d'une rangée du tableau n'apparraisse que lorsque le visiteur le désire. Mettons que cette cellule apparait au survol du curseur, ou au click sur la rangée.
Une astuce a été décrite par un ancien jimdonaute : https://www.fredvig.com/surligner/
Elle consiste à donner un aspect différent à l'arrière-plan d'une rangée lorsqu'elle est survolée avec quelques valeurs de style simples. Il suffit de donner à la solution la même couleur que le fond par défaut. Lorsque le curseur passera sur la rangée, l'arrière-plan changera, mettant en évidence le contenu de la cellule "solution".

[RW02]

Bonsoir Fredvig,
Un grand remerciement pour ton aide qui m'a permis d'arriver à mes fins avec la solution du "surlignage".
Bonne soirée

[FredVig]

C'est très bien fait, félicitations ! (merci à Lefildargent pour le code)

[RW02]

Bonjour Fredvig et tous les autres forumers !

Je reviens sur le sujet dans le but de simplifier, si c'est possible, la création de mon tableau. Pour obtenir ce que je souhaite, je suis obligé de créer autant de blocs de lignes de code que de mots. C'est long et fastidieux !!!

D'après vous, serait-il possible de partir d'un tableau Jimdo et d'adapter le code pour obtenir le même résultat? L'idée étant de pouvoir saisir le contenu des cellules directement dans le tableau et non dans le code !!!

Exemple sur l'un de mes tableaux : https://www.scrabbleplesseen.fr/entra%C3%AEnons-nous/jouer-en-ligne/

<table align="" style="background-color: #fff3ca; border: 1px solid #793f00;" class="mceEditable" border="1" cellpadding="3" cellspacing="0" width="100%">
   <tbody>
       <tr onmouseout="this.style.background='none';" onmousedown="this.style.background='lightslategray';" style="background: none repeat scroll 0% 0% transparent;">
           <td style="text-align: center; font-size:11px" width="200" height="35">
               Le 1er coup
           </td>
           <td style="text-align: center; font-size:11px" width="280">
               <em>(1 scrabble unique)</em>
           </td>
           <td style="text-align: center; font-size:15px" width="170">
               <strong><font color="green">AILNORR</font></strong>
           </td>
           <td style="text-align: center; font-size:13px" width="170">
               <strong><a href="https://1mot.net/lorrain" style="text-decoration:none; color:black;"><font color="#FFF3CA">LORRAIN</font></a></strong>
           </td>
       </tr>

       <tr onmouseout="this.style.background='none';" onmousedown="this.style.background='lightslategray';" style="background: none repeat scroll 0% 0% transparent;">
           <td style="text-align: center; font-size:11px" height="35">
               Le 7+1
           </td>
           <td style="text-align: center; font-size:11px">
               <em>(solution unique)</em>
           </td>
           <td style="text-align: center; font-size:15px">
               <strong><font color="green">TAXIONS+E</font></strong>
           </td>
           <td style="text-align: center; font-size:13px">
               <strong><a href="https://1mot.net/soixante" style="text-decoration:none; color:black;"><font color="#FFF3CA">SOIXANTE</font></a></strong>
           </td>
       </tr>

       <tr onmouseout="this.style.background='none';" onmousedown="this.style.background='lightslategray';" style="background: none repeat scroll 0% 0% transparent;">
           <td style="text-align: center; font-size:11px" height="35">
               Le binôme
           </td>
           <td style="text-align: center; font-size:11px">
               <em>(2 solutions possibles)</em>
           </td>
           <td style="text-align: center; font-size:15px">
               <strong><font color="green">AAINNRV</font></strong>
           </td>
           <td style="text-align: center; font-size:13px">
               <strong><a href="https://1mot.net/navarin" style="text-decoration:none; color:black;"><font color="#FFF3CA">NAVARIN NIRVANA</font></a></strong>
           </td>
       </tr>

       <tr onmouseout="this.style.background='none';" onmousedown="this.style.background='lightslategray';" style="background: none repeat scroll 0% 0% transparent;">
           <td style="text-align: center; font-size:11px" height="35">
               La rallonge avant
           </td>
           <td style="text-align: center; font-size:11px">
               <em>(1 lettre devant le mot)</em>
           </td>
           <td style="text-align: center; font-size:15px">
               <strong><font color="green">?MERLOT</font></strong>
           </td>
           <td style="text-align: center; font-size:13px">
               <strong><a href="https://1mot.net/amerlot" style="text-decoration:none; color:black;"><font color="#FFF3CA">AMERLOT</font></a></strong>
           </td>
       </tr>

       <tr onmouseout="this.style.background='none';" onmousedown="this.style.background='lightslategray';" style="background: none repeat scroll 0% 0% transparent;">
           <td style="text-align: center; font-size:11px" height="35">
               Le benjamin
           </td>
           <td style="text-align: center; font-size:11px">
               <em>(3 lettres devant le mot)</em>
           </td>
           <td style="text-align: center; font-size:15px">
               <strong><font color="green">???DÉLIER</font></strong>
           </td>
           <td style="text-align: center; font-size:13px">
               <strong><a href="https://1mot.net/cordelier" style="text-decoration:none; color:black;"><font color="#FFF3CA">CORDELIER</font></a></strong>
           </td>
       </tr>

       <tr onmouseout="this.style.background='none';" onmousedown="this.style.background='lightslategray';" style="background: none repeat scroll 0% 0% transparent;">
           <td style="text-align: center; font-size:11px" height="35">
               Le prénom
           </td>
           <td style="text-align: center; font-size:11px">
               <em>(valable au scrabble)</em>
           </td>
           <td style="text-align: center; font-size:15px">
               <strong><font color="green">CEELMNT</font></strong>
           </td>
           <td style="text-align: center; font-size:13px">
               <strong><a href="https://1mot.net/clement" style="text-decoration:none; color:black;"><font color="#FFF3CA">CLEMENT</font></a></strong>
           </td>
       </tr>

       <tr onmouseout="this.style.background='none';" onmousedown="this.style.background='lightslategray';" style="background: none repeat scroll 0% 0% transparent;">
           <td style="text-align: center; font-size:11px" height="35">
               Le trinôme
           </td>
           <td style="text-align: center; font-size:11px">
               <em>(2 anagrammes en plus)</em>
           </td>
           <td style="text-align: center; font-size:15px">
               <strong><font color="green">LIGNERAS</font></strong>
           </td>
           <td style="text-align: center; font-size:13px">
               <strong><a href="https://1mot.net/sanglier" style="text-decoration:none; color:black;"><font color="#FFF3CA">SANGLIER SIGNALER</font></a></strong>
           </td>
       </tr>

       <tr onmouseout="this.style.background='none';" onmousedown="this.style.background='lightslategray';" style="background: none repeat scroll 0% 0% transparent;">
           <td style="text-align: center; font-size:11px" height="35">
               Le langage familier
           </td>
           <td style="text-align: center; font-size:11px">
               <em>(valable au scrabble)</em>
           </td>
           <td style="text-align: center; font-size:15px">
               <strong><font color="green">ACDFILR</font></strong>
           </td>
           <td style="text-align: center; font-size:13px">
               <strong><a href="https://1mot.net/flicard" style="text-decoration:none; color:black;"><font color="#FFF3CA">FLICARD</font></a></strong>
           </td>
       </tr>

       <tr onmouseout="this.style.background='none';" onmousedown="this.style.background='lightslategray';" style="background: none repeat scroll 0% 0% transparent;">
           <td style="text-align: center; font-size:11px" height="35">
               La plante
           </td>
           <td style="text-align: center; font-size:11px">
               <em>(valable au scrabble)</em>
           </td>
           <td style="text-align: center; font-size:15px">
               <strong><font color="green">APPRSUY</font></strong>
           </td>
           <td style="text-align: center; font-size:13px">
               <strong><a href="https://1mot.net/papyrus" style="text-decoration:none; color:black;"><font color="#FFF3CA">PAPYRUS</font></a></strong>
           </td>
       </tr>

       <tr onmouseout="this.style.background='none';" onmousedown="this.style.background='lightslategray';" style="background: none repeat scroll 0% 0% transparent;">
           <td style="text-align: center; font-size:11px" height="35">
               Le gentilé
           </td>
           <td style="text-align: center; font-size:11px">
               <em>(habitant de …)</em>
           </td>
           <td style="text-align: center; font-size:15px">
               <strong><font color="green">DIMOORS</font></strong>
           </td>
           <td style="text-align: center; font-size:13px">
               <strong><a href="https://1mot.net/dromois" style="text-decoration:none; color:black;"><font color="#FFF3CA">DRÔMOIS</font></a></strong>
           </td>
       </tr>

       <tr onmouseout="this.style.background='none';" onmousedown="this.style.background='lightslategray';" style="background: none repeat scroll 0% 0% transparent;">
           <td style="text-align: center; font-size:11px" height="35">
               Le 1er coup ODS7
           </td>
           <td style="text-align: center; font-size:11px">
               <em>(1 scrabble unique)</em>
           </td>
           <td style="text-align: center; font-size:15px">
               <strong><font color="green">ABENNOY</font></strong>
           </td>
           <td style="text-align: center; font-size:13px">
               <strong><a href="https://1mot.net/bayonne" style="text-decoration:none; color:black;"><font color="#FFF3CA">BAYONNE</font></a></strong>
           </td>
       </tr>
   </tbody>
</table>

[FredVig]

Cela peut paraître long, mais je pense que que c'est la solution la plus simple.
Vous pouvez aussi créer votre tableau avec le module Jimdo, puis en modifier le code avec un "rechercher/remplacer" pour rajouter le code javascript, en utilisant un logiciel de type Sublime Text

[Contenu sponsorisé]