Afficher une image au survol de la souris sur un texte

WordPress :4.9
Statut : résolu

Ce sujet contient 7 réponses, 3 participants et a été mis à jour pour la dernière fois par soufianisme, le il y a 7 années et 6 mois.

8 sujets de 1 à 8 (sur un total de 8)

Auteur

Messages
31 décembre 2017 à 6 h 32 min #2025976

soufianisme
Participant

Initié WordPress
9 contributions

Bonjour,

SVP avez-vous une idée sur le fait de créer un texte (Dans wordpress) qui contient des mots qui permettent d‘afficher une image , juste en cas de survol de la souris (Exemple : comme Wikipédia).

Je vous remercie en avance …

Remarque : J’ai déjà trouvé un code HTML+CSS qui permet de faire cela, mais je ne sais pas comment le faire intégrer dans WordPress. (Voir le fichier texte ci-joint)

Fichiers joints :
Vous devez être connecté pour voir les fichiers joints.

31 décembre 2017 à 9 h 16 min #2026021

Li-An
Participant

Maître WordPress
29241 contributions

Bonjour, jetez un œil sur l’extension https://www.echodesplugins.li-an.fr/plugins/keywords-tooltip-generator/

31 décembre 2017 à 10 h 58 min #2026062
PhiLyon
Modérateur

Maître WordPress
28248 contributions
Bonjour.

Une solution pas trop compliquée et sans extension/plugin.

Dans Apparence/Personnaliser/CSS additionnel colles le code ci-dessous (tu pourras modifier les valeurs si tu veux)
```
a.survol {
  position:relative;
  border-bottom:1px dashed #808080;
  text-decoration: none;
}
a:hover.survol {
  text-decoration: none;
  background: none;
}
a.survol span {display: none;}

a:hover.survol span {
  display: block;
  position: relative; 
  top: -20px;
  left: 10px;
  z-index: 20;
  width:100%;
  padding:2px 4px;
}
```
Dans ta page/article, en mode texte/HTML fais comme dans cet exemple (tu peux copier/coller le code pour tester)
```
Assumenda beatae <a class="survol" href="#">Wordpress<span><img src="https://wpfr.net/wp-content/themes/wpfr/assets/img/wpfr-logo-couleur.svg" alt="" /></span></a> itaque laudantium maxime minus nulla officia quam tenetur ullam. Asperiores aut cum, delectus esse eum excepturi illo iusto laborum officiis possimus provident quas quo recusandae sit vel veritatis vitae.
```
Bien-sûr il faudra mettre la bonne url pour ton image.

🙂
31 décembre 2017 à 11 h 16 min #2026071

Li-An
Participant

Maître WordPress
29241 contributions

Ma solution était un peu lourde et n’a d’intérêt que si vous avez besoin de l’image sur toutes les occurences du terme.

31 décembre 2017 à 22 h 47 min #2026656

soufianisme
Participant

Initié WordPress
9 contributions

Re-bonjour

Merci pour l’aide … j’ai testé la deuxième réponse (copier coller le code CSS) mais j’obtiens le résultat suivant : http://advenmaroc.byethost3.com/244-2/

Càd , l’image s’affiche avant que la souris passe sur le mot … et moi j’aimerais afficher l’image juste au survol de la souris et puis elle disparait quand j’enlève la souris.

Merci à vous tous chers communauté WP

1 janvier 2018 à 15 h 14 min #2026961

PhiLyon
Modérateur

Maître WordPress
28248 contributions

Bonjour.

Il manque les balises « span » dans le code »

🙂

2 janvier 2018 à 0 h 56 min #2027559

soufianisme
Participant

Initié WordPress
9 contributions

Merci beaucoup Monsieur, mais..

Je ne sais comment intégré <span> dans mon code , j’ai fait des tentatives mais çà va pas marché …

2 janvier 2018 à 1 h 23 min #2027586

soufianisme
Participant

Initié WordPress
9 contributions

Re-bonjour

Merci Infiniment Monsieur

C’est résolu …
Auteur

Messages