Communauté francophone - Jimdo
Bienvenue sur le nouveau forum de discussion officiel de la communauté francophone des utilisateurs de Jimdo.

Ce forum annule et remplace le précédent forum Jimdo, qui a malheureusement dû être fermé pour raisons techniques.

Vous avez un ou plusieurs sites Jimdo ? Enregistrez vous sur le forum, posez vos questions et prenez part aux discussions !

Vous êtes simple visiteur ? Vous pouvez consulter nos pages, mais vous ne pourrez pas laisser de message.

Changer le texte en cliquant dessus avec la souris

Aller en bas

Changer le texte en cliquant dessus avec la souris

Message par RW02 le Lun 12 Fév 2018 - 17:46

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


RW02

Messages : 3
Date d'inscription : 28/09/2016
Age : 59
Localisation : Aisne

http://www.scrabbleplesseen.fr/

Revenir en haut Aller en bas

Re: Changer le texte en cliquant dessus avec la souris

Message par FredVig le Lun 12 Fév 2018 - 22:56

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.

_________________
'Expert' Jimdo affilié, bénévole du forum et indépendant rémunéré par mes clients.
avatar
FredVig

Messages : 2053
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Re: Changer le texte en cliquant dessus avec la souris

Message par FredVig le Lun 12 Fév 2018 - 23:11

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

_________________
'Expert' Jimdo affilié, bénévole du forum et indépendant rémunéré par mes clients.
avatar
FredVig

Messages : 2053
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Re: Changer le texte en cliquant dessus avec la souris

Message par RW02 le Jeu 15 Fév 2018 - 22:04

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

RW02

Messages : 3
Date d'inscription : 28/09/2016
Age : 59
Localisation : Aisne

http://www.scrabbleplesseen.fr/

Revenir en haut Aller en bas

Re: Changer le texte en cliquant dessus avec la souris

Message par FredVig le Ven 16 Fév 2018 - 0:05

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

_________________
'Expert' Jimdo affilié, bénévole du forum et indépendant rémunéré par mes clients.
avatar
FredVig

Messages : 2053
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Re: Changer le texte en cliquant dessus avec la souris

Message par RW02 le Mer 7 Mar 2018 - 15:40

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>

RW02

Messages : 3
Date d'inscription : 28/09/2016
Age : 59
Localisation : Aisne

http://www.scrabbleplesseen.fr/

Revenir en haut Aller en bas

Re: Changer le texte en cliquant dessus avec la souris

Message par FredVig le Mer 7 Mar 2018 - 21:19

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

_________________
'Expert' Jimdo affilié, bénévole du forum et indépendant rémunéré par mes clients.
avatar
FredVig

Messages : 2053
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Re: Changer le texte en cliquant dessus avec la souris

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Revenir en haut


 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum