INFO-BULLE PERSONNALISABLE COMPATIBLE FIREFOX ET IE
cs_FraGag
Messages postés
81
Date d'inscription
jeudi 19 février 2004
Statut
Membre
Dernière intervention
18 avril 2008
-
10 août 2005 à 05:49
bdebou Messages postés 1 Date d'inscription lundi 26 avril 2010 Statut Membre Dernière intervention 9 novembre 2011 - 9 nov. 2011 à 15:07
bdebou Messages postés 1 Date d'inscription lundi 26 avril 2010 Statut Membre Dernière intervention 9 novembre 2011 - 9 nov. 2011 à 15:07
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/33164-info-bulle-personnalisable-compatible-firefox-et-ie
https://codes-sources.commentcamarche.net/source/33164-info-bulle-personnalisable-compatible-firefox-et-ie
9 nov. 2011 à 15:07
J'ai trouvé votre code et l'utilise. Il est vraiment parfait. Rien à dire Sauf...
Et oui mais ca n'a peut-etre rien a voir, mais il est impossible de faire afficher l'info bulle sur un button quand il est "disabled".
Exemple :
Press
Quelqu'un aurait une idée?
J'ai fait le test, si on supprime 'disabled="disabled"', tout fonctionne.
Merci d'avance pour votre aide.
9 oct. 2009 à 14:37
11 juin 2009 à 13:29
18 févr. 2009 à 02:06
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 :
$date
$title : $cp
$description ','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.
30 janv. 2009 à 19:09
voici le code php de ma page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<title>Observation en temps reel</title>
<head>
<style type= "text/css">
.infobulle{
position: absolute;
visibility : hidden;
border: 1px solid Black;
padding: 10px;
font-family: Verdana, Arial;
font-size: 10px;
background-color: #FFFFCC;
}
</style>
<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>
</head>
[../ Retour aux observations]
[../writesingle.php Ajouter une observation]
[../inscription.php Pas encore inscrit?]
<?php
$datej =date("d-m-y");
$heure=date("h");
$min=date("i");
echo"
Date : ".$datej."
Heure : ".$heure."h".$min."
";
//header('Content-type: image/png');
$point=imagecreatefrompng("point.png");
$carte=imagecreatefrompng("france.png");
$minlong = -5.1;
$maxlong = 8.2;
$minlat = 42.4;
$maxlat = 51.1;
$largeur = 640;
$hauteur = 640;
//Taille des marges, nécessaire pour que les noms de ville ne soient pas coupés par les bords.
$margex = 20; //px
$margey = 20; //px
$link = mysql_connect("localhost","root","") or die('Connexion impossible.');
mysql_select_db("rsseditor") or die (mysql_error());
$result mysql_query('SELECT * FROM rsseditor_news WHERE valide 1 order by date asc') or die ('Erreur : '.mysql_error() );
while ($arr = mysql_fetch_array($result))
{
//Converti lat/long en position sur l'image
$x = $margex + ($arr['longitude'] - $minlong) / ($maxlong - $minlong) * ($largeur - $margex * 2);
$y = $margey + (1-($arr['latitude'] - $minlat) / ($maxlat - $minlat)) * ($hauteur - $margey * 2);
$description = addslashes($arr['description']);
$title = addslashes($arr['title']);
$cp = addslashes($arr['cp']);
$date= addslashes($arr['date']);
echo "
$date
$title : $cp
$description ','white',event)" onmouseout="cache()">
" ;
}
mysql_close();
?>
</html>
30 janv. 2009 à 18:23
Je pense plutôt à une erreur de mise en production, comme un chemin vers le Javascript mal défini ou ce genre de chose.
30 janv. 2009 à 18:20
je l'ai integre sur mon site en local et ca fonctionne impec avec IE et FF.
par contre comme avec d'autres scripts infobulle, j'ai un gros pb.
l'infobulle ne s'affiche pas du tout ou est masquee.
le server est sous unix, cela a t'il une incidence?
je ne comprend as du tout pourquoi, a moins d'une mauvaise interpretation du script par unix qui ne l'envoie pas sur le client.
merci de l'aide car il me manque que ca pour finaliser mon site.
15 janv. 2009 à 19:49
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..
Bonjour mon monde
et c tout !!
je poste la nouvelle version !!
10 déc. 2008 à 15:35
ma div "carte" avait un position:relative qui trainait d'un autre essai et qui foutait le bazar.
Donc 10/10 pour cette source !
10 déc. 2008 à 15:31
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
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.
9 nov. 2008 à 10:27
Comme vous pouvez vous en douter, je partage un peu l'opinion de tout le monde sur cette source... Excellente
Je vais essayer d'y apporter mon humble contribution car j'ai eu pas mal de soucis à l'adapter à mes besoins, et la solution etait en faite toute simple.
Je cherchais juste à faire apparaître dans celle ci une str formater en php et dont les elements sortaient d'une BDD mysql. Lorsque l'èlèment infobulle apparaissait, j'avais un retour à la ligne chaque fois que je devais avoir un espace.
Après meinte recherche j'ai trouvé cette solution qui n'apporte des modifications qu'au niveau CSS.
voilà les quatres lignes ajoutées :
height: auto;
width: auto;
white-space: nowrap;
display: inline;
et mon problème fut résolu.
Merci à toi pour cette source!
17 juin 2008 à 17:31
Avez-vous une idée?
10 mai 2008 à 14:34
Avec ce code cela fonctionne, mais je ne voit pas l'image... j'ai juste un petit carré jaune... pourtant le lien de mon image est correct...
10 mai 2008 à 14:26
Ce script est super bien :p
Mais je souhaiterai mettre une image dans l'info bulle... j'ai fait ca :
');" onmouseout="cache();">Un paragraphe avec une info bulle!
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 :)
7 avril 2008 à 16:45
Voici l'application sur laquelle je travaille.
www.lord-raiden.be/Photos/infoBulle.jpg
Les info bulles apparaissent quand je passe sur les points d'interrogations et affiche les infos du contact
Quand je clique sur un des trois boutton (Sélectionner tout, déselectionner tout et Inverser)cela execute du java script interragissant sur les checkbox de droites.
Après plus aucune info-bulles ne s'affichent et c'est comme si j'en avais une info bulle fantome qui restais coller à ma souris quand je me met en bas a droite les barre de defillement s'aggrandissent.
Je sais pas si vous auriez une solution.
Merci d'avance.
13 mars 2008 à 10:57
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 ^_^
4 mars 2008 à 00:05
La variable $bulle etait bonne.
J'ai trouvé le problème qui me tronquait l'infobulle c'était les apostrophes et les retour chariot.
J'ai mis ce qui suit dans mon code et ca marche.
$bulle = addslashes($bulle);
$bulle = str_replace(chr(13).chr(10), " ",$bulle);
Merci de ta réponse
2 mars 2008 à 21:40
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 ?
2 mars 2008 à 21:19
Superbe script en effet!
Mais moi j'ai un problème de variable, quand je passe le texte par une variable par exemple "$bulle" si le texte depasse 20car il ne s'affiche pas. En dessous de 20car il s'affiche.
Je prends le texte dans des fichier texte et je n'affiche que le quard de ce que je pourrai afficher dans une balise "title".
Voici le code:
echo "<tr bgcolor='#91b6d3'><td>$rep
$bulle</td>";
Si je met le texte en clair il affiche tout mais dans une variable il n'affiche que 20car.
Quelqu'un peut-il m'aider ?
30 janv. 2008 à 13:44
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
6 août 2007 à 11:16
Facile a installer tout bien pour moi!!!
10/10
10 juin 2007 à 08:01
4 juin 2007 à 13:28
à priori la div n'a pas d'attributs particulier pourtant
Pour le <SELECT>, il ne me reste plus qu'à fouiller un peu :)
4 juin 2007 à 11:55
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 ;)
4 juin 2007 à 11:47
et pas moyen d'éditer
n'en prenez pas compte
désolé
4 juin 2007 à 11:45
personne n'a eu de problèmes avec des balises
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 :
else { // mode quirck d'IE if(document.documentElement.clientWidth>0) { document.getElementById("curseur").style.left= 10+event. x +document.documentElement.scrollLeft+"px"; document.getElementById("curseur").style.top =10+event.y+document.documentElement.scrollTop+"px"; } else { document.getElementById("curseur").style.left= 10+event. x +document.body.scrollLeft+"px"; document.getElementById("curseur").style.top =10+event.y+document.body.scrollTop+"px"; } }par :
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"; } }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 !
4 juin 2007 à 09:07
Pour ceux qui voudraient voir le résultat, c'est ici : http://www.akpsy.com
C'est un site de psychanalyse, instructif et agréable à lire, sur des thèmes de société. L'accès aux articles pouvait être un peu laborieux. Mais grâce aux infobulles, un résumé s'affiche au passage de la souris sur le titre/lien de l'article pour en indiquer le thème.
3 juin 2007 à 17:47
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...
3 juin 2007 à 17:04
Il faut ajouter quelques trucs à ton inclusion flash :
et wmode="transparent" dans le
Voir ici : http://www.duoh.com/csstutorials/flazindex/index3.html
;)
3 juin 2007 à 16:25
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 ;)
9 mai 2007 à 09:45
Bizarement, mon infobulle était vraiment translucide, mais en ajoutant ces 4 lignes et en mettant leurs valeurs à 1 (et 100 respectivement), l'infobulle est alors opaque.
Et la dernière ligne (z-index) résout bien le deuxième problème !
Merci beaucoup !
8 mai 2007 à 22:25
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.
8 mai 2007 à 19:03
Mais j'ai deux petits problèmes avec.
Peut-être pourrez-vous m'aider sur l'un d'eux :
1) est-il possible de faire en sorte que le fond de l'infobulle ne soit pas translucide, mais bien opaque ?
2) sur la droite de ma page, j'ai une barre de navigation, gérée en css (qui n'est pas une frame), et je ne sais pour quelle raison, l'info-bulle passe dessous celle-ci. Assez ennuyeux pour lire le texte de l'infobulle evidemment !
Merci pour votre aide !
25 avril 2007 à 10:43
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 ?
30 mars 2007 à 11:29
29 mars 2007 à 10:07
<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 !
28 mars 2007 à 23:33
J'ai essayé d'utiliser ce script sur une de mes pages, avec le zip, ca marche sans pb.
Problème :
J'ai essayé d'intégrer une structure plus complexe (un tableau) dans la fontion "montre('TEXTE');" mais je n'y arrive pas... Il n'affiche pas l'infobulle...
Pour info, mon code :
<tr>
<td rowspan=\'3\' width=\'45px\' align=\'right\' class=\'diapoG\'></td>
<td height=\'18px\' width=\'159px\' align=\'center\' valign=\'top\' class=\'haut\'></td>
<td rowspan=\'3\' width=\'45px\' align=\'left\' class=\'diapoD\'></td>
</tr>
<tr>
<td valign=\'baseline\'>sdfsdfsdfssds sdfsdf sdf</td>
</tr>
<tr>
<td height=\'18px\' width=\'159px\' align=\'center\' valign=\'bottom\' class=\'haut\'></td>
</tr>
</table>');" onmouseout="cache();">Un paragraphe avec une info bulle !
J'ai beau retrourner le pb dans tous les sens, je ne trouve pas...
Pour info, la feuille CSS est liée en entête de page et je suis sur du fonctionnement du tableau "seul"...
Merci de votre aide!
13 févr. 2007 à 13:13
<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 "
"
response.write ""
oRecordSet.CloseQuery()
set oRecordSet = nothing
End Sub
%>
21 nov. 2006 à 12:08
Merci et bravo !!
29 juil. 2006 à 22:36
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 ^^
29 juil. 2006 à 17:37
Ce script est tout simplement genial. Je l'ai intégré sur mon site et les données affichées dans l'infobulle proviennent de ma base de données MySQL.
Sinon, pour la transparence j'ai trouvé un bon truc et ça marche chez moi avec IE6 et FireFox.
Voici mon CSS modifié :
.infobulle{
position: absolute;
visibility : hidden;
padding: 10px;
font-family: Verdana, Arial;
font-size: 10px;
background-color: #FFFFFF;
/*width: 300px;*/
width:300px;
color: #000000;
border: Solid 1px;
filter:alpha(opacity=70);
-moz-opacity:0.70;
opacity: 0.70;
font-weight: bold;
}
Les lignes suivantes gèrent l'opacité (ici, à 70%):
filter:alpha(opacity=70);
-moz-opacity:0.70;
opacity: 0.70;
27 juin 2006 à 11:23
Vraiment désolé, j'aurais du tester ça avant de poster.
Merci pour ce code qui fonctionne à la perfection.
27 juin 2006 à 10:56
24 juin 2006 à 09:35
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
23 juin 2006 à 16:57
23 juin 2006 à 10:55
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à)
21 juin 2006 à 16:20
20 juin 2006 à 11:06
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 ?
19 juin 2006 à 09:50
15 mai 2006 à 15:02
Je savais bien que je finirais par trouver exactement ce qu'il me fallait !!
Vous êtes trop forts !!!
Merci
Elisa
24 avril 2006 à 12:23
pour ce qui est du compromis entre les deux... bah non la désolé je ne vois pas comment faire :/
@+
24 avril 2006 à 12:22
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 !
24 avril 2006 à 12:02
Sinon pour ton probléme je ne sais pas du tout, normalement la position de la bulle est mise à jour en continu quand la bulle est affiché, la mise à jour s'arrête quand la bulle n'est plus affiché.
Peut être que sur le cour lapse de temps qui sépare les deux zone IE à un peu de mal...
Solution : Essaye de retirer la condition if(i) { } de la fonction move, comme ceci :
function move(e) {
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";
}
}
}
Si ça marche merci de le dire hein ;) mais bon cette condition sert a éviter que lorsqu'on approche le curseur d'une barre de scroll, on ai pas l'impression la page page grandie...
24 avril 2006 à 11:53
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 !
12 avril 2006 à 18:51
déjà tu peut retirer les lettres en majuscule dans OnMouseOver et OnMouseOut, en XHTML tous les attributs s'écrive en minuscules (c'est peut ça le problème si tu as un doctype xhtml).
Sinon je ne vais pas quel pourrait être le problème avec le href="", je ne pense pas que l'erreur vienne de là.
Si tu es sous Firefox, est ce que le console javascript te retourne un message d'erreur ?
12 avril 2006 à 18:36
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
1 avril 2006 à 14:50
1 avril 2006 à 14:41
Moi je voudrais mettre un bon morceau de texte. Mais quand je fais un copier coller de mon texte j'ai une erreur !!
Merci ...
25 mars 2006 à 13:53
Merci de ton implication pour ma source, j'ai appliqué la modif que tu propose, elle fonctionne nickel ;)
Cette source commence a ressembler à quelque chose :) (Prochaine modif ? Un effet de fondu, ou une tempo a l'apparition de la bulle)
25 mars 2006 à 10:42
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 !
21 mars 2006 à 22:51
En fait j'ai écrit ca :
... <script>
var evenements = "1-ev1.$2-ev2.$1-ev3."//une liste d'évènements
events=evenements.split("$")
//calcul du nombre d'evènements
nevents = events.length
document.write("<TABLE BORDER='1' >");
document.write("<TH COLSPAN=0>");
document.write("<TD>")
document.write('
');
for (n=0; n<nevents; n++){
datec = events[n].split("-")
document.write('
');
document.write('',datec[1],'')
document.write("<TD>")
document.write('',datec[1],'')
document.write("<TD>")
}
</script>...
mais je ne comprends pas il ne me prends que le dernier élément de ma liste pour le mettre dans la bulle... Quelqu'un peut m'aider?
3 mars 2006 à 02:19
5 févr. 2006 à 21:08
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
1 févr. 2006 à 03:20
Merci d'avance.
Tsiao Ping
26 janv. 2006 à 16:01
Bravo pour ton petit script.
Je suis Ultra Débutant et je viens d'utiliser ton script qui fonctionne nickel, je l'ai adapté a des champs d'un tableau.
Ce pendant, mon tableau fait environ une trentaine de colonnes donc le scroll s'effectue de haut en bas et de droite à gauche. Lorsque je passe mon curseur sur une case du tableau se trouvant à l'extreme droite de mon scroll, rien ne s'affiche car en fait la bulle s'affiche en dehors de l'écran sur la gauche.
Y aurait-il moyen de faire quelque chose ?
Merci d'avance et @+
Tibouh...... :-))
14 janv. 2006 à 00:32
13 janv. 2006 à 15:25
Merci pour toutes ces sources et bonne continuation.
13 janv. 2006 à 15:22
j'ai essaye 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!
27 déc. 2005 à 14:44
27 déc. 2005 à 14:43
J'ai tester le script sous différentes version d'IE et j'ai jamais eu ce probleme :/
27 déc. 2005 à 13:52
21 déc. 2005 à 20:55
maintenant ton code est vraiment expoitable pour un site web complet.
Bonne continuation
Brex
21 déc. 2005 à 11:11
J'ai mis a jour le zip et la page d'exemple, les modifications sont mineures.
21 déc. 2005 à 01:29
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 ;)
21 déc. 2005 à 01:26
c'est un bug que je ne m'explique pas, mon javascript est pourtant ultra simple,
et javascript n'a rien a voir avec le doctype,
mais ce dernier empêche javascript de fonctionner...
Je me suis très longtemps pris la tête avec cette anomalie, mais j'ai pas trouver de solution dsl...
20 déc. 2005 à 21:08
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
9 nov. 2005 à 17:52
9 nov. 2005 à 17:50
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 ?
9 nov. 2005 à 14:25
Dans le block l'HTML et autorisé, tu pourrais même y mettre une page web compléte lol ^^
9 nov. 2005 à 13:44
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)))))
21 sept. 2005 à 16:01
ct juste que j'avais mis dans la balise text="#FFFFFF". Donc je ne voyait rien
L'info-bulle est jaune est le texte dedans je l'avais mis en jaune
lol.
Ton code est génial et rapide. Merci pour tout et désolé de t'avoir dérangé pour rien.
21 sept. 2005 à 15:43
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 ?
21 sept. 2005 à 13:33
sous IE 6 ou FireFox 1.0.6 l'info bulle apparait mais y'a rien dedant.
Aurai-tu une explication ?
15 sept. 2005 à 14:57
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.
14 sept. 2005 à 19:39
Aucune idée du probléme... dsl,
tu peu verifier dans la source que le code contenu dans la variable de "montre()" ne contient rien d'anormal, ou encore essayer de donner une largeur fixe au div (rajoute width : 100px; au CSS)
Bonne chance ;)
14 sept. 2005 à 17:14
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.
14 sept. 2005 à 10:22
13 sept. 2005 à 19:47
$variable2 = 'Mon texte2';
echo "<th onmouseover="montre('".$variable."');" onmouseout="cache();">".$variable2."</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)
13 sept. 2005 à 16:16
Comment je dois ecrire ma ligne pour que cela soit ok : ci dessous ca ne marche pas
Merci par avance
$variable = 'Mon texte';
$variable2 = 'Mon texte2';
echo "<th onmouseover='montre($variable)'; onmouseout=cache();> $variable2 </th>";
30 août 2005 à 19:39
30 août 2005 à 19:38
22 août 2005 à 15:40
@+
15 août 2005 à 19:36
je ne note pas de meilleurs perf, mais en tout cas, on est sûr que ca peu pas faire de mal ;)
Merci à vous.
PS : Un exemple est en ligne http://mobman02.free.fr/nepassupprimer/info_bulle.html
15 août 2005 à 14:55
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 !
10 août 2005 à 11:15
Créé une fonction :
function getid(id)
{
return document.getElementById(id);
}
Et remplace tout tes (exemple) :
window.document.getElementById("curseur").style.left=e.pageX + 5;
par :
getid("curseur").style.left=e.pageX + 5;
C'est beaucoup plus propre ;)
Cordialement
--------------------------------
http://fg.logiciel.free.fr
10 août 2005 à 11:11
c'est une simple petite etourderi,
j'ai corriger mon zip, merci ;)
10 août 2005 à 05:49