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 ;)

Commentaire de ScuZy45 le 03/06/2007 17:47:42

ça marche!

Merci mec sa fait vraiment plaisir de pouvoir compter sur des personnes qualifié dans ce domaine!!

PS : Escuse moi d'avoir accusé l'infobulle sans preuve...

Commentaire de nfabry le 04/06/2007 11:45:48

Quelque chose m'étonne :
personne n'a eu de problèmes avec des balises <DIV> ou <SELECT> ?
avec mes div, la position se réinitialise à zéro dès que la souris passe dessus (uniquement sous IE).
Conséquence : l'infobulle s'affiche au mauvais endroit (bcp trop haut).
J'ai corrigé ce problème en remplacant :
[CODE]
    else { // mode quirck d'IE
       if(document.documentElement.clientWidth>0) {
         document.getElementById("curseur").style.left=10+event.<b>x</b>+document.documentElement.scrollLeft+"px";
         document.getElementById("curseur").style.top=10+event.<b>y</b>+document.documentElement.scrollTop+"px";
       }
       else {
         document.getElementById("curseur").style.left=10+event.<b>x</b>+document.body.scrollLeft+"px";
         document.getElementById("curseur").style.top=10+event.<b>y</b>+document.body.scrollTop+"px";
       }
    }
[/CODE]
par :
[CODE]
    else { // mode quirck d'IE
       if(document.documentElement.clientWidth>0) {
         document.getElementById("curseur").style.left=10+event.clientX+document.documentElement.scrollLeft+"px";
         document.getElementById("curseur").style.top=10+event.clientY+document.documentElement.scrollTop+"px";
       }
       else {
         document.getElementById("curseur").style.left=10+event.clientX+document.body.scrollLeft+"px";
         document.getElementById("curseur").style.top=10+event.clientY+document.body.scrollTop+"px";
       }
    }
[/CODE]

Et en ce qui concerne les balises <SELECT>, l'infobulle passe en dessous de celles-ci. Même un z-index n'y change rien.
Et ça par contre, j'ai pas réussi à résoudre.

Donc si qqn a une solution (ou même une idée), merci d'avance !

Commentaire de mobman02 le 04/06/2007 11:55:53

Quelle version de IE ?
Je n'ai jamais eu ce problème en tout cas.
Je me renseignerais sur la syntaxe exacte de event.y (ou event.clientY).

Sinon pour la balise <select> c'est un bug d'IE, les boite de selections sont toujours par dessus la page :/
Il existe des hacks il me semble, a toi de voir ;)

Commentaire de FraGag le 10/06/2007 08:01:10

Le truc pour afficher quelque chose par-dessus un <SELECT>, c'est de mettre ce quelque chose dans un <IFRAME>... c'est laid mais c'est la seule solution.

Commentaire de zeguizmo le 30/01/2008 13:44:00

Bien vu Nfabry,

J'ai précisément le meme probleme que toi, sur la version 6 et 7 d'IE, la bulle se mange -300px en hauteur comme en largeur et s'affiche par conséquent à un endroit plus qu'étrange. Aucun souci sur FireFox.

Ta solution fixe bien le pb.

Merci a vous,

ZeGuizmo

Commentaire de mobman02 le 02/03/2008 21:40:05

Salut,
le problème ne vient pas du script d'infobulle mais de ton PHP,
comme construit tu la variable $bulle ? Un echo $bulle; donne quoi ?

Commentaire de changkoukaii le 13/03/2008 10:57:55

Salut,
bon script,
seul souci, quand l'event est placé tout a droite de la page, l'infobulle apparait a droite de la souris,
le div est donc caché (un scrollbar apparait)

Si quelqu'un a une solution, je sèche ^_^

Commentaire de brice_17 le 10/05/2008 14:26:23

Bonjour à toutes et à tous,
Ce script est super bien :p
Mais je souhaiterai mettre une image dans l'info bulle... j'ai fait ca :

<p onmouseover="montre('<img src="images/batiment1.png" alt="" />');" onmouseout="cache();">Un paragraphe avec une info bulle!</p>

Mais ca ne fonctionne pas... j'ai du faire une erreur (logique...)

Voici le résultat : ');" onmouseout="cache();">Un paragraphe avec une info bulle !

Qu'est ce qui ne fonctionne pas ?

Merci pour vos éventuelles réponces :)

Commentaire de heihei69 le 17/06/2008 17:31:28

j'ai un problème avec ce code: j'ai de nombreux numéro sur lesquels j'ai positionner des liens mais également des infos-bulles. Quand je passe sur un numéro l'info bulle s'affiche mais si un autre numéro est au niveau de celle-ci il vient se positionner dessus occultant une partie des informations...
Avez-vous une idée?

Commentaire de tofee le 10/12/2008 15:31:52

Bonjour

D'abord, bravo pour ce script, juste ce qu'il me faut et hyper facile à installer.
9/10 parce que ...

Petit souci pour faire fonctionner ce script :
- J'ai téléchargé et installé le tout
- mon code se présente ainsi
<code>
<div id="page">

<div id="entete">
le bandeau
</div><!--fin entete-->

<div id="carte" > (à gauche)
image de la carte
+ map avec liens
</div>

autre div à droite

</div>
</code>

Si je mets le div "curseur" juste avant le div "carte" -> ok pour FF mais infobulle décalée en haut et à droite sous IE7 comme le décrit Zeguizmo le 31/01.

Si je mets ce div "curseur" juste après le div "carte" -> ok pour IE7 mais problème inverse avec FF

Et je ne m'en sors pas.

Pour voir le souci, c'est ici :
http://localhost/Manas/

Une idée, une piste ?

PS: aucune connaissance en js, je copie-colle, c'est tout.

Commentaire de alex3105 le 15/01/2009 19:49:33

salut mobman02

ton code est genial

j'ai fais qq modif (pour un min de mise en place et un max d'efficacité)
maintenant il est fin pret , merci :

exp de mise en place : hyper simple (meme pas d'utiliser onmouseout...)

<html>
...
<script> langage="javascript" src=bull.js></script> // tout est dans bull.js..
<p onmouseover=montre('Hello my world')> Bonjour mon monde </p>

et c tout !!

je poste la nouvelle version !!

Commentaire de mobman02 le 30/01/2009 18:23:51

Le script est parfaitement indépendant du serveur vu qu'il est interprété par le client (c'est le principe du Javascript).

Je pense plutôt à une erreur de mise en production, comme un chemin vers le Javascript mal défini ou ce genre de chose.

Commentaire de profdestynova le 18/02/2009 02:06:34

Hello

Merci mobman02 pour ce petit script de rien du tout qui m'a fait gagner pas mal de temps, en effet : ]
Ca m'a permis de me dépêtrer de lourdeurs superflues dans le code d'une appli web que je refonds.
Voici un exemple de ce qu'on peut faire avec ton script (liens au bas du formulaire en page d'accueil).
Notez que la position de différents éléments merde sous IE mais j'ai la chance de pouvoir me passer de la compatibilité IE sur ce projet:
http://www.zalemlabs.com/exemples/exemple.html


Infobarquee, j'ai testé ton code en virant les appels BDD et avec une autre image et ça fonctionne bien hormis que la propriété z-index: 300 que tu colles sur le div en absolute contenant l'image où le passage de la souris doit afficher ton tooltip, masque le tooltip. Il te suffit de coller une propriété z-index supérieure, à la définition CSS .infobulle ex
z-index: 301;

Maintenant je ne sais pas quelle place prend taille.jpg chez toi mais vu la taille de son conteneur, elle doit pas être énorme, ce qui m'interroge sur l'effet de masquage que je décris :-k
D'ailleurs au passage, tu peux virer le div conteneur de ton image en appliquant les styles à la balise IMG ou mieux, en définissant une classe forçant le passage de ces images en blocs positionnés en absolu. Ex :

<img class="bidon" style=\"top:".$y."px; left:".$x."px;\" src=\"point.jpg\" onmouseover=\"montre('<b>$date<br/>$title : $cp<br/>$description</b> ','white',event)\" onmouseout=\"cache()\" />

avec
img.bidon {
  display: block;
  position: absolute;
  z-index: 300;
}

hmm ah oui aussi
Je ne comprends pas bien pourquoi tu ajoutes deux paramètres à l'appel de la fonction montre() dans le onmouseover de ton image, ça semble ne correspondre à rien dans ton code.