INFO-BULLE PERSONNALISABLE COMPATIBLE FIREFOX ET IE

Commentaire de mobman02 le 10/08/2005 11:11:07

Oui effectivement tu as raison,
c'est une simple petite etourderi,
j'ai corriger mon zip, merci ;)

Commentaire de Zart le 15/08/2005 14:55:43

Je trouve cette source très cool...
Je la trouve même vraiment intéressante ! Je ne m'y connais pas trop en javascript. Mais c'est simple et efficace.
Moi je mets 10, je l'utilise pour mon projet, s'il y a du nouveau prévenez moi !

Commentaire de soleildoe le 22/08/2005 15:40:39

Salut! merci pour ce code , il m'a bien aidé, mais je voudrais savoir si au lieu d'afficher un texte que j'ai écris moi même, j'affiche un texte à partir d'un fichier texte !
@+

Commentaire de LiBe le 30/08/2005 19:39:19

...ah ça me revient... une div en contenu. Voilà la meilleure solution.

Commentaire de mobman02 le 13/09/2005 19:47:01

$variable = 'Mon texte';
$variable2 = 'Mon texte2';
echo "<th onmouseover=\"montre('<font color=blue>".$variable."</font>');\" onmouseout=\"cache();\"><font color=blue>".$variable2."</font></th>";

Voila, en gros suffit de laisser comme d'hab, mais d'echapper les double quotes par des \, sauf autour de variables, car la les doubles quotes servent juste de concaténation.
(c'est pas obligatoire de concaténé quand on utilise ", mais moi je prefere :p)

Commentaire de MarieMarie le 14/09/2005 17:14:43

Bonjour,
Je trouve ce script trés bien et j'en ai vraiment besoin, le précédent que j'utilisais ne marchait pas avec firefox, après mise en oeuvre cela marche trés bien avec firefox par contre avec IE il passe à la ligne dans l'info bulle après tous les mots.
Précisions :
- Si j'utilise la page html exemple tout va bien.
- Si je mets le code dans une de mes pages asp :  recopie du style, du script, et du div et recopie des exemples de la page info_bulle.html dans ma page, sur ces mêmes exemples qui marchaient bien dans la page originale,  il saute une ligne à tous les mots (avec IE, avec firefox tout va bien).
Quelque chose que j'ai du mal faire ?

Merci d'avance de votre aide,
Marie.

Commentaire de MarieMarie le 15/09/2005 14:57:29

Effectivement en rajoutant une largeur dans le CSS cela fonctionne bien (j'avais essayé avant de donner une largeur directement au div et cela ne marche pas).
C'est un peu dommage parce que quand ça marche sans fixer la largeur l'info bulle se met en page toute seule en fonction du texte de la largeur de la fenêtre ..., alors que là elle est fixe.
Je comprends toujours pas pourquoi cela fait ça dans mes pages, mais c'est une solution de contournement acceptable en attendant d'avoir trouvé mieux.

Merci encore pour ce script.

Commentaire de mobman02 le 21/09/2005 15:43:06

Tu est sur d'avoir bien remplie comme ceci la balise
onmouseover="montre('TON TEXTE');" ?

Est-ce que la page d'exemple fonctionne chez toi ?

Est-ce que tu peu montrer ta source pour que je puisse t'aider ?

Commentaire de metis15 le 09/11/2005 13:44:08

Vouai, c'est bien ce code !!!
Bon, ça marche un peu partout, Mac PC, sauf que sous IE 5.2 Mac, le pavé de texte est sans mimite de taille à droite et en bas...
Faut sans doute bidouiler le CSS, j'ai pas encore mis le nez dedans.

D'autre part, on peut pas mettre une image dans ce conteneur...?

Michel, toujours aussi nul en codage ! (;o)))))

Commentaire de metis15 le 09/11/2005 17:50:31

OK, merci pour ce tuyau !!!

En revanche, où je dois bidouiller pour que la bulle ne continue pas à l'infini en bas et à droite, sous IE 5.2 sur Mac ?

Commentaire de brex74 le 20/12/2005 21:08:10

Bonjour,
J'aimerais bien utiliser ton script malheureusement je n'arrive pas à régler le problème de Doctype. Quelqu'un a t il une solution ?

Si on peu pas mettre de doctype dans la page le code n'est plus vraiment exploitable pour un site valide XHTML par exemple...

Merci brex

Commentaire de mobman02 le 21/12/2005 01:29:34

AH ! J'ai peut etre trouvé !
http://forum.alsacreations.com/topic-5-8519-1-Rsolu-DOCTYPE-javascript-et-incompatibilite-Firefox.html
Mais il se fait tard, je m'occupe de modifier mon javascript demain ;)

Commentaire de brex74 le 21/12/2005 20:55:30

Ok merci beaucoup,
maintenant ton code est vraiment expoitable pour un site web complet.

Bonne continuation
Brex

Commentaire de mobman02 le 27/12/2005 14:43:09

Tu est sûr de toi ?
J'ai tester le script sous différentes version d'IE et j'ai jamais eu ce probleme :/

Commentaire de sylc88 le 13/01/2006 15:22:35

Bonjour je suis débutant, j'ai teste ce script et je souhaite dans l'infobulle y mettre une image quelle est la syntaxe exacte svp
j'ai essaye <img src="url de mon image"> mais avec les guillemets il me dit que y'a une erreur de script et lorsque j'enleve les guillemets je n'ai plus cette erreur par contre j'ai un carre blanc avec une croix rouge dedans et pourtant je suis absolument sur de mon url
Par avance merci!

Commentaire de FraGag le 14/01/2006 00:32:31

sylc88: Le problème avec les guillemets, c'est que ça termine la valeur de l'argument onmouseover, donc tu dois l'échapper : remplace " par &quot;. Ça donnera donc "<img src&quot;url de ton image&quot;>".

Commentaire de tsiaoping le 01/02/2006 03:20:20

Salut et bravo pour ce script, il y en  a peu qui marche comme le tien (on a essayer +sieurs !), le code est clair et les commentaires impec. confirmation que le &quot; marche tres bien pour les images (ce qui n'est pas evident). Cependant un petit probleme de retaille de browser sur Firefox: l'infobulle est s'eloigne de la souris plus on agrandit l'ecran (je travaille avec un grand ecran de haute resolution. Par contre sur IE aucun probleme. Quelqu'un a t il une idee pour regler ce probleme ??
Merci d'avance.
Tsiao Ping

Commentaire de brex74 le 05/02/2006 21:08:49

Je peu vous donner un semblant de solution.... qui relève plutôt de la bidouille qu'autre chose.
dans le style de la div infobulle vous rajouter un margin-left.
Rien de bien folichon me direz vous mais mettez en deux à la suite comme ceci :

margin-left: 10px !important;
margin-left: 20px;

Sous Firefox l'infobulle aura un décalage de 10px et sous IE le décallage sera de 20px;
Explication:
L'attribut !important permet de forcer une valeur mais elle n'est pas interprétée par IE qui prend en compte la dernière valeur donnée pour la propriété.

Cette astuce vous permet pour n'importe quel élément positionné en CSS de préciser une valeur différente pour IE et firefox. Personelement je l'utilise beaucoup !

A + Brex

Commentaire de ennery le 03/03/2006 02:19:42

super script qui m'est bien utile. merci et bravo

Commentaire de TeDeum le 25/03/2006 10:42:53

Salut,

Déjà très bonne source. Toutes mes félicitations !!!
Une amélioration est pourtant nécessaire. En effet la plupart des navigateurs utilisent leur mode standard si le document utilise un doctype XHTML ou HTML 4. Ces mêmes navigateurs utilisent leur mode de compatibilité (mode quirk) en l'absence de doctype XHTML ou HTML4 ou en présence d'un doctype HTML 4 transitional incomplet (sans le lien vers le fichier dtd). Dans ce cas on peut avoir la valeur document.body.scrollTop toujours à 0 (Donc le hack IE pour le scroll ne fonctionne plus :-P) et c'est la valeur document.documentElement.scrollTop qu'il faut utiliser.

Je te propose donc de modifier ta source comme suit pour tenir compte du mode quirck d'IE :
Version originale :
...
    else {
    GetId("curseur").style.left=window.event.x + 5+"px";
    GetId("curseur").style.top=window.event.y + 10 + document.body.scrollTop+"px"; // Sous IE, voici un petit hack pour que lors du scroll la position reste bonne !
    }
...
Version proposée :
    else {
    if(document.documentElement.clientWidth>0) {
        GetId("curseur").style.left=20+event.x+document.documentElement.scrollLeft+"px";
        GetId("curseur").style.top=10+event.y+document.documentElement.scrollTop+"px";
    }
    else {
        GetId("curseur").style.left=20+event.x+document.body.scrollLeft+"px";
        GetId("curseur").style.top=10+event.y+document.body.scrollTop+"px";
    }
    }

Voilà, j'espère que ca pourra aider à améliorer cette source très sympa !

Commentaire de sofybj le 01/04/2006 14:41:58

Bonjour,
Moi je voudrais mettre un bon morceau de texte. Mais quand je fais un copier coller de mon texte j'ai une erreur !!
Merci ...

Commentaire de Caldera le 12/04/2006 18:36:05

slt merci en tout cas à ce script, c'est exactment ce que je recherchais mais j'ai un problème depuis que j'ai rajoute un attribut dans un <area /> :

<area shape="rect" coords="423,79,533,150" OnMouseOver="montre('message de test');" OnMouseOut="cache();" href="index.php?p=zone&amp;sect=EURNAFR" />

depuis le href je n'obtiens plsu au passage de la souris l'info bulle !
et n'tant pas un pro du js je ne vois pas d'ou cela provient !
merci encore

Commentaire de heekle le 24/04/2006 11:53:08

Bonjour,
J'ai un léger problème UNIQUMENT sous IE lorsque on utilise ce source avec plusieurs shapes sur une image cliquable. Admettons deux zones distincte A et B, une en haut (A) de l'image, l'autre en bas (B). Lorsque que l'on amene la souris sur la zone A, pas de probleme l'infobulle correspondant à A s'affiche correctement, par contre si on descend pour mettre le curseur sur la zone B en bas, l'infobulle correspondant à B va s'afficher quelques dizièmes de seconde à l'endroit ou elle s'était affichée précédemment pour la partie A, avant de se mettre au bon endroit (partie B). L'inverse est vrai si on commence par B.
Je ne sais pas si j'ai été assez clair ?
Si quelqu'un avait une idée !

Commentaire de heekle le 24/04/2006 12:22:40

Yop effectivement ça marche maintenant :)
Mais l'effet de la page qui s'agrandit quand on approche des bords, est maintenant bien présente :(

Arf .... faudrait trouver un compromis entre les deux :-/

En tout cas merci !

Commentaire de elisacarli le 15/05/2006 15:02:12

Merci mille fois !!!
Je savais bien que je finirais par trouver exactement ce qu'il me fallait !!
Vous êtes trop forts !!!

Merci
Elisa

Commentaire de La Guite le 20/06/2006 11:06:29

Bonjour, je trouve ce code tres bien fais, simple et clair (parfait pour débuter).

Juste un petit problème pour moi, j'ai esseyer le coder d'exemple, sa marche nickel.
Par contre je l'ai incorporé dans ma page html (qui utilise aussi du php) et la je remarque que la bulle s'affiche correctement mais ne disparais pas quand ma souris n'est plus sur le lien (resp. le texte).

J'ai testé sur IE et FireFox c'est le même resultat.

Quelqu'un aurait une idée ?

Commentaire de La Guite le 23/06/2006 10:55:48

Merci de répondre c'est sympa.

Alors non je n'ai pas oublier le onmouseout="cache()"

Pour t'expliquer encore mieux je te montre la page qui bug

http://www.laguite.com/index.php?page=projets

Tu peux remarquer que la bulle ne s'enva plus si tu passe au dessus de "synthèse d'images"

PS: tu peux voir les sources de la page si t'as firefox grâce à Ctrl+U (même si je suis sur que tu le sais déjà)

Commentaire de La Guite le 24/06/2006 09:35:21

Méacoulpa...

Je suis vraiment tête en l'air.
Dire que j'avais cherche en plus si j'avais pas une fonction qui portait le même nom....

(ok, on peut me jeter des cailloux)

Merci FraGag

Commentaire de adressprov le 27/06/2006 11:23:18

Je viens de l'insérer dans mes balises php et là plus de problème.
Vraiment désolé, j'aurais du tester ça avant de poster.
Merci pour ce code qui fonctionne à la perfection.

Commentaire de mobman02 le 29/07/2006 22:36:06

Hum pas mal,
mais il en manque une ;)

Il y a actuellement 4 propriété CSS pour faire varier une opacité :

opacity: 0.5;
Le technique officielle du W3C, elle ne fonctionne que sous Mozilla Firefox.
-moz-opacity: 0.5;
Celle ci fonctionne sur les anciennes versions de Mozilla et Phoenix/FireBird/FireFox.
-khtml-opacity: 0.5;
Celle ci est la méthode des navigateur utilisant le moteur KHTML (Konquerer sous Linux et Safari sur MacOS).
filter: alpha(opacity=50);
Et pour finir, la méthode a utiliser sur MSIE (elle ne marche QUE chez lui).

Et il ne faut pas oublier un bug de IE, si l'élément que vous voulez faire varier n'a pas de width défini, l'opacité ne chagera pas ! :D muahaha ^^

Commentaire de chenar le 13/02/2007 13:13:19

Salut, j'ai bien galeré pour trouver un code pas trop compliqué à utiliser et même si le tien c'est vrai est plutôt simple ya un hic quelque part, et ça vient trés certainement de moi lol. Je vous montre mon code, je passe par une page asp et dans une autre htm je fais juste un appel avec un  <%showToolTip 1%> qui me renvoie ça si je demande le code source une fois la page chargée :
<div id="curseur" class="infobulle"/>
<img onmouseout="cache()" onmouseover="montre(Test1ceci est un test);" src="images/icon_ToolTip_Help.gif"/>

<link href="tooltip.css" rel="stylesheet" media="screen">
<script language="javascript" type="text/javascript">
<!--
function GetId(id)
{
return document.getElementById(id);
}
var i=false; // La variable i nous dit si la bulle est visible ou non

function move(e) {
  if(i) {  // Si la bulle est visible, on calcul en temps reel sa position ideale
    if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE
    GetId("curseur").style.left=e.pageX + 5+"px";
    GetId("curseur").style.top=e.pageY + 10+"px";
    }
    else { // Modif proposé par TeDeum, merci à lui
    if(document.documentElement.clientWidth>0) {
        GetId("curseur").style.left=20+event.x+document.documentElement.scrollLeft+"px";
        GetId("curseur").style.top=10+event.y+document.documentElement.scrollTop+"px";
    }
    else {
        GetId("curseur").style.left=20+event.x+document.body.scrollLeft+"px";
        GetId("curseur").style.top=10+event.y+document.body.scrollTop+"px";
    }
    }
  }
}

function montre(text) {
  if(i==false) {
  GetId("curseur").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securité) on le rend visible.
  GetId("curseur").innerHTML = text; // Cette fonction est a améliorer, il parait qu'elle n'est pas valide (mais elle marche)
  i=true;
  }
}
function cache() {
if(i==true) {
GetId("curseur").style.visibility="hidden"; // Si la bulle etais visible on la cache
i=false;
}
}
document.onmousemove=move; // des que la souris bouge, on appelle la fonction move pour mettre a jour la position de la bulle.
//-->
</script>


<%
class clToolTipType
public IconFileName
public IconColor
End Class

'Declare 3 ToolTipsType
Dim oToolTipType(2)

'Define Icon Help Properties
set oToolTipType(0) = new clToolTipType
oToolTipType(0).IconFileName = "images/icon_ToolTip_Help.gif"
oToolTipType(0).IconColor = "#FFFFFF"

'Define Icon Info Properties
set oToolTipType(1) = new clToolTipType
oToolTipType(1).IconFileName = "images/icon_ToolTip_Info.gif"
oToolTipType(1).IconColor = "#FFFFFF"

'Define Icon Warnning Properties
set oToolTipType(2) = new clToolTipType
oToolTipType(2).IconFileName = "images/icon_ToolTip_Warnning.gif"
oToolTipType(2).IconColor = "#FFFFFF"

Sub ShowToolTip (eId)
if trim(eId)="" then exit sub

dim oRecordSet : set oRecordSet = new clRecordSet
if not oRecordSet.ExecuteQuerySQL("select * from ToolTips where id="&eId) then
set oRecordSet = nothing
exit sub
end if

  response.write "<div id='curseur' class='infobulle'></div>"
response.write "<img src='"&oToolTipType(oRecordSet.gRs("cType")).IconFileName&_
"'onmouseover = \'montre("&_
(oRecordSet.gRs("cTitle"))&(oRecordSet.gRs("cDescription"))&_
");\' onmouseout=\'cache()\'>"

oRecordSet.CloseQuery()
set oRecordSet = nothing

End Sub
%>

Commentaire de elisacarli le 29/03/2007 10:07:03

Je pense qu'il ne faut pas que tu aille à la ligne à chaque <tr> ou <td>. J'ai essayé comme ça et ça fonctionne.

<p onmouseover="montre('<table border=\'1\' class=\'diapo\' cellpadding=\'0\' cellspacing=\'0\'><tr><td rowspan=\'3\' width=\'45px\' align=\'right\' class=\'diapoG\'>toto</td><td height=\'18px\' width=\'159px\' align=\'center\' valign=\'top\' class=\'haut\'>tata</td><td rowspan=\'3\' width=\'45px\' align=\'left\' class=\'diapoD\'>titi</td></tr><tr><td valign=\'baseline\'>sdfsdfsdfssds sdfsdf sdf</td></tr><tr><td height=\'18px\' width=\'159px\' align=\'center\' valign=\'bottom\' class=\'haut\'>coucou</td></tr></table>');" onmouseout="cache();">Un paragraphe avec une info bulle !</p>

Commentaire de Emmanuel007 le 25/04/2007 10:43:05

Bonjour,
J'avais fait des infobulles en CSS classiques avec SPAN mais mon client me dit que ça ne marche pas correctement sur son Mac : les info bulles sont masquées lorsqu'on descend dans la page selon lui. Mais comme je n'ai pas de Mac et que les outils de screenshot Safari ne montrent pas les infobulles, je suis bien incapable de m'assurer de la compatibilité d'autres scripts.

Je viens de mettre en oeuvre la solution de Mobman02. Ca marche super sur IE 64 et Firefox chez moi :)

Mais quelqu'un a t-il testé si ça fonctionnait sous Safari ?

Commentaire de mobman02 le 08/05/2007 22:25:23

Salut,
par défaut la bulle n'est pas translucide, elle est bien opaque (on ne voit pas à travers).
Si tu veut la rendre translucide ajoute ces 4 lignes dans le CSS de la bulle :
opacity: 0.5;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
filter: alpha(opacity=50);

Et pour ce qui est de ton autre problème essaye de mettre un :
z-index:1000;
dans le CSS de la bulle toujours.

Commentaire de ScuZy45 le 03/06/2007 16:25:36

GG pour ce magnifique code, c'est vraiment la meilleur infobulle personnalisable que j'ai vu pour le moment!!

Petit probleme : la ligne z-index:1000; ne résout pas le faite que l'infobulle passe au-dessous du flash :s

Help me mobman! Je sais que sa doit être une petite ligne mais laquelle, tel est la question ;)