Deux exemples de codes html simples directement tapés dans le module texte.

Rollover sur un élément de tableau

Astuce du Jimdonaute "Lefildargent" très utile pour mettre en évidence du contenu dans un tableau : Au survol, la ligne passe en surbrillance.

Légèrement modifié (seconde rangée) de façon à faire apparaître une solution cachée au click dans la dernière cellule.

 

Exemple de Rollover sur tableau par Lefildargent.
Le code de rollover et le tableau doivent être insérés en widget html pour exemple
Exemple de CLICK sur tableau
Remplacez "onmousover" par "onmousedown" dans le code La réponse cachée

Le code en clair :

<table class="mceEditable" border="0" width="100%" cellspacing="0" cellpadding="3">
    <tbody>
        <tr onmouseout="this.style.background='none';" onmouseover="this.style.background='gainsboro';" style="background: none repeat scroll 0% 0% transparent;">
            <td>
                <strong>Exemple de Rollover sur tableau</strong> <em>par Lefildargent.</em> <strong><br /></strong>
            </td>
            <td style="text-align: center;">
                <strong>Le code de rollover et le tableau doivent être insérés en widget html</strong>
            </td>
            <td>
                <em>pour exemple</em>
            </td>
        </tr>
        <tr onmouseout="this.style.background='none';" onmousedown="this.style.background='gainsboro';" style="background: none repeat scroll 0% 0% transparent;">
            <td>
                <strong>Exemple de CLICK sur tableau</strong> <em>par Lefildargent.</em> <strong><br /></strong>
            </td>
            <td style="text-align: center;">
                <strong>Remplacez "onmousover" par "onmousedown" dans le code</strong>
            </td>
            <td style="color:white";>
                <em>La réponse cachée</em>
            </td>
        </tr>
    </tbody>
</table>



"Surligner" une portion de texte

Du très basique, pour rappeler que les balises html du module texte, c'est pratique.

Exemple de texte mis en évidence grâce  aux attributs html

 

Pour mettre une portion de texte en évidence comme ci-dessus voici ce qu'il faut taper dans la fenêtre "modifier de html" du module texte :

<p style="text-align: center; font-size: 100%; font-weight: 500; letter-spacing: 0.05em;"><strong><span style="color: white; padding: 3px 0px 0px 0px; background-color: #005ea7;">Exemple de texte mis en &eacute;vidence gr&acirc;ce&nbsp; aux attributs html<br /></span></strong></p>

Dans l'ordre, vous avez l'alignement centré, la taille de police, la graisse, l'espacement des lettres, puis dans la balise suivante, la couleur du texte, le padding (qui permet de changer la zone colorée) la couleur d'arrière-plan.

 

Pour modifier une seule partie d'une ligne, pour un effet "surlignage de texte", il suffit d'inscrire le texte "normal" entre des balises <p>:

ici, les lettres sont entre des balises <p> Ici, elles sont encadrées en <span> par le code déjà cité plus haut. Il est possible aussi de réaliser cela avec des copiés collés, sans passer par le code html, directement dans les modules textes de Jimdo.

 

 <p>texte normal <strong><span style="color: white; padding: 3px 0px 0px 0px; background-color: #005ea7;">Texte surlign&eacute;</span></strong> texte normal</p>