Publicité
+ Répondre à la discussion
Affichage des résultats 1 à 4 sur 4
  1. #1
    Invité régulier
    Inscrit en
    octobre 2008
    Messages
    29
    Détails du profil
    Informations forums :
    Inscription : octobre 2008
    Messages : 29
    Points : 6
    Points
    6

    Par défaut Afficher une image au passage de la souris sur un texte

    Bonjour,

    Dans une page Html et de façon moderne comment Afficher une image au passage de la souris sur un texte ?

    Débutant et ayant lu beaucoup de solutions proposées sur google recherche dont aucune ne fonctionne je me tourne vers votre site professionnel.

    Merci d'avance

  2. #2
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    7 307
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 7 307
    Points : 12 751
    Points
    12 751

    Par défaut

    Bonsoir,
    il n'est rien de très complexe dans la réalisation de ce que tu cherches à faire.

    Il eut mieux valu que tu nous montres le code que tu n'arrives pas à faire fonctionner pour que l'on te corrige et t'explique.

  3. #3
    Membre du Club Avatar de DezMax
    Homme Profil pro
    Terminale STI2D-SIN
    Inscrit en
    décembre 2012
    Messages
    87
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 19
    Localisation : France

    Informations professionnelles :
    Activité : Terminale STI2D-SIN

    Informations forums :
    Inscription : décembre 2012
    Messages : 87
    Points : 63
    Points
    63

    Par défaut

    Avec ce code utilisant Javascript l'image sera affichée au survol et cacher dès que la souris sort du champ de texte le petit code javascript change le style css en passant de display:none; à display:block; et inversement.
    Exemple :

    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <html>
        <head>
     
        </head>
     
        <body>
            <script type="text/javascript">
            function show(){
                    document.getElementById('image').style.display = 'block';
                    }
     
                    function hide(){
                    document.getElementById('image').style.display = 'none';
                    }
            </script>
     
     
    		<a href="#" onmouseover="show();" onmouseout="hide();">MON TEXTE</a></br>
    		<img id="image" style="display:none;" src="chemin_de_image.png"/>
        </body>
    </html>

  4. #4
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    7 307
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 7 307
    Points : 12 751
    Points
    12 751

    Par défaut

    Dans ce cas autant utiliser la pseudo classe :hover.

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •