Générateur d'info-bulles dynamiques

Soyez le premier à donner votre avis sur cette source.

Snippet vu 18 439 fois - Téléchargée 19 fois

Contenu du snippet

Voici un code qui a pour but d'afficher des infos-bulles sur des mot-clés que vous avez prédéfinis à l'avance. Le script va ensuite "s'accrocher" à ces mots et faire apparaitre une petite fenetre que vous pourrez remplir comme bon vous semble.
Le script possède des timers qui permettent à l'utilisateur de passer sa souris dans le cadre sans que celui-ci ne se ferme. Vous pouvez donc en profiter pour y mettre des liens vers d'autres ressources Web. N'oubliez pas non plus que vous pouvez utiliser HTML et donc y mettre de la couleur, des CSS, des images, ...

Le popup en lui même n'est pas de moi, j'y ai juste ajouté les fonctionnalités qui me manquaient (ou modifié celles qui ne me convenaient pas). Au final, ça n'a plus grand chose de l'original mais je laisse quand même la source pour ceux qui voudraient y jetter un oeil.

Source / Exemple :


//Créez un fichier .js dans lequel vous mettrez ce code :
// SOURCE : http://javascript.internet.com/
//   ##############  SIMPLE  BROWSER SNIFFER
if (document.layers) {navigator.family = "nn4"}
if (document.all) {navigator.family = "ie4"}
if (window.navigator.userAgent.toLowerCase().match("gecko")) {navigator.family = "gecko"}
var overdiv="0";
var sleep="";

//  #########  CREATES POP UP BOXES 
function popLayer(a){
setTimeout("hideLayer();",1000);
//DEFINITIONS
if(a=="Mot1"){definition="<b>Mot1</b> : définition du premier mot.";}
else if(a=="Mot2"){definition="<b>Mot2</b> : définition du second mot.";}
else if(a=="Mot3"){definition="<b>Mot3</b> : définition du troisième mot.";}

//AFFICHAGE
if (navigator.family == "gecko") {pad="0"; bord="1 bordercolor=black";}
else {pad="1"; bord="0";}
desc = 	  "<table cellspacing=0 cellpadding="+pad+" border="+bord+"  bgcolor=000000><tr><td>\n"
	+"<table cellspacing=0 cellpadding=3 border=0 width=100%><tr><td bgcolor=ffffdd><center><font size=-1>\n"
	+definition
	+"\n</td></tr></table>\n"
	+"</td></tr></table>";
if(navigator.family =="nn4") {
	document.object1.document.write(desc);
	document.object1.document.close();
	document.object1.left=x+15;
	document.object1.top=y-5;
	}
else if(navigator.family =="ie4"){
	object1.innerHTML=desc;
	object1.style.pixelLeft=x+15;
	object1.style.pixelTop=y-5;
	}
else if(navigator.family =="gecko"){
	document.getElementById("object1").innerHTML=desc;
	document.getElementById("object1").style.left=x+15;
	document.getElementById("object1").style.top=y-5;
	}
}
function hideLayer(){
    setTimeout("bat_hideLayer()",1000);
}
function bat_hideLayer(){
  if (overdiv == "0") {
	if(navigator.family =="nn4") {eval(document.object1.top="-500");}
	else if(navigator.family =="ie4"){object1.innerHTML="";}
	else if(navigator.family =="gecko") {document.getElementById("object1").style.top="-500";}
  }
}
function noaccent(chaine) {
      temp = chaine.replace(/[àâä]/gi,"a")
      temp = temp.replace(/[éèêë]/gi,"e")
      temp = temp.replace(/[îï]/gi,"i")
      temp = temp.replace(/[ôö]/gi,"o")
      temp = temp.replace(/[ùûü]/gi,"u")
      return temp
   }

//MOTEUR DE RECHERCHE
function AttacherInfosBulles(cible) {
if (!cible){cible = document.body;}
  //LISTE DES MOTS SUR LESQUELS LA BULLE SE PLACE AUTOMATIQUEMENT
  var MotsCles = Array("Mot1","Mot2","Mot3"), reg;
  //AUTRES VARIABLES
  var n = 0;
  var txt, i, found;
  for(i=0;i<MotsCles.length;i++) {
    txt = cible.innerHTML;
    reg = new RegExp(MotsCles[i],"")
    MotCle=MotsCles[i].replace(/ /g,"_"); //Facultatif, remplace les espaces par des underscores.
    MotCle=noaccent(MotCle);
    txt = txt.replace(reg,"<span class=aide onMouseOver=\"overdiv++;popLayer('"+MotCle+"')\" onMouseOut=\"hideLayer();overdiv--\">"
    +MotsCles[i]+"</span>")
    n++;
    cible.innerHTML = txt;
  }
}

//  ########  TRACKS MOUSE POSITION FOR POPUP PLACEMENT
var isNav = (navigator.appName.indexOf("Netscape") !=-1);
function handlerMM(e){
x = (isNav) ? e.pageX : event.clientX + document.body.scrollLeft;
y = (isNav) ? e.pageY : event.clientY + document.body.scrollTop;
}
if (isNav){document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove = handlerMM;

//         Ensuite, dans la page dans laquelle vous souhaitez voir apparaitre vos bulles :         //
// entre <HEAD> et </HEAD> :
<SCRIPT LANGUAGE=Javascript SRC="./script/infos.js"> </SCRIPT>

// juste après la balise <BODY> du document :
<div id="object1" onmouseover="overdiv++;"  onmouseout="overdiv--;hideLayer();"></div>

// dans la balise body :
<body onload="AttacherInfosBulles()">

Conclusion :


Pour que ce script fonctionne, il faut commencer par définir les mots clés sur lesquels il devra réagir. Une fois ces mots définis, vous pouvez alors définir les mots sur lesquels le script doit réagir automatiquement. En effet, vous pouvez manuellement ajouter des ancres sur les mots que vous voulez sans que cela se fasse automatiquement. La syntaxe est la même que celle utilisée par le script, c'est à dire :

<span class="aide" onMouseOver="overdiv++;popLayer('MotX')" onMouseOut="hideLayer();overdiv--">Mot1</span>

Enfin, il est impératif de rajouter la fonction dans l'attribut onLoad de votre <body> :

Cette fonction accepte un paramètre afin de n'affecter qu'un seul élément de votre page. Sinon, toute la page sera scannée.

Voila, j'espère que cette source se révellera intéressante pour certains.

A voir également

Ajouter un commentaire Commentaires
Messages postés
2
Date d'inscription
jeudi 15 octobre 2009
Statut
Membre
Dernière intervention
11 août 2011

nickel
Messages postés
7
Date d'inscription
mardi 21 août 2007
Statut
Membre
Dernière intervention
26 octobre 2007

J'ai l'impression que le script n'est apparement pas compatible
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Sous IE aucun problème, sous Firefox le déplacement en X ou Y semble gellé. Si j'enlève le doctype tout fonctionne.
Messages postés
17
Date d'inscription
samedi 23 août 2003
Statut
Membre
Dernière intervention
21 mai 2008

Merci pour cette contribution :)

Mon but initial était précisément d'éviter ce comportement mais tu as bien fait de mentionner cette possibilité.
Messages postés
7
Date d'inscription
mardi 21 août 2007
Statut
Membre
Dernière intervention
26 octobre 2007

J'ai pu trouver la solution. Si on veut un accrochage sur toutes les itérations il faut modifier la ligne 74 :
reg = new RegExp(MotsCles[i],"")
par :
reg = new RegExp(MotsCles[i],"g")
Messages postés
7
Date d'inscription
mardi 21 août 2007
Statut
Membre
Dernière intervention
26 octobre 2007

Maintenant ça fonctionne je ne sais pas pourquoi.
Cependant le scan du texte s'arrete à la première occurence du mot cle. Ainsi si on a plusieurs fois le mot seul le premier possède une infobulle.

Il y aurait il moyen de parcouri tout le texte ?
Afficher les 11 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.