Afficher image au passage sur texte

djbabou Messages postés 155 Date d'inscription dimanche 21 octobre 2007 Statut Membre Dernière intervention 23 novembre 2015 - 23 févr. 2011 à 19:39
cs_LDDL Messages postés 33 Date d'inscription dimanche 27 avril 2003 Statut Membre Dernière intervention 7 mars 2013 - 26 févr. 2011 à 10:37
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
<script language="javascript">
<!--
function afficherImage()
{
document.getElementById('zoneImg').innerHTML = '';
}

function enleverImage()
{
document.getElementById('zoneImg').innerHTML = '';
}
-->
</script>


Ensuite, dans mon html, je met ce code:

Afficher

<label id="zoneImg"></label>


Merci d'avance pour vos réponses !

10 réponses

shilom54 Messages postés 27 Date d'inscription dimanche 13 juin 2010 Statut Membre Dernière intervention 5 avril 2011
23 févr. 2011 à 19:56
Salut a tu essayé de te tourner vers Jquery?
regarde la : Tooltip.
En esperant t'avoir aidé
0
djbabou Messages postés 155 Date d'inscription dimanche 21 octobre 2007 Statut Membre Dernière intervention 23 novembre 2015
23 févr. 2011 à 20:08
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é
0
shilom54 Messages postés 27 Date d'inscription dimanche 13 juin 2010 Statut Membre Dernière intervention 5 avril 2011
23 févr. 2011 à 20:17
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.
0
shilom54 Messages postés 27 Date d'inscription dimanche 13 juin 2010 Statut Membre Dernière intervention 5 avril 2011
23 févr. 2011 à 20:20
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
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
shilom54 Messages postés 27 Date d'inscription dimanche 13 juin 2010 Statut Membre Dernière intervention 5 avril 2011
23 févr. 2011 à 20:21
j'oublis de mettre le lien mdr c'est la : Tooltip
0
djbabou Messages postés 155 Date d'inscription dimanche 21 octobre 2007 Statut Membre Dernière intervention 23 novembre 2015
23 févr. 2011 à 20:29
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 ?
0
shilom54 Messages postés 27 Date d'inscription dimanche 13 juin 2010 Statut Membre Dernière intervention 5 avril 2011
23 févr. 2011 à 20:36
Tu as bien importer tes fichiers JS dans ta page php?
c'est a dire :
<script src="(le repertoire)/jquery.js" type="text/javascript"></script>

et
<script src="(le repertoire)/jquery.tooltip.js" type="text/javascript"></script>
0
djbabou Messages postés 155 Date d'inscription dimanche 21 octobre 2007 Statut Membre Dernière intervention 23 novembre 2015
23 févr. 2011 à 20:41
Oui j'y ai pensé !

Dans ma page, j'ai bien
<script src="includes/jquery.js" type="text/javascript"></script>
<script src="includes/jquery.tooltip.js" type="text/javascript"></script>
0
shilom54 Messages postés 27 Date d'inscription dimanche 13 juin 2010 Statut Membre Dernière intervention 5 avril 2011
24 févr. 2011 à 10:05
j'ai réalisé un petit test est ce que c'est bien ca que tu veux faire :

test
0
cs_LDDL Messages postés 33 Date d'inscription dimanche 27 avril 2003 Statut Membre Dernière intervention 7 mars 2013
26 févr. 2011 à 10:37
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

]
0