11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous !

Voila maintenant un bon mois que je travaille sur mon projet de stage. L'aillant bien entammé, il est venu temps pour moi de le dynamiser. J'essaye donc doucement de m'initier au javascript Smiley rolleyes et chope des boûts de codes sur certains sites, et notemment le votre ! Smiley cligne Je me suis dit que face à un nouveau problème il serait bien qu'enfin je m'inscrive ^^

Alors voila, tout est dans le titre. J'ai choppé un boût de script permettant d'afficher une infobulle. le principe est simple :


div class="infobulle" id="DivBulle">
  <!-- Ce div est vide --> 
</div>
<span onmouseover="montre('Contenu de l'infobulle')" onmouseout="cache()">
  [...]
</span>




.infobulle
{
  position: absolute;   
  visibility : hidden;
  border: 1px solid Black;
  background-color: #FFFFCC;
}




function montre(text)
{
  document.getelementbyid("DivBulle").style.visibility="visible";
  document.getelementbyid("DivBulle").innerHTML = text;
}

function cache()
{
  document.getelementbyid("DivBulle").style.visibility="hidden";
}

document.onmousemove=move;

function move
{
[...]
//fonction de malade qui deplace le div en fonction du curseur
[...]
}



Ma requète est toute simple : je veux que la bubulle attende un certain délai avant de s'afficher. J'avais un algorithme en tête, mais je ne sais pas le traduire en javascript Smiley decu :


<span   
onmouseover="WaitNShow('blabla')"
onmouseout="HideIfNoTest()">
</span>




WaitNShow(text)
{
  test = 0;
  HO = heure_courante;
  while ((curseur_au_dessus_du_div) && (delai < 1))
  {
    HC = heure_courante;
    delai = HC - HO;
    test= 0;
    if ((curseur_au_dessus_du_div) && (delai >= 1))
      test = 1;
  }
  
  if (test = 1)
    montre(text);
}

HideIfNoTest()
{
  if (test = 1)
    cache();
}



PS : Si cet Algo ne vous plait pas, je suis ouvert à toute autre possibilité Smiley smile tant qu'elle respècte la condition : "Affichage uniquement si la souris était sur le <span> pendant TOUTE la durée du délai"

DONC => prière de réfléchir avant de me sortir "setTimeout(tafonction, 1000)". Il faut bien évidemment un test vérifiant que la souris RESTE en mouseover PENDANT le delais, sous peine de faire planter tout le site.


Merci par avance les zamis Smiley smile
Modifié par Shqdow (18 Jun 2010 - 16:09)
Suffit de combiner setTimeout et clearTimeout, en rollover tu mets un setTimeout, en rollout tu mets un clearTimeout.

Regarde un peu une doc sur ces deux fonctions, c'est assez simple à gérer.
Modifié par Skoua (18 Jun 2010 - 17:08)