Imàge-infobulle

Signaler
Messages postés
5
Date d'inscription
lundi 17 janvier 2005
Statut
Membre
Dernière intervention
17 mars 2005
-
Messages postés
732
Date d'inscription
jeudi 2 janvier 2003
Statut
Membre
Dernière intervention
29 octobre 2007
-
Bonne nuit tout le monde,

Je souhàiteràis créer des infobulles comportànt une imàge à là plàce du texte, est-ce possible et, si oui, pourriez-vous m'indiquer le script correspondànt ?
Merci d'àvànce et désolé pour mes "à" àvec àccent, petit soucis de clàvier...

Bonne ànnée à tou(te)s !

15 réponses

Messages postés
544
Date d'inscription
vendredi 5 décembre 2003
Statut
Membre
Dernière intervention
20 mai 2005
1
j'en ai fait une uvec image et texte qui date un peu :


http://perso.wanadoo.fr/michel.deboom/moncastel/
Messages postés
1250
Date d'inscription
mardi 15 juillet 2003
Statut
Membre
Dernière intervention
30 septembre 2007
1
salut,

tu peut faire un élément (div ou autre qui contient ton image) qui est caché au premier abord

mais qund tu fait un onmouseover sur un lien, cet élément s'affiche

Je te donne une idée, tu me donnes une idée, nous avons chacun deux idées.
Mon site Internet
Messages postés
544
Date d'inscription
vendredi 5 décembre 2003
Statut
Membre
Dernière intervention
20 mai 2005
1
ce que tui veux faire est simple :

et ton lien :

[blabla ton lien]
Messages postés
1250
Date d'inscription
mardi 15 juillet 2003
Statut
Membre
Dernière intervention
30 septembre 2007
1
oui mais ne pas oublier le onmouseout

donc comme ceci plutot :

[blabla onmouseover="document.getElementById('im1').style.visibility='visible'


onmouseout="document.getElementById('im1').style.visibility='hidden'
>ton lien]

Je te donne une idée, tu me donnes une idée, nous avons chacun deux idées.
Mon site Internet
Messages postés
544
Date d'inscription
vendredi 5 décembre 2003
Statut
Membre
Dernière intervention
20 mai 2005
1
Je répondais à ta 2ème question, je vois que tu as compris, mais tu n'as pas validé "réponse acceptée",je ne sais pas si ça te convient ?
Messages postés
5
Date d'inscription
lundi 17 janvier 2005
Statut
Membre
Dernière intervention
17 mars 2005

Merci à vous, màis j'ài bien peur de ne pàs trop vous suivre... les codes que vous m'indiquez sont-ils à insérer dàns "body" et rien dàns "heàd" ? et ne consistent-ils pàs à simplement remplàcer une imàge pàr une àutre àu survol de là souris ? (désolé, je ne suis pàs du tout un expert...)
Messages postés
1250
Date d'inscription
mardi 15 juillet 2003
Statut
Membre
Dernière intervention
30 septembre 2007
1
je ne peut pas valider cette réponse pour une simple et bonne raison

je n'ai pas fait ce post et je ne posais aucune question mais mon message est juste une

réponse à SYL20g qui est l'auteur de ce post. - lol

Je te donne une idée, tu me donnes une idée, nous avons chacun deux idées.
Mon site Internet
Messages postés
544
Date d'inscription
vendredi 5 décembre 2003
Statut
Membre
Dernière intervention
20 mai 2005
1
Autant pour moi

Excusez-moi, j'ai tout embrouillé, j'abandonne ici.
Messages postés
1250
Date d'inscription
mardi 15 juillet 2003
Statut
Membre
Dernière intervention
30 septembre 2007
1
oui tu doit bien insérer ce code dans le body

et effectivement ça peut servir à afficher une image au survol de la souris

mais ça sert dans ton cas à afficher du texte au passage de la souris, c'est aussi le principe de l'infobulle



tu créé une zone à un endroit précis, par exemple :


style="visibility:hidden" id="im1"
>et ici tu met ce que tu veut mettre dans l'infobulle

donc une image du texte etc....


et ensuite là tu met le texte qui appelera l'infobulle en affichant le div ci-dessus
[blabla onmouseover="window.document.getElementById('im1').style.visibility='visible';"


onmouseout="window.document.getElementById('im1').style.visibility='hidden'
;">ton lien]


voila j'espére que tu a compris


Je te donne une idée, tu me donnes une idée, nous avons chacun deux idées.
Mon site Internet
Messages postés
5
Date d'inscription
lundi 17 janvier 2005
Statut
Membre
Dernière intervention
17 mars 2005

Merci Tucsoufle (et pàs de soucis Chimelpremier, y'à pàs de blème).

çà màrche, j'ài mon infobulle-imàge qui àppàràît en hàut à gàuche de l'écràn ! Màintenànt, j'ài un petit problème, et une petite question.
Le problème, c'est que l'infobulle àppàràît derrière mon imàge-lien (j'ài essàyé de chànger là "visibility" màis çà ne donne rien...).
Et là question, c'est : connàîtriez-vous un moyen pour que l'infobulle àppàràisse à l'endroit ou se trouve le curseur de là souris ?...
Voilà, encore merci à vous et pàrdon d'àbuser de votre temps,
Messages postés
1250
Date d'inscription
mardi 15 juillet 2003
Statut
Membre
Dernière intervention
30 septembre 2007
1
pas de quoi,

tu utilise les css pour afficher a un endroit précis

et un script javascript pour détecter la position du curseur, je n'en connais pas mais bon

je suis qu'avec un peu de recherche tu trouve ça facilement ici même dans les sources.

en tapant par exemple "position curseur" tout simplement



bonne chance

Je te donne une idée, tu me donnes une idée, nous avons chacun deux idées.
Mon site Internet
Messages postés
732
Date d'inscription
jeudi 2 janvier 2003
Statut
Membre
Dernière intervention
29 octobre 2007

Bonjour
Voici ce que j'utilise pour connaitre la position de la souris (pas de moi, mais fonctionne très bien):

var x = 0;
var y = 0;

posX = 0;
posY = 0;


if (document.getElementById)
{
if(navigator.appName.substring(0,3).toLowerCase() == "net")
{
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = posSouris;
}


function posSouris(e)
{ x (navigator.appName.substring(0,3) "Net") ? e.pageX : event.x+document.body.scrollLeft; y (navigator.appName.substring(0,3) "Net") ? e.pageY : event.y+document.body.scrollTop;
}



Cordialement
Roro webDev
Messages postés
5
Date d'inscription
lundi 17 janvier 2005
Statut
Membre
Dernière intervention
17 mars 2005

Merci Roro :-) Le problème, c'est que je ne m'y connàis pàs àssez pour àssocier le coup du positionnement de souris àvec celui de l'infobulle... (suis un peu pénible, trouvez pàs ?...)
Messages postés
732
Date d'inscription
jeudi 2 janvier 2003
Statut
Membre
Dernière intervention
29 octobre 2007

Bonjour
Il faut rajouter dans la fonction posSouris() les lignes :
document.getElementById("im1").style.top=y;
document.getElementById("im1").style.left=x;
par contre, rajoutes
;position:absolute" id="im1"
>

Ton truc suivra tous les mouvements de la souris.

Cordialement
Roro webDev
Messages postés
732
Date d'inscription
jeudi 2 janvier 2003
Statut
Membre
Dernière intervention
29 octobre 2007

Bonjour
PS : Tu arrives à programmer avec une touche "a" HS ?
Cordialement
Roro webDev