INFO BULLE AMÉLIORÉE COMPATIBLE INTERNET EXPLORER ET GEOCKO ENGINE
Diti2330
Messages postés
12
Date d'inscription
mardi 16 novembre 2004
Statut
Membre
Dernière intervention
3 juillet 2006
-
29 août 2005 à 11:11
guigui24750 Messages postés 1 Date d'inscription mardi 8 mars 2011 Statut Membre Dernière intervention 8 mars 2011 - 8 mars 2011 à 01:21
guigui24750 Messages postés 1 Date d'inscription mardi 8 mars 2011 Statut Membre Dernière intervention 8 mars 2011 - 8 mars 2011 à 01:21
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/33453-info-bulle-amelioree-compatible-internet-explorer-et-geocko-engine
https://codes-sources.commentcamarche.net/source/33453-info-bulle-amelioree-compatible-internet-explorer-et-geocko-engine
8 mars 2011 à 01:21
Enfin, mais je pensais serait-il passible de faire un effet d'apparition, je sais pas trop comment, peut-être avec du css et JS avec la fonction opacity ?
Voila, ce serait pas mal je pense.
29 nov. 2007 à 11:04
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
3 nov. 2007 à 18:04
11 juil. 2007 à 12:34
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
28 août 2006 à 01:37
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 !
21 août 2006 à 15:01
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:
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.
31 mars 2006 à 11:52
<td>
Gameplay Africa</td>
Vu que tu utilise un lien c'est encore plus simple :
<td></td>
et au passage cré un fichier css avec tes styles , et met le style dans lien :
<td></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.
31 mars 2006 à 01:54
<td onmouseover="montre('
Gameplay Africa</td>
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 !
31 mars 2006 à 01:36
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
30 mars 2006 à 20:29
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 :)
30 mars 2006 à 19:45
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!
30 mars 2006 à 19:43
cherche juste border et padding
Chez moi ca donne :
border: 2px solid #003366;
padding: 10px;
background-color: #000000;
Voilu
30 mars 2006 à 19:28
12 mars 2006 à 20:55
12 mars 2006 à 07:06
var xOffset=
var yOffset=
Je conseille 20 au minimum sinon ya des legers probleme quand on bouge vite la souris.
10 mars 2006 à 11:12
Merci
18 nov. 2005 à 14:13
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
2 sept. 2005 à 19:06
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 !
29 août 2005 à 15:47
29 août 2005 à 15:46
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
29 août 2005 à 15:00
29 août 2005 à 11:11