Afficher texte au survol d'une image [Fermé]

Signaler
Messages postés
11
Date d'inscription
vendredi 2 mai 2014
Statut
Membre
Dernière intervention
19 octobre 2015
-
Messages postés
11
Date d'inscription
vendredi 2 mai 2014
Statut
Membre
Dernière intervention
19 octobre 2015
-
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

4 réponses

Bonsoir, dans cette idée là ?

<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)
Messages postés
11
Date d'inscription
vendredi 2 mai 2014
Statut
Membre
Dernière intervention
19 octobre 2015

Je met tout ça dans le code html ?
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" ?
Messages postés
11
Date d'inscription
vendredi 2 mai 2014
Statut
Membre
Dernière intervention
19 octobre 2015

J'ai essayé le code donné mais ça ne me le met pas sur l'image mais en dessous ..

Essai ce code sur une page seul, tu verras plus clair :

<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.
Messages postés
11
Date d'inscription
vendredi 2 mai 2014
Statut
Membre
Dernière intervention
19 octobre 2015

ça me met toujours le texte en dessous de l'image ^^'
Messages postés
11
Date d'inscription
vendredi 2 mai 2014
Statut
Membre
Dernière intervention
19 octobre 2015

Peut être ce serait plus simple qu'au survol de l'image elle soit remplacée par une autre avec un texte dessus ?