Effet "fade" (fondu) dans une infobulle

guigui24750 · 12/03/2011, 23h22

Bonjour je ne trouve pas le moyen d'jouter la fonction "fade" (de fondu) à mon script et je ne suis pas très doué, quelqu'un pourez ajouté une fonction fade (de fondu) à ce script ? :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
	var id = 'tt';
var xOffset=6
var yOffset=15    
 
var affiche = false; // La variable i nous dit si le bloc est visible ou non
var w3c=document.getElementById && !document.all;
var ie=document.all;
 
if (ie||w3c) {
  var laBulle
}
 
function ietruebody(){  // retourne le bon corps...
  return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
 
function deplacer(e) {
  if(affiche){
    var curX = (w3c) ? e.pageX : event.x + ietruebody().scrollLeft;
    var curY = (w3c) ? e.pageY : event.y + ietruebody().scrollTop;
 
    var winwidth = ie && !window.opera ? ietruebody().clientWidth : window.innerWidth - 20;
    var winheight = ie && !window.opera ? ietruebody().clientHeight : window.innerHeight - 20;
 
    var rightedge = ie && !window.opera ? winwidth - event.clientX - xOffset : winwidth - e.clientX - xOffset;
    var bottomedge = ie && !window.opera ? winheight - event.clientY - yOffset : winheight - e.clientY - yOffset;
 
    var leftedge = (xOffset < 0) ? xOffset*(-1) : -1000
 
    // modifier la largeur de l'objet s'il est trop grand...
    if(laBulle.offsetWidth > winwidth / 3){
      laBulle.style.width = winwidth / 3
    }
 
    // si la largeur horizontale n'est pas assez grande pour l'info bulle
    if(rightedge < laBulle.offsetWidth){
      // bouge la position horizontale de sa largeur à gauche
    } else {
      if(curX < leftedge){
        laBulle.style.left = "5px"
      } else{
        // la position horizontale de la souris
        laBulle.style.left = curX + xOffset + "px"
      }
    }
 
    // même chose avec la verticale
    if(bottomedge < laBulle.offsetHeight){
      laBulle.style.top = curY - laBulle.offsetHeight - yOffset + "px"
    } else {
      laBulle.style.top = curY + yOffset + "px"
    }
 
 
 
  }
}
function 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"; // Si il est cachée (la verif n'est qu'une securité) on le rend visible.
    affiche = true;
  }
}
 
 
 
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 = ''
  }
}
 
document.onmousemove = deplacer; // des que la souris bouge, on appelle la fonction move pour mettre a jour la position de la bulle.

Merci d'avance !
Cordialement,
Guillaume

vermine · 13/03/2011, 10h19

Bonjour,

Vous utilisez un Framework Javascript ? La fonction fade est généralement proposée par les Framework. Le Javascript pure doit la créer de toute pièce.

Goltar · 13/03/2011, 10h34

Bonjour,
Regarde mon post http://www.developpez.net/forums/d10...tible-firefox/

J'utilise le fade. ;-) sous IE ça fonctionne

guigui24750 · 13/03/2011, 13h45

Pardon mais ce n'est pas se que je recherche, voila le code complet :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<html>
<head>
 
 
<script language="javascript1.5" type="text/javascript">
 
var xOffset=6
var yOffset=5    
 
var affiche = false; // La variable i nous dit si le bloc est visible ou non
var w3c=document.getElementById && !document.all;
var ie=document.all;
 
if (ie||w3c) {
  var laBulle
}
 
function ietruebody(){  // retourne le bon corps...
  return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
 
function deplacer(e) {
  if(affiche){
    var curX = (w3c) ? e.pageX : event.x + ietruebody().scrollLeft;
    var curY = (w3c) ? e.pageY : event.y + ietruebody().scrollTop;
 
    var winwidth = ie && !window.opera ? ietruebody().clientWidth : window.innerWidth - 20;
    var winheight = ie && !window.opera ? ietruebody().clientHeight : window.innerHeight - 20;
 
    var rightedge = ie && !window.opera ? winwidth - event.clientX - xOffset : winwidth - e.clientX - xOffset;
    var bottomedge = ie && !window.opera ? winheight - event.clientY - yOffset : winheight - e.clientY - yOffset;
 
    var leftedge = (xOffset < 0) ? xOffset*(-1) : -1000
 
    // modifier la largeur de l'objet s'il est trop grand...
    if(laBulle.offsetWidth > winwidth / 3){
      laBulle.style.width = winwidth / 3
    }
 
    // si la largeur horizontale n'est pas assez grande pour l'info bulle
    if(rightedge < laBulle.offsetWidth){
      // bouge la position horizontale de sa largeur à gauche
      laBulle.style.left = curX - laBulle.offsetWidth + "px"
    } else {
      if(curX < leftedge){
        laBulle.style.left = "5px"
      } else{
        // la position horizontale de la souris
        laBulle.style.left = curX + xOffset + "px"
      }
    }
 
    // même chose avec la verticale
    if(bottomedge < laBulle.offsetHeight){
      laBulle.style.top = curY - laBulle.offsetHeight - yOffset + "px"
    } else {
      laBulle.style.top = curY + yOffset + "px"
    }
  }
}
function 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"; // Si il est cachée (la verif n'est qu'une securité) on le rend visible.
    affiche = true;
  }
}
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 = ''
  }
}
 
document.onmousemove = deplacer; // des que la souris bouge, on appelle la fonction move pour mettre a jour la position de la bulle.
 
</script>
 
 
 
<style type="text/css">
.infobulle{
  color: #FFFFFF;
  position: absolute;  
  visibility : hidden;
  border: 2px solid #B1DBF3;
  padding: 10px;
  font-family: Trebuchet MS;
  align: center;
  font-size: 10pt;
  background-color: #000000;
}
</style>
 
 
<div id="bulle" class="infobulle"></div>
 
 
<table width="100%" height="100%" border="1">
  <tr>
    <td onmouseover="montre('Ce texte est trop grand c\'est pourquoi il devrait dépasser de l\'ecran si on ne redimmensionne pas le cadre de l\'infobulle');" onmouseout="cache();"> Youhou trop grand </td><td></td>
    <td onmouseover="montre('Une simple info-bulle');" onmouseout="cache();"> Youhou petit</td><td></td>
  </tr>
</table>
</body>
</html>

et je voudrais y associé un fondu, une fonction FADE, mais je ne suis pas expert en JS...
Voila les fonction fade qui fonctione sous tout navigateur :
http://www.switchonthecode.com/tutor...fade-animation

Si quelqu'un pourrais y adapter le code en y incluant cette fonction FADE et me rendre le code entièrement avec cette fonction en plus (pas me donné seulement la partie du code à ajouter, comme je suis pas doué je serais pas ou la mettre)

Je sais que cela peut paraitre un peut compliqué mais je suis sur que sa en aidera beaucoup d'autre, je suis pas le seul à rechercher à faire cette effet de fondu sur une infobulle.

Voilà j'espère que j'ai expliqué au mieux.

Merci d'avance de votre aide !

13/03/2011, 10h19	#2
vermine Responsable JavaScript & AJAX Inscription : mars 2008 Messages : 2 686 Détails du profil Informations personnelles : Âge : 27 Informations forums : Inscription : mars 2008 Messages : 2 686 Points : 5 761 Points : 5 761	Bonjour, Vous utilisez un Framework Javascript ? La fonction fade est généralement proposée par les Framework. Le Javascript pure doit la créer de toute pièce. __________________ Elen Poukram - Isegoria - Sandawe
	00

13/03/2011, 10h34	#3
Goltar Nouveau Membre du Club Patrick Algrain Développeur Web Débutant Inscription : mars 2011 Messages : 63 Détails du profil Informations personnelles : Nom : Patrick Algrain Localisation : Belgique Informations professionnelles : Activité : Développeur Web Débutant Secteur : Boutique - Magasin Informations forums : Inscription : mars 2011 Messages : 63 Points : 25 Points : 25	Bonjour, Regarde mon post http://www.developpez.net/forums/d10...tible-firefox/ J'utilise le fade. ;-) sous IE ça fonctionne
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email