Forums Webou.net - Hébergement gratuit et sans publicités avec PHP/MySQL Webou Webou Pro
Recherche avancée  
*
Bienvenue, Invité. Veuillez vous connecter ou vous inscrire.
Avez-vous perdu votre courriel d'activation?
24 Novembre 2017, 02:51:34


Connexion avec identifiant, mot de passe et durée de la session


Pages: [1]   Bas de page
  Imprimer  
Auteur Fil de discussion: Infobulle dynamique (javascript)  (Lu 3375 fois)
0 Membres et 1 Invité sur ce fil de discussion.
zezipper
Nouveau
*
Hors ligne Hors ligne

Messages: 30



Voir le profil WWW
« le: 04 Novembre 2008, 18:19:02 »

Bonsoir à tous,

J'ai trouvé un petit script assez simple à cette adresse http://www.webelix.net/trucs_et_astuces-(JavaScript)_Infobulle_dynamique.html mais je n'arrive pas à l'intégrer à mes propres pages.

Pourtant j'ai suivi la procédure indiquer. Je n'arrive ni à le faire fonctionner en local (EasyPhp) ni sur le serveur de webou.
J'ai remarqué que dans le portofolio de K@cem il y avait le même genre de script au niveau de son menu.

A bon entendeur...

(K@cem je compte sur toi  Souriant).

Ps: je suis persuadé que cela doit être simple c'est pour ça que je n'ai pas posté le code source. En suivant le lien vous devriez avoir les informations nécessaires pour me tirer de cette impasse.

A bientôt
Cordialement Ze zipper


Journalisée
Forums Webou.net - Hébergement gratuit et sans publicités avec PHP/MySQL
« le: 04 Novembre 2008, 18:19:02 »

 Journalisée
chrmag
Bavard
***
Hors ligne Hors ligne

Messages: 131


Voir le profil WWW
« Répondre #1 le: 04 Novembre 2008, 23:54:17 »

Je crois que ton probleme etait que le fichier css n'etait pas bien importé (il devait etre dans le meme repertoir que la page)...

Sinon, j'ai un peu reecrit le script pour qu'il soit un peu plus portable:
Fichier JS:
Code:
document.write('<div id="bulle" style="z-index: 500; position: absolute; visibility: hidden;"></div>');
var bulle_visible = false;

function bulle_move(e)
{
  if(bulle_visible){
    var obj = document.getElementById("bulle");
    if(navigator.appName!="Microsoft Internet Explorer"){
      obj.style.left = 5+e.pageX+"px";
      obj.style.top = 15+e.pageY+"px";
    }else{
      obj.style.left = 5+event.x+document.documentElement.scrollLeft+"px";
      obj.style.top = 15+event.y+document.documentElement.scrollTop+"px";
    }
  }
}

function bulle_open(content)
{
  if(!bulle_visible){
    var obj = document.getElementById("bulle");
    obj.style.visibility = "visible";
    obj.innerHTML = content;
    bulle_move(obj); // la j'ai recopie, mais je sais pas pourquoi on mets l'obj comme parametre???
    bulle_visible=true;
  }
}

function bulle_close()
{
  if(bulle_visible){
    document.getElementById("bulle").style.visibility = "hidden";
    bulle_visible = false;
  }
}
document.onmousemove = bulle_move;
Enuite dans ton fichier CSS, tu ajoutes:
Code:
#bulle {....}
Ou tu remplaces les .... par ce que tu veux (couleur de bordure, arriere plan, ...)

Pour l'utiliser tu dois inclure dans ton entete:
Code:
<script type="text/javascript" src="chemin_vers_le_fichier_JS"></script>
Et pour afficher l'info-bulle:
Code:
<p onmouseover="bulle_open('bonjour!');" onmouseout="bulle_close();">Par ici ;)</p>
Journalisée
zezipper
Nouveau
*
Hors ligne Hors ligne

Messages: 30



Voir le profil WWW
« Répondre #2 le: 05 Novembre 2008, 09:38:45 »

Citation
Enuite dans ton fichier CSS, tu ajoutes:
Code:
#bulle {....}
Ou tu remplaces les .... par ce que tu veux (couleur de bordure, arriere plan, ...)
C'est ça qui m'a mis sur la voie:
il manquait l'id bulle devant la class infos_bulle dans le css. Donc finalement je n'ai modifié que le css:

Code:
#bulle .infos_bulles{...}

Merci chrmag.
« Dernière édition: 05 Novembre 2008, 14:53:20 par zezipper » Journalisée
Pages: [1]   Haut de page
  Imprimer  
 
Aller à:  

Propulsé par MySQL Propulsé par PHP Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Dilber MC Theme by HarzeM
Page générée en 0.02 secondes avec 20 requêtes.