Création d'une Info Bulle 100% paramétrable. IE / Mozilla

[Ssin]

Tutorial : Création d'une Infobulle personalisable, multiligne pouvant inclure du PHP, de l'HTML, etc ... compatible IE / Mozilla FireFox

Niveau : Débutant ( Il n'y a que à replir les <div> )

Temps : Le temps de taper votre Texte

Language : PHP, CSS, HTML

Démo : ici


Voila comment nous allons procéder :

Dans une première partie, nous allons définir le fichier style.css, qui définira l'aspect de votre infobulle.

Dans une seconde, nous allons creer le javascript pour déclencher l'infobulle.

Dans une troisième, nous créerons l'infobulle dans votre script PHP



¤ Fichier : style.css

Code PHP :

<?php 

<style type="text/css">

                            .infobulle{

                        

position: absolute;    

                        

visibility : hidden;

                        

border: 1px solid Black;

                

padding: 10px;

                            

font-family: Verdana, Arial;    // Définissez ici la police de votre Infobulle 

                            

font-size: 10px;    // Définissez ici la taille de votre Infobulle 

                        

background-color: #FFFFCC;    //Si vous ne mettez pas de "fond d'écran dans votre infobulle, cela sera la couleur d'arrière plan

                        

background-image: url(images/content_footer.jpg);     //Vous pouvez ici définir une couleur d'arrière plan pour votre infobulle

                        

width : 400px;     // La largeur de votre infobulle

                                        }



</style> 

[orditeck]

L'aide pour ce tutoriel ce trouve à cette adresse :
http://www.jeuweb.org/board/showthread.php?tid=235

[golradir]

Bonjour, j'ai essayé ce code et j'ai eu un petit soucis.
L'info bulle fonctionne, mais il a des espaces comme ceci



Voici le code ...
Comment faire pour que le texte et image soit bien aligné en haut a droite ?

Code PHP :

<?php 

<style type="text/css">

                                        .infobulle{

                                            position: absolute;    

                                            visibility : hidden;

                                            border: 1px solid Black;

                                            padding: 30px;

                                            font-family: Verdana, Arial;

                                            font-size: 14px;

                                            background-color: #FFFFCC;

                                            background-image: url(interface/fondbg3.jpg);

                                            width : 120px;

                                        }

                                </style>



<script language="javascript" type="text/javascript">

                <!--

                var Mouse;

document.onmousemove = DoMouse;

function DoMouse(e) {

        Mouse = (typeof e == 'undefined') ? window.event : e;

}



function montre(id) {

        var Infobulle = document.getElementById('infobulle-'+id)

        if(Infobulle) {

                Infobulle.style.visibility = 'visible';

                

                if(document.documentElement) {

                

                        Infobulle.style.left = Mouse.clientX + document.documentElement.scrollLeft + 20 + 'px';

                        Infobulle.style.top =  Mouse.clientY + document.documentElement.scrollTop + 10 + 'px';

                }

                else {

                

                        Infobulle.style.left = Mouse.clientX + document.body.scrollLeft + 20 + 'px';

                        Infobulle.style.top =  Mouse.clientY + document.body.scrollTop + 10 + 'px';

                }

        }

}



function cache(id) {

    setTimeout('docache('+id+')', 0); // Le nombre représent le delai en millisecondes

}

function docache(id) {

        var Infobulle = document.getElementById('infobulle-'+id)

        if(Infobulle) {

                Infobulle.style.visibility = 'hidden';

        }

}



                

                //-->

                </script> 

[keke]

Beau déterrage de topic ! 3 ans...

[golradir]

Je sais ... mais comme j'ai eu le code la ..

[Anthor]

background-position?

[Argorate]

Beau déterrage de topic ! 3 ans...

Au moins on ne peux pas lui reprocher de créer un nième topic ^^
Il utilise ceux qui traite deja du sujet, c'est bien!