Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

INFO BULLE AMÉLIORÉE COMPATIBLE INTERNET EXPLORER ET GEOCKO ENGINE


Information sur la source

Catégorie :Divers Classé sous : infobulle, ie, firefox, gecko, information Niveau : Débutant Date de création : 26/08/2005 Date de mise à jour : 08/11/2005 16:52:35 Vu / téléchargé: 14 266 / 43 282

Note :
8,5 / 10 - par 10 personnes
8,50 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (21)
Ajouter un commentaire et/ou une note

Description

En fait c'est une source que j'ai empruntée à mobman02, je trouvais la source intéressant mais pas assez évolué.
J'ai remarqué 2 ou 3 bugs que j'ai donc corrigés !
Je veux pas faire la fine bouche et dire que mon code est mieux que le sien simplement je voulais juste vous faire partager ma conception du problème.
J'ai donc ajouter un control pour la taille du contenu de l'infobulle. Ainsi qu'un controle qui affiche l'infobulle dans différentes positions si elle est au bord inférieur ou lattéral droit de la fenêtre.

Une version d'exemple est disponible sur http://traaaz.free.fr/codessources/infobulles/

Pout toutes questions ou remarques contactez-moi
 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Historique

26 août 2005 12:21:22 :
Voilà ;)
08 novembre 2005 16:52:35 :
- Changement de la description - Ajout de l'exemple en ligne

Commentaires et avis

signaler à un administrateur
Commentaire de Diti2330 le 29/08/2005 11:11:08

Tu n"aurais pas un exemple direct sur internet ?

signaler à un administrateur
Commentaire de galadriann le 29/08/2005 15:00:26

Joli et simple a mettre en place ...  peut s'averer tres utile ...

signaler à un administrateur
Commentaire de galadriann le 29/08/2005 15:46:54

Juste un petit probleme...

je cree une barre de menu en utilisant ton infobulle ...  jusque la tout va bien.
Ensuite j'inclus cette barre dans une autre page (PHP -> include_once("menu.html") )

la l'info bulle se balade loin vers la droite (environ 300px)

une idee pourquoi ?  l'insertion du menu se fait dans un div avec position:absolute.
???


Merci

signaler à un administrateur
Commentaire de galadriann le 29/08/2005 15:47:53

Juste pour info,  IE ou firefox c'est pareil ...

signaler à un administrateur
Commentaire de Zart le 02/09/2005 19:06:03

Pour répondre à Diti2330 :
J'aimerais bien mais je n'ai pas souvent le net en ce moment et j'ai plus de FTP donc je voudrais bien mais pour le moment j'en suis incapable...
Il y a encore un ti bug que j'essai ardument de corriger, mais il ne  devrait plus résister longtemps. Vous serez mis au courant si je modifie !

signaler à un administrateur
Commentaire de westernz le 18/11/2005 14:13:57

Bonjour,

Comment faire pour afficher non pas un texte mais une image dans l'infobulle ?
L'image sera entourée si possible d'un tableau visible 1x1 qui servira de cadre de decoraion.

Merci et bonne journée
Westyernz

signaler à un administrateur
Commentaire de seishinji le 10/03/2006 11:12:57

Vraiment très bon code mais j'aimerais savoir s'il est possible de gérer la position de l'infobulle par rapport à la souris, de manière à ce qu'elle ne soit pas collée au curseur ^^

Merci

signaler à un administrateur
Commentaire de westernz le 12/03/2006 07:06:26

Pour l'emplacement cherche ces 2 lignes
var xOffset=
var yOffset=

Je conseille 20 au minimum sinon ya des legers probleme quand on bouge vite la souris.

signaler à un administrateur
Commentaire de seishinji le 12/03/2006 20:55:49

Non c'est bon j'ai pas trouvé ces lignes, mais j'ai utlisé un style css pour régler le problème (^_^)

signaler à un administrateur
Commentaire de laraider le 30/03/2006 19:28:49

Je suis entrain d'installer ce code mais mon problème, c'est que ca s'affiche dans un tableau, et moi, je ne veux pas que ca soit dans un tableau, alors comment je fais, car quand je sort la ligne du tableau, la bulle ne fonctionne plus (je précise que j'utilise les bulles pour afficher des images). Merci.

signaler à un administrateur
Commentaire de westernz le 30/03/2006 19:43:35

Je l'utilise pour image et texte sans probleme, suffit de dire que border: 0px, puis padding et background a toi de voir. Les lignes sont dans la partie css

cherche juste border et padding

Chez moi ca donne :
border: 2px solid #003366;
padding: 10px;
background-color: #000000;

Voilu

signaler à un administrateur
Commentaire de chino18 le 30/03/2006 19:45:36

Code simple, facile à mettre en place et personnalisable. que demander de plus? ^^
Personnellement je m'en sert pour agrandir des photos en cas de survol de la miniature et ca fonctionne du feu de dieu. C'est exactement le code que je cherchais.
Bravo et merci!

signaler à un administrateur
Commentaire de laraider le 30/03/2006 20:29:18

Ok, je me débrouille avec le tableau mais comme c'était pour déjà les mettre dans un tableau, ca me crée une nouvelle cellule et ca fait un peu désordre car ca décalle tout... mais bon, je refait tout mon tableau, tampis.

Par contre, comment faire pour que la bulle ne s'affiche QUE sur le lien : je m'explique, quand je passe la souris sur le lien c'est bon j'ai ma bulle, mais quand je ne suis plus sur le lien (mais que je suis toujours dans sa cellule) la bulle s'affiche toujours. Comment faire pour que la bulle ne s'affiche QUE sur la longueur du lien et pas celle de la cellule ? MERCI :)

signaler à un administrateur
Commentaire de westernz le 31/03/2006 01:36:39

met le code dans span ;) et ferme le span a la fin du texte.

Tu peut mettre une cellule tableau dans laquelle tu met l'image, et  met 0 en border et en padding. De toutefacon il faut decale un minimum sinon l'image fretille quand on bouge la souris (relation entre vitesse deplacement curseur / déplacement photo).

bye

signaler à un administrateur
Commentaire de laraider le 31/03/2006 01:54:14

Coucou Western, j'ai mis le code ci dessous, entre span et /span mais ca fait rien du tout ! J'ai toujours l'image sur toute la longueur de la cellule :(

<span><td onmouseover="montre('<img src=http://www.laraider.com/downloads/videos/tr7/gameplay/tr7gameplayafrica.jpg>');" onmouseout="cache();" width="187">
<font size="1" face="Verdana">
<a href="http://www.laraider.com">
Gameplay Africa</a></font></td></span>

Au fait, je suis débutante en script, enfin, je taquine de temps en temps, mais je ne connais pas tout, comme span, je connaissais pas avant maintenant !

signaler à un administrateur
Commentaire de westernz le 31/03/2006 11:52:42

Sans un lien ca donne :

<td><span onmouseover="montre('<img src=http://www.laraider.com/downloads/videos/tr7/gameplay/tr7gameplayafrica.jpg>');" onmouseout="cache();" width="187">
<font size="1" face="Verdana">
<a href="http://www.laraider.com">
Gameplay Africa</a></font></span></td>


Vu que tu utilise un lien c'est encore plus simple :

<td><a onmouseover="montre('<img src=http://www.laraider.com/downloads/videos/tr7/gameplay/tr7gameplayafrica.jpg>');" onmouseout="cache();" width="187"
font size="1" face="Verdana"
href="http://www.laraider.com">
Gameplay Africa</font></a></td>


et au passage cré un fichier css avec tes styles , et met le style dans lien :

<td><a class="Monstyle" onmouseover="montre('<img src=http://www.laraider.com/downloads/videos/tr7/gameplay/tr7gameplayafrica.jpg>');" onmouseout="cache();" width="187"
href="http://www.laraider.com">
Gameplay Africa</a></td>

Et dans ton fichier .css :
<!--
.Monstyle {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px;}

Dans ta page en haut dans la tete tu load ton .css
<link type="text/css" rel="stylesheet" href="../pages.css">

Et voila ton code et propre, et tons tyle ré-utilisable.

signaler à un administrateur
Commentaire de oximore le 21/08/2006 15:01:14

Salut zart,

Eh bien, après avoir essayé plusieurs systèmes d'info-bulles trouvés à gauche à droite, je trouve ta manière la plus simple et efficace. Un grand merci.

Petite astuce pour ceux qui comme moi devront faire passer cette info-bulle au-dessus de champs de formulaires composés de "dropdown-list" sous IE (Sous IE, elles sont gérés par le sytème et donc reste au-dessus de la bulle!! Saloperie d'IE).
J'ai utilisé la technique d'une IFrame qui vient se placer derrière la bulle et qui la suit. Ainsi, même IE est capable de la faire apparaître convenablement... Génial, non?! (Saloperie d'IE).

Voici ce que j'ai fait:
Ds le document html, mettre une IFrame:

<IFRAME id="iframe_pour_ie" style="DISPLAY: none; LEFT: 0px; POSITION: absolute; TOP: 0px; z-index: 97;" src="javascript:false;" frameBorder="0" scrolling="no"></IFRAME>

Ds le code de 'infobulle.js', j'ai rajouté ceci (ce n'est pas optimisé, mais cela fonctionne):
(Retrouver toutes les lignes "//Uniquement pour IE")

Dans la fonction "deplacer(e) ->

if(rightedge < laBulle.offsetWidth){
  // bouge la position horizontale de sa largeur à gauche
  laBulle.style.left = curX - laBulle.offsetWidth + "px"

  //Uniquement pour IE
  if (navigator.userLanguage) document.getElementById('iframe_pour_ie').style.left = curX - laBulle.offsetWidth + "px";

} else {
  if(curX < leftedge){
    laBulle.style.left = "5px";

    //Uniquement pour IE
    if (navigator.userLanguage) document.getElementById('iframe_pour_ie').style.left = "5px";
  } else{
    // la position horizontale de la souris
    laBulle.style.left = curX + xOffset + "px";

    //Uniquement pour IE
    if (navigator.userLanguage) document.getElementById('iframe_pour_ie').style.left = curX + xOffset + "px";
  }
}

// même chose avec la verticale
if(bottomedge < laBulle.offsetHeight){
  laBulle.style.top = curY - laBulle.offsetHeight - yOffset + "px";

  //Uniquement pour IE
  if (navigator.userLanguage) document.getElementById('iframe_pour_ie').style.top = curY - laBulle.offsetHeight - yOffset + "px";
} else {
  laBulle.style.top = curY + yOffset + "px";

  //Uniquement pour IE
  if (navigator.userLanguage) document.getElementById('iframe_pour_ie').style.top = curY + yOffset + "px";
}

//Uniquement pour IE
if (navigator.userLanguage) {
  document.getElementById('iframe_pour_ie').style.width = laBulle.offsetWidth;
  document.getElementById('iframe_pour_ie').style.height = laBulle.offsetHeight;
}

Dans la fonction "montre(text)" ->

if (w3c||ie){
  laBulle = document.all ? document.all["bulle"] : document.getElementById ? document.getElementById("bulle") : ""
  laBulle.innerHTML = text; // fixe le texte dans l'infobulle
  laBulle.style.visibility = "visible";
  affiche = true;

  //Uniquement pour IE
  if (navigator.userLanguage) {
    document.getElementById('iframe_pour_ie').style.display = '';
    document.getElementById('iframe_pour_ie').style.filter = 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';
  }
}

Et dans la fonction "function cache()" ->

if (w3c||ie){
  affiche = false;
  laBulle.style.visibility="hidden"; // avoid the IE6 cache optimisation with hidden blocks
  laBulle.style.top = '-1000px';
  laBulle.style.backgroundColor = '';
  laBulle.style.width = '';

  //Uniquement pour IE
  if (navigator.userLanguage) document.getElementById('iframe_pour_ie').style.display = 'none';
}

Voilà..
C'était aussi simple.

O.

signaler à un administrateur
Commentaire de bobbie305girl le 28/08/2006 01:37:58

Salut a tous !
une fois le code integré a ma page web, pas de soucis, l'infobulle apparait, mais beaucoup trop en dessous de l'image pointée ! Alors que sur l'exemple, il n y a pas de soucis ! Que puis-je faire?

Merci d'avance !

signaler à un administrateur
Commentaire de idamarco le 11/07/2007 12:34:08

Bonjour,
je voudrais mettre du texte dans l'info bulle mais j'ai 2 limites: le nombre de caractères et impossible de faire un retour chariot dans la définition.
J'utilise le script sur un forum phpbb

Marco

signaler à un administrateur
Commentaire de hexenez le 03/11/2007 18:04:50

pour les retours à la ligne, met chaque ligne dans un div, ca tourne sous IE et Firefox !

signaler à un administrateur
Commentaire de choosedeath le 29/11/2007 11:04:58

Bonjour,
j'ai beau modifier
var xOffset=6

var yOffset=5  
J'ai toujour le cadre trop en dessous de l'endroit où il devrai être. Comment faire?
Merci

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Compatibilité IE/Firefox champ type File [ par blap_psx ] Voilà mon probleme :Je doit controler un formulaire avant envois vers une page php en JS ( pour controler l'extention des fichiers avant de les upload fonction onblur differente IE / firefox [ par floben21 ] Bonjour,J'ai un souci avec la fonction onblur:J'ai un document flash à l'interieur de mon html, qand je clique sur un bouton du flash (telecharger), Lecteur MP3 pour IE ET FIREFOX [ par daftfunk ] Salut tous,C'est en réalité se que je cherche... un script que les deux nav acceptent .avec liste et commandes d'arret etc..Cela existe t il en JS? do getElementsByName fonctionne nickel sous Firefox mais pas sous IE [ par Harm_Flav ] Bonjour,j'ai un problème avec la fonction getElementByName sous Internet Explorer. Je tiens à préciser que sous Firefox ça marche très bien.Alors voil Convertion script IE vers firefox [ par vinum ] J'ai un script qui fonctionne tres bien sous IE mais pas sous Firefox. En fait j'ai une liste deroulante, lorsque l'utilisateur selectionne un Pays, i Correspondance IE -> Firefox [ par tommy_lapotence ] Bonjour, J'ai un probl&#232;me de correspondance de code entre IE et Firefox. J'ai un &lt;input type="input"&gt; dans un form dont la valeur doit &# Firefox et IE [ par Willow_design ] Bonjour a tous, nouvelle venue sur http://www.javascriptfr.com je cherche quelques reponses a mes probleme de boulot. G&#233;rant une application un p Menu Firefox / IE - Ne marche que sous IE [ par Blacknight91titi ] Bonjours a tous.Je pense que ca n'est pas la premi&#232;re question sur ce sujet mais celle ci comporte un plus.En effet j'ai cr&#233;er un petit menu saveas sous FireFox [ par crashtest ] Bonjour,alors c'est simple je voudrais faire pareil que le saveas de IE mais sous FireFox voila @++ et merci pour vos r&#233;ponse.Mes sitewebs (fonct incompatibilité entre IE et Firefox [ par bossun ] salut,j'ai la fonction suivante qui s'exécute parfaitement sur IE mais pas sur FireFox: &lt;script language="javascript" type="text/jscript" &gt; fun


Nos sponsors

Sondage...

CalendriCode

Novembre 2008
LMMJVSD
     12
3456789
10111213141516
17181920212223
24252627282930

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,359 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.