Membre de ClickFR, Reseau francophone Paie-Par-Click
Accueil
Accueil
- [ CSS : ] [ DHTML : ] [ HTML : ] [ JavaScript : ] [ Refs : ]
Accueil

DHTML
Apparitions / Disparitions

  Une infobulle mobile et personnalisable

fonction de ce script  principe de ce script  le script lui-meme  demonstration du script  telechargement du script  Compatibilite du script... a partir de : 

  Fonction
Le but de ce script est de faire apparaître une information à côté du pointeur de la souris pour expliciter une image ou un lien.
Cette information pourra prendre tous les attributs de texte communément admis avec fond de couleur...
  Principe
On commence par déclarer un calque vide sur la page, il accueillera ensuite le contenu des infobulles.
On détaille ensuite un script qui intercepte tous les mouvements du pointeur de la souris, c'est lui qui fournira les coordonnées en X et en Y pour le calque.
Enfin, on formate le contenu du calque pour y accueillir le texte attendu.

Comme beaucoup de script faisant appels aux claques, les instructions pour Netscape et pour Internet Explorer sont différentes.

Attention : le script doit être écrit ou appelé (script externe) APRES la déclaration du calque, sous peine de provoquer une erreur.
  Le script
dans la partie <body>
<!-- Création du calque qui accueillera l'infobulle -->
<div id="bulle" style="position: absolute; z-index: 2"></div>
<div id="antiscroll" style="position: absolute; z-index: 2"></div>

<script language="JavaScript">
// Détection du navigateur
ns4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;

// Décallage de l'infobulle par rapport au pointeur en X et en Y (en pixels)
decal_x = 10;
decal_y = 0;

// Création d'un raccourci pour manipuler le calque
var skn = (ns4) ? document.bulle : bulle.style;

// Instruction pour Netscape
if (ns4) document.captureEvents(Event.MOUSEMOVE);

// Interception des mouvements du pointeur
document.onmousemove = suivre_souris;


function pop(message) {

// Formatage de l'infobulle (ici un tableau bleu)
var contenu = "<table border='0' cellspacing='0' cellpadding='5' width='200'><tr><td bgcolor='#CCCCFF'>" + message + "</td></tr></table>";

// Instructions pour Netscape
if (ns4) {
skn.document.write(contenu);
skn.document.close();
skn.visibility = "visible";
}

// Instructions pour Internet Explorer
else if (ie4) {
document.all("bulle").innerHTML = contenu;
skn.visibility = "visible";
}
}

// Gestion du pointeur
function suivre_souris(e) {

// Création des variables de décallage
var x = (ns4) ? e.pageX : event.x + document.body.scrollLeft;
var y = (ns4) ? e.pageY : event.y + document.body.scrollTop;

// Cas particulier pour Internet Explorer sur Mac (les coordonnées de décallages sont modifiées)
if ( (navigator.userAgent.indexOf('Mac') != -1) && (navigator.userAgent.indexOf('MSIE') != -1) ) {
skn.left = x + decal_x - 135;
skn.top = y + decal_y - 155;
}

// Pour les autres cas, décallage normal du calque par rapport au pointeur
else {
skn.left = x + decal_x;
skn.top = y + decal_y;
}
}
</script>
  Démonstration
Sur un texte...

Une image classique :

Ou une image mappée :
  Téléchargement
Ce script est disponible en deux versions :
  • le script est intégré à la page où il agit,
  • le script est dans un fichier séparé de la page où il agit (fichier.js et fichier.html).

    L'intérêt d'un script dans un fichier séparé est de pouvoir le partager entre plusieurs pages html.
    Cela permet aussi de le rendre inaccessible à toute personne qui souhaiterai l'enregistrer pour une autre utilisation.
    		•
    Script intégré :
    app_infobulle.zip
    5 Ko    		 telechargez le script telechargez le script
    Script séparé :
    app_infobulle2.zip
    5 Ko
    Recherche
    		aide sur la recherche
    CSS 2
    HTML 4
    Javascript 1.3
    Références
    Aide générale
    hit-parade
    Votez TOP Ouaibe !

    statistiques
    aide sur les contacts aide sur la mailing-list aide sur la newsletter