Afficher texte au survol d'une image
cactuss42
Messages postés
13
Date d'inscription
Statut
Membre
Dernière intervention
-
cactuss42 Messages postés 13 Date d'inscription Statut Membre Dernière intervention -
cactuss42 Messages postés 13 Date d'inscription Statut Membre Dernière intervention -
Bonsoir,
Je cherche à savoir quel code utiliser en html/css pour qu'au survol d'une image s'affiche un mot. J'ai essayé avec les balises <span> et <hover> mais cela m'affiche le mot en dessous de l'image alors que j'aimerais que le mot s'affiche soit en remplacement de l'image soit sur l'image.
Avez-vous une idée ?
Merci d'avance
Je cherche à savoir quel code utiliser en html/css pour qu'au survol d'une image s'affiche un mot. J'ai essayé avec les balises <span> et <hover> mais cela m'affiche le mot en dessous de l'image alors que j'aimerais que le mot s'affiche soit en remplacement de l'image soit sur l'image.
Avez-vous une idée ?
Merci d'avance
A voir également:
- Faire apparaitre du texte au survol d'une image
- Apparaitre hors ligne instagram - Guide
- Extraire texte d'une image - Guide
- Comment faire apparaître la tabulation sur word - Guide
- Insérer une image dans word sans bouger le texte - Guide
- Image iso - Guide
4 réponses
Bonsoir, dans cette idée là ?
(N'oublie pas de changer le chemin de ton image)
<div align="center">
<span id="img" onMouseOver="document.getElementById('txt1').style.display='block';" onMouseOut="document.getElementById('txt1').style.display='none';" style="width:100; height:200; background-image:url('CHEMIN-DE-TON-IMAGE'); display:block;">
<span id="txt1" style="display:none;">Salut</span>
</span>
</div>
(N'oublie pas de changer le chemin de ton image)
Essai ce code sur une page seul, tu verras plus clair :
C'est assez lourd pour une si petit chose il y à surement plus simple mais ça fonctionne :)
Tu met ce code à la place du code que tu m'as donnée et n'oublie pas de remplacer le chemin du background-image par le chemin de ton image ainsi que les deux width et les deux height par la taille de ton image.
<div style="width:150; height:150;">
<a href="page3.html">
<span onMouseOver="document.getElementById('txt1').style.display='inline';" onMouseOut="document.getElementById('txt1').style.display='none';" style="display:block; width:150; height:150; background-image:url('http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg')">
<span id="txt1" style="display:none;"><center>Mon Texte</center></span>
</span>
</a>
</div>
C'est assez lourd pour une si petit chose il y à surement plus simple mais ça fonctionne :)
Tu met ce code à la place du code que tu m'as donnée et n'oublie pas de remplacer le chemin du background-image par le chemin de ton image ainsi que les deux width et les deux height par la taille de ton image.
Voici un des codes pour mon image :
<a href="page3.html"> <img src="../images/valise.jpg" alt="Icone valise" /> </a>
Je met donc ceci à la place de "chemin de l'image" ?