Afficher texte au survol d'une image

cactuss42 Messages postés 14 Statut Membre -  
cactuss42 Messages postés 14 Statut Membre -
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

  1. Utilisateur anonyme
     
    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)
    0
    1. cactuss42 Messages postés 14 Statut Membre
       
      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" ?
      0
    2. cactuss42 Messages postés 14 Statut Membre
       
      J'ai essayé le code donné mais ça ne me le met pas sur l'image mais en dessous ..
      0
  2. Utilisateur anonyme
     
    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.
    0
  3. cactuss42 Messages postés 14 Statut Membre
     
    ça me met toujours le texte en dessous de l'image ^^'
    0
  4. cactuss42 Messages postés 14 Statut Membre
     
    Peut être ce serait plus simple qu'au survol de l'image elle soit remplacée par une autre avec un texte dessus ?
    0

Discussions similaires

Retrouver l'image originale d'une photo modifiée
Raven -
Asta972155 -

10 réponses