Afficher une image au passage de la souris sur un texte

dede tabby · 23/12/2012, 16h53

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

NoSmoking · 23/12/2012, 22h33

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.

DezMax · 01/01/2013, 17h03

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

NoSmoking · 02/01/2013, 15h36

Dans ce cas autant utiliser la pseudo classe :hover.

23/12/2012, 16h53	#1
dede tabby Invité régulier Inscription : octobre 2008 Messages : 29 Détails du profil Informations forums : Inscription : octobre 2008 Messages : 29 Points : 6 Points : 6	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
	00

23/12/2012, 22h33	#2
NoSmoking Modérateur Inscription : janvier 2011 Messages : 5 264 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 5 264 Points : 9 118 Points : 9 118	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.
	00

02/01/2013, 15h36	#4
NoSmoking Modérateur Inscription : janvier 2011 Messages : 5 264 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 5 264 Points : 9 118 Points : 9 118	Dans ce cas autant utiliser la pseudo classe :hover.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email