1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML

Pb avec un script info bulle [Résolu]

Signaler
Messages postés
34
Date d'inscription
lundi 21 août 2006
Statut
Membre
Dernière intervention
4 novembre 2008
 -
Messages postés
34
Date d'inscription
lundi 21 août 2006
Statut
Membre
Dernière intervention
4 novembre 2008
 -
Bonjour,

J'ai mis en place un script infos bulle (téléchargé sur http://www.toutjavascript.com/main/index.php3), ca marche nickel (texte ou image).

Je l'utilise dans un frame et défois l'info bulle apparait à moitié caché...

Donc ma question :

Est il possible de placer l'infos bulle centré juste sous la souris?

merci d'avance

David

-----------------------------------------------------
mon code :

<HTML>

<HEAD>

<TITLE>Tout JavaScript.com - Info Bulle DHTML</TITLE>

<SCRIPT LANGUAGE= "JavaScript" type="text/javascript">

//D'autres scripts sur http://www.toutjavascript.com

//Si vous utilisez ce script, merci de m'avertir ! < webmaster@toutjavascript.com >

//Auteur original :Olivier Hondermarck <webmaster@toutjavascript.com>

//Modifs compatibilité Netscape 6/Mozilla : Cédric Lamalle 09/2001 <cedric@cpac.embrapa.br>

//Correction Mac IE5 (Merci Fred)

var IB=new Object;

var posX=0;posY=0;

var xOffset=10;yOffset=10;

function AffBulle(texte) {

contenu="<TABLE border=0 cellpadding=2 cellspacing=0 bgcolor='"+IB.ColFond+"'>----, "+texte+"</TD>
</TD></TR></TABLE>&nbsp;";

var finalPosX=posX-xOffset;

if (finalPosX<0) finalPosX=0;

if (document.layers) {

document.layers["bulle"].document.write(contenu);

document.layers["bulle"].document.close();

document.layers["bulle"].top=posY+yOffset;

document.layers["bulle"].left=finalPosX;

document.layers["bulle"].visibility="show";}

if (document.all) {

//var f=window.event;

//doc=document.body.scrollTop;

bulle.innerHTML=contenu;

document.all["bulle"].style.top=posY+yOffset;

document.all["bulle"].style.left=finalPosX;//f.x-xOffset;

document.all["bulle"].style.visibility="visible";

}

//modif CL 09/2001 - NS6 : celui-ci ne supporte plus document.layers mais document.getElementById

else if (document.getElementById) {

document.getElementById("bulle").innerHTML=contenu;

document.getElementById("bulle").style.top=posY+yOffset;

document.getElementById("bulle").style.left=finalPosX;

document.getElementById("bulle").style.visibility="visible";

}

}

function getMousePos(e) {

if (document.all) {

posX=event.x+document.body.scrollLeft; //modifs CL 09/2001 - IE : regrouper l'évènement

posY=event.y+document.body.scrollTop;

}

else {

posX=e.pageX; //modifs CL 09/2001 - NS6 : celui-ci ne supporte pas e.x et e.y

posY=e.pageY;

}

}

function HideBulle() {

if (document.layers) {document.layers["bulle"].visibility="hide";}

if (document.all) {document.all["bulle"].style.visibility="hidden";}

else if (document.getElementById){document.getElementById("bulle").style.visibility="hidden";}

}

function InitBulle(ColTexte,ColFond,ColContour,NbPixel,PosLeft,PosTop) {

IB.ColTexte=ColTexte;IB.ColFond=ColFond;IB.ColContour=ColContour;IB.NbPixel=NbPixel;

if (document.layers) {

window.captureEvents(Event.MOUSEMOVE);window.onMouseMove=getMousePos;

document.write("<LAYER name='bulle' top='"+PosTop+"' left='"+PosLeft+"' visibility='hide'></LAYER>");

}

if (document.all) {

document.write("

");

}

//modif CL 09/2001 - NS6 : celui-ci ne supporte plus document.layers mais document.getElementById

else if (document.getElementById) {

document.write("

");

}

}

</SCRIPT>

</HEAD>

<CENTER> Script pour afficher des infos bulle personnalisées. </CENTER>

Les infos bulle se présentent sous la forme de cadre, dont les couleurs de texte, de fond, de contour ainsi que l'épaisseur du contour sont paramétrables.

Les infos bulle apparaissent à l'endroit du curseur de souris et peuvent contenir tous les éléments HTML classiques (image, tableaux, ...). Elles disparaissent dès que la souris quitte le lien.

Ce script d'infobulle est compatible Internet Explorer 4+ et Netscape 4+

<!-- appel à l'initialisation des infos bulles (laisser dans le BODY) -->

<SCRIPT language ="JavaScript">InitBulle("navy","#FFCC66","orange",1,0,0);

// InitBulle(couleur de texte, couleur de fond, couleur de contour taille contour)

</SCRIPT>

<!-- Déclaration des liens avec les fonctions d'affichage des infos bulle : simple non ? -->

<!-- REM : pour afficher une apostrophe ', écrivez \', idem avec les " -->

[# Premier Lien ----------------------------------------------------]

[# Deuxieme Lien]

[# Autre Lien]

<CENTER>


</CENTER>

<SMALL>Les liens sont inactifs (sauf le lien vers le site ToutJavaScript.com)

</HTML>

<!-- Script développé par Olivier Hondermarck webmaster@toutjavascript.com -->

<!-- D'autres scripts et des conseils sur http://www.toutjavascript.com -->
Afficher la suite

11 réponses

Réponse 1 / 11
Messages postés
34
Date d'inscription
lundi 21 août 2006
Statut
Membre
Dernière intervention
4 novembre 2008
en effet probleme de syntaxe!
J'ai réussi avec persévérance, et un peu de chance aussi

donc la syntaxe correcte :

Voila, merci à tout ce qui m'ont aidé!!!

A+

David
Réponse 2 / 11
Messages postés
626
Date d'inscription
samedi 28 septembre 2002
Statut
Membre
Dernière intervention
18 mai 2009
 3
Mon dieu, mais de quand il date ce script ??? bref...

Essai de remplacer la ligne suivant :

var finalPosX=posX-xOffset;

par

var finalPosX=posX-(document.getElementById('bulle').offsetWidth/2);
Réponse 3 / 11
Messages postés
34
Date d'inscription
lundi 21 août 2006
Statut
Membre
Dernière intervention
4 novembre 2008
bonjour,

merci pour ta réponse.

J'ai apporté la modification, mais ca n'a pas résolu mon problème...

pour etre plus clair dans ma demande, je vais vous donner l'adresse du site :

www.glossaire.o-n.fr      (login : prod, pass: prod)
En cliquant sur la lettre "B" vous accéder à une page de ce glossaire.
Et là j'ai placer des infos bulles sur des mots importants, soit des définitions, soit une image.
Le problème avec les images, c'est que suivant la position de la souris, l'image n'apparait pas en entier...

Ce que je voudrais, c'est que quelque soit la position de ma souris, j'aimerai que l'image soit placé au milieu de mon frame.

Voila, j'espere avoir été plus clair que la première fois, en espérant que quelqu'un pourra m'aider.

Merci en tout cas pour ton aide XtremDuke. 

David

ps : apparement le script que j'ai utilisé est super vieux... et obsolète... si qqn à un code plus récent et plus fonctionnel, je suis preneur...
Réponse 4 / 11
Messages postés
34
Date d'inscription
lundi 21 août 2006
Statut
Membre
Dernière intervention
4 novembre 2008
oh con les fotes
Réponse 5 / 11
Messages postés
34
Date d'inscription
lundi 21 août 2006
Statut
Membre
Dernière intervention
4 novembre 2008
euh...
il y a malentendu... lol
c'est pas moi qui ai posté le message précédent...
qqn a du profiter de ma pause café pour utiliser mon pc...

désolé
Réponse 6 / 11
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
 14
Bonjour,
pein d'excellentes sources sur ce site ou d'autre d'ailleur, une petite recherche avec INFO BULLE comme mot clé et a mon avis bingo
sinon il y à
 36300 INFO BULLE TOUJOURS VISIBLE
ou encore
 =38238 INFO BULLE COMPATIBLE SELECT ET DOCTYPE
je sais c'est de moi mais Bon



;0)
Réponse 7 / 11
Messages postés
34
Date d'inscription
lundi 21 août 2006
Statut
Membre
Dernière intervention
4 novembre 2008
bonjour,
merci pour l'infos.
J'ai utilisé le script "info bulle toujours visible"
www.glossaire.o-n.fr
en bas, cliquer sur le "T"
Dans cette page, j'ai insérer des infos bulles, mais elles "sortent" du frame.
Comment faire pour redimensionner automatiquement les infos bulles?

d'avance merci.

David
Réponse 8 / 11
Messages postés
34
Date d'inscription
lundi 21 août 2006
Statut
Membre
Dernière intervention
4 novembre 2008
bon j'y suis arrivé, en insérant une balise
pour revenir à la ligne... je sais pas si c'est la bonne méthode, mais apparement ca marche...

Maintenant je bloque sur l'insertion d'une photo dans la bulle.

je voudrais modifier cette ligne :
onmouseover="return(BulleWrite('
Ca c\'est du TITRE...'));"

en lui spécifiant que l'image se trouve dans    \images\contrat.jpg

et je n'arrive pas à trouver la bonne syntaxe...
Si quelqu'un peut m'aider...

A+ et merci

David
Réponse 9 / 11
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
 14
Bonjour,

j'arrive apparament trop tard, il semblerait que cela marche ...



;0)
Réponse 10 / 11
Messages postés
34
Date d'inscription
lundi 21 août 2006
Statut
Membre
Dernière intervention
4 novembre 2008
alors ca marche pas tout à fait pour les photos...
si la photo se trouve à la racine du site, ca fonctionne, mais si je la place dans le dossier \images\ je sais pas quelle syntaxe mettre...
Si qqn pouvait m'aider, ca m'arrangerait pour finir... 
Réponse 11 / 11
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
 14
Bonjour,
problème de syntaxe peut être
/image.jpg"> 


;0)
Répondre Posez votre question