Générateur d'info-bulles dynamiques

Commenter

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

S'inscrire maintenant

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.

Du même auteur (Lomendil)