afficher image au passage sur texte

Question

Bonjour a tous ... Ce que je cherche à faire est dit plus haut ! En cherchant sur google, beaucoup de discussion sur comment afficher un texte au survol d'une image (title, et alt étant les propriétés les plus simples pour cela). Moi j'aimerais faire le contraire : afficher une miniature au passage de la souris sur un texte. Pour ce faire, j'utilise du javascript. Malheureusement, j'ai un petit souci : mon image s'affiche toujours au même endroit peut importe ou je place mon texte. De plus, quand on passe la souris sur le texte, le contenu descend pour prendre la grandeur de l'image affiché. Comment donc faire pour le placer automatiquement juste à coté de mon texte ? Et surtout, comment placer mon image de facon à ce que mon texte ne bouge pas ? Voici mon code javascript Ensuite, dans mon html, je met ce code: Afficher Merci d'avance pour vos réponses !

shilom54 · Answer

Salut a tu essayé de te tourner vers Jquery?
regarde la : Tooltip.
En esperant t'avoir aidé

djbabou · Answer

Merci pour ta réponse.

En fait, non ! Je n'y avait pas pensé ! C'est même la première fois que j'en entend parler...

Et franchement, après avoir regardé vite fait, j'admets ne rien avoir compris. Je te remercie cependant pour ta réponse rapide. Je vais essayer de tester un peu pour voir si j'arrive à un résultat avec le lien que tu m'a donné

shilom54 · Answer

regarde cette partie : An image with a tooltip

si tu remplace l'image par ton texte et que tu affiche l'image dans le tooltip ca devrait le faire je pense si tu as besoin d'explication dis le moi j'essayerai de t'aider.

shilom54 · Answer

pour le télécharger c'est ici il y a les démos pour t'aider a comprendre le code car je te donnerais bien un code tout fait mais le mieux en programmation c'est de comprendre ce que l'on fait..
Mais je t'aiderais si besoin

shilom54 · Answer

j'oublis de mettre le lien mdr c'est la : Tooltip

djbabou · Answer

Ben je suis partant pour un peu d'aide !

Déjà, dans cette ligne : $('#tonus').tooltip({
j'ai remplacé #tonus par l'id de ma div

Ensuite, dans cette ligne return $("").attr("src", this.src); 
j'ai remplacé this.src par <?php echo $r->miniature; ?>

$r->miniature est l'image que je veux afficher quand la souris passe sur le texte.

J'enregistre tout cela, et je balance en local ma page, et la ... mon navigateur se plante !!!

Est-ce bien ce que je devais faire ? ou est-ce que ça n'a rien a voir ?

shilom54 · Answer

Tu as bien importer tes fichiers JS dans ta page php? c'est a dire : et

djbabou · Answer

Oui j'y ai pensé ! Dans ma page, j'ai bien

shilom54 · Answer

j'ai réalisé un petit test est ce que c'est bien ca que tu veux faire : 

test

cs_LDDL · Answer

Bonjour,

Le Css c'est sympa aussi avec un truc du genre

#mini img{
display: none;
}
#mini:hover img{
background-color: none;
display: inline;
position: absolute;
top: 236px;
right: 220px;
z-index: 20;
}

[#  Mon texte	

]

Afficher image au passage sur texte

10 réponses

Votre réponse

Discussions similaires