Résolu survol d'un texte = image ? (roll over)

Bonjour je suis a la recherche d'un code htlm ou css

je voudrais que lorsque que je passe ma souri sur un texte une image apparaisse

merci d'avance pour votre aide

bonne journée

Bonjour,

Un exemple pour essayer et modifier :
Pour la phrase : Vous connaissez le pére noël musicien ?
Les mots qui affichent l'image : pére noël
L'adresse url de l'image : http://ekladata.com/Si-tbxgRvThjklEjjAe3ekxPXXo
et un texte au dessus de l'image : Le vrai c'est moi

Le code HTML (avec une instruction Javascript) sera:

<p>Vous connaissez le <a onmouseover="Help.bubble(this,' Le vrai c\'est moi <br/><img src=\'http://ekladata.com/Si-tbxgRvThjklEjjAe3ekxPXXo\'></img>');">père noël</a> musicien ?</p>

Remarques:

• Entre les apostrophes ' internes au code javascript, il faut que chaque autre apostrophe soit précédée de \
• <br/> représente un saut de ligne
• JavaScript doit être activé sur le compte

merci beaucoup je v essayé

Hello Stormalo,

Je trouve ton script fort intéressant   alors je creuse un peu plus.

Apparemment tous les navigateurs (sauf I.E. évidemment) centrent l'image dans la bulle. Donc, pour pallier à ce détail, y aurait-il une possibilité d'inclure au coup par coup un complément de code dans les lignes concernées afin d'adapter la largeur de celle-ci sans être obligée de fixer celle de la div #help_bubble, seule solution que j'ai trouvée actuellement, n'y connaissant rien en codage javascript et n'ayant rien trouvé sur le web qui aurait pu répondre à mes interrogations.

Si tu avais une idée, ce dont je ne doute absolument pas, je serais preneuse !

Merci par avance.

Bonsoir Colette95,

En javascript je prend un code assez court, qui fonctionne, et j'essaye intuitivement  de modifier. Pas plus.
----------------------------

Taille de la bulle image:
J'ai trouvé un truc très simple pour ajuster la taille d'affichage d'une l'image hébergée sur ekladata.com . Il suffit de placer une écriture du type @100x100.jpg à la fin de l'url. (100x100 étant une  taille souhaitée, en pixels)

Exemple:

Dans mon commentaire précédent, l'image du Père Noël est une image perso de 180x200 hébergée sur ekladata.com :
    http://ekladata.com/Si-tbxgRvThjklEjjAe3ekxPXXo/perenoel2266rec.jpg

/perenoel2266rec.jpg n'est qu'une info facultative
   http://ekladata.com/Si-tbxgRvThjklEjjAe3ekxPXXo   s'affiche tout aussi bien sans cette info.

Un affichage de 100x111 sera ainsi obtenu par ajout de @100x111 et du suffixe .jpg
http://ekladata.com/Si-tbxgRvThjklEjjAe3ekxPXXo@100x111.jpg

nota: j'ai remarqué que le suffixe .jpg doit être indiqué, mais si ont écrit .png ou .gif ça fonctionne aussi

Pour un père noël 200x300 (donc avec proportions non respectées) ce sera :
http://ekladata.com/Si-tbxgRvThjklEjjAe3ekxPXXo@200x300.jpg


Curiosités:
Sur le forum et la fiche profil, l'url des images "pseudo" se terminent par @100x100.jpg.

Essaye cette manipulation :

1. Affiche l'image de ton pseudo, seule.
2. Supprime cet @100x100.jpg de fin d'url
3. Et relance l'affichage de l'image....pour mieux voir..Surprenant non ?

Bonjour Stormalo,

C'est très gentil d'avoir porté toute ton attention sur mes interrogations.

J'avais procédé exactement comme tu l'indiques dans ta réponse en appliquant une dimension en fin d'url des images.

Mais, comme je te l'indiquais les navigateurs n'interprètent pas de la même façon. Je te mets des capture d'écran.

Avec un texte sur lequel j'ai appliqué un retour à la ligne afin la Help_bubble ne soit pas trop large, voici, ce que j'obtiens respectivement avec IE, Google Chrome, Firefox et Opéra (sous IE l'image sort de la bulle)

Puis sans retour à la ligne pour le texte (IE en fait un)

Comme tu peux le constater IE fait le centrage par rapport au texte et non l'image comme les autres navigateurs. C'est pour cela que j'avais trouvé comme seule solution fixer une largeur à la bulle.

Bon, tout ceci n'est pas grave, je souhaitais simplement utiliser tes codes pour remplacer les miens (div infobulle avec span), sur des boutons cliquables, Entre temps, je me suis rendue compte que ce n'était pas possible avec help_bubble, mais cela m'a ouvert d'autres possibilités avec les miens que je n'avais pas exploitées jusqu'à maintenant. Comme quoi parfois de la discussion jaillit la lumière !

Encore un grand Merci pour ta disponibilité et tes réponses toujours très précises.

En te souhaitant un excellent WE.
Très cordialement.

@Colette95,

Bonjour

Je n'avais pas compris comme ça ta demande, d’où ma réponse sur le dimensionnement. Pour le centrage, mystère.

I.E. je l'utilise peu

> Un autre système d'info-bulle, uniquement par css, qui une fois mis en place ne nécessite plus d'aller dans le code source < >.

http://gerer-mon-blog.eklablog.fr/-a107359018

Je n'ai pas encore essayé de l'utiliser, mais ça me semble intéressant !.

Bon w.e. aussi.

@Stormalo

J'utilise IE car j'aime bien me prendre la tête  mais en contrôlant toujours les résultats avec les autres navigateurs, ce qui permet en fonction des différents affichages, s'il y a anomalie, de rectifier le tir pour uniformiser l'ensemble (notamment pour le placement d'éléments en position fixed ou absolute) !

Merci pour le lien, j'irai voir ce qu'il en est à mon retour....

Bonne continuation et à bientôt !

Bonjour,

merci stormalo, encore un truc nouveau d'appris : je prends note !

et voilà pourquoi les forums sont utiles et qu'il y a des aidants sur lesquels on peut compter : qu'est-ce que c'est bien !