Afficher une image au passage de la souris sur un texte

Version imprimable

23/12/2012, 16h53
dede tabby

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
23/12/2012, 22h33
NoSmoking

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.

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>

02/01/2013, 15h36
NoSmoking

Dans ce cas autant utiliser la pseudo classe :hover.