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

Commentaire de Diti2330 le 29/08/2005 11:11:08

Tu n"aurais pas un exemple direct sur internet ?

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

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 !

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

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 (^_^)

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

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

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 !

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.

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