Mode d'emploi

Mode d'emploi "InfoBulle"

1- Définition du style

2- Définition des paramètres

3- Définition du script

4- Chargement & contact

Sélectionnez le texte ci-dessous et copiez/collez-le dans votre feuille de style "****.css", ou à défaut entre les balises <head> et </head> de votre page.
Personnalisez les couleurs de fond ("background"), couleur de police ("color"), taille de caractères ("font-size") des informations contenues dans la bulle, voire des autres paramètres (reportez-vous aux manuels sur les feuilles de style pour aller plus loin).

1- Définition du style

2- Définition des paramètres

3- Définition du script

4- Chargement & contact

Copiez/collez le script suivant entre les balises <body> et </body> de votre page :

<script language="javascript">
// michel.staelens@wanadoo.fr
definirObj("laBulle","","infoBulle")
cacherObj("laBulle")
var flagpos=false
if(document.layers){document.captureEvents(Event.MOUSEMOVE)}
document.onmousemove=bougeinfo
function bougeinfo(e){if(flagpos){positionnerObj("laBulle",xSouris(e)+8,ySouris(e)+8)}}
function visioninfo(titB,corB,notB) {
	flagpos=true
	msg	="<TABLE><TR><TD class=cadreBulle><TABLE cellspacing=0><TR>"
		+((titB!=null)?("<tr><th class=titreBulle>"+titB+"</th></tr>"):(""))
		+((corB!=null)?("<tr><td class=corpsBulle>"+corB+"</td></tr>"):(""))
		+((notB!=null)?("<tr><td class=notaBulle>"+notB+"</td></tr>"):(""))
		+"</TABLE></TD></TR></TABLE>"
	redefinirObj("laBulle",msg)
	voirObj("laBulle")
}
function cacheinfo(){flagpos=false;cacherObj("laBulle")}
//dhtml:michel.staelens@wanadoo.fr
function definirObj(nom,ceci,classe,gauche,haut){
	document.write("<div id='"+nom+"' "+((classe!=null)?("class="+classe):(""))+" >"+ceci+"</div>")
	if(gauche!=null&&haut!=null){positionnerObj(nom,gauche,haut)}
}
function redefinirObj(nom,ceci){
	if(document.all){document.all(nom).innerHTML=ceci}
	else if(document.getElementById){document.getElementById(nom).innerHTML=ceci}
	else if(document.layers){doc=document.layers[nom];doc.document.write(ceci);doc.document.close()}
}
function positionnerObj(nom,gauche,haut){
	if(document.all){document.all(nom).style.left=gauche;document.all(nom).style.top=haut}
	else if(document.getElementById){document.getElementById(nom).style.left=gauche+"px";document.getElementById(nom).style.top=haut+"px"}
	else if(document.layers){document.layers[nom].left=gauche;document.layers[nom].top=haut}
}
function cacherObj(nom){
	if(document.all){document.all(nom).style.visibility="hidden"}
	else if(document.getElementById){document.getElementById(nom).style.visibility="hidden"}
	else if(document.layers){document.layers[nom].visibility="hide"}
}
function voirObj(nom){
	if(document.all){document.all(nom).style.visibility="visible"}
	else if(document.getElementById){document.getElementById(nom).style.visibility="visible"}
	else if(document.layers){document.layers[nom].visibility="show"}
}
function xSouris(e){
	if(document.all){return(document.body.scrollLeft+event.clientX)}
	else if(document.getElementById){return(window.pageXOffset+e.clientX)}
	else if(document.layers){return(e.pageX)}
}
function ySouris(e){
	if(document.all){return(document.body.scrollTop+event.clientY)}
	else if(document.getElementById){return(window.pageYOffset+e.clientY)}
	else if(document.layers){return(e.pageY)}
}
</script>