+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Création d'une Info Bulle 100% paramétrable. IE / Mozilla (/showthread.php?tid=133)
Création d'une Info Bulle 100% paramétrable. IE / Mozilla - Ssin - 01-09-2006
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>
¤ Fichier : infobulle.js
Code PHP :
<?php
<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+')', 3000); // Si vous désirez que votre infobulle reste affichée un certain moment ( ici, 3000 milliseconde, soit 3 secondes )
}
function docache(id) {
var Infobulle = document.getElementById('infobulle-'+id)
if(Infobulle) {
Infobulle.style.visibility = 'hidden';
}
}
//-->
</script>
¤ Fichier : votrepage.php
Code PHP :
<? // Inclusion des fichiers requis pour la création de l'info bulle
include 'style.css';
include 'infobulle.js';
//Ce type d'info bulle vous permet de creer plusieurs info bulle, chacun dans une <div> différentes, comme cela :
//La, on définie l'infobulle
echo '
<div id="infobulle-1" class="infobulle">Message Infobulle numero 1</div>
<div id="infobulle-2" class="infobulle">Message Infobulle numero 2</div>
<div id="infobulle-3" class="infobulle">Message Infobulle numero 3</div>
//La, on affiche l'infobulle
<a href="#" onmouseover="montre(1);" onmouseout="cache(1);">Vers l'infobulle 1</a>
<a href="#" onmouseover="montre(2);" onmouseout="cache(2);">Vers l'infobulle 2</a>
<a href="#" onmouseover="montre(3);" onmouseout="cache(3);">Vers l'infobulle 3</a>';
?>Vous pouvez également réunir vos script en une seul page ( c'est ce que je fait, car cela vous permet d'avoir un style d'infobulle différent à chaque page, et on s'y retrouve mieux.
De plus, même pas besoin d'avoir obligatoirement du PHP, voici un page entierement en HTML ( le PHP sert surtout pour glisser des variables dans vos infobulles
).Voila un exemple :
Code PHP :
<?php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>La Terre des Anciens</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.infobulle{
position: absolute;
visibility : hidden;
border: 1px solid Black;
padding: 10px;
font-family: Verdana, Arial;
font-size: 10px;
background-color: #FFFFCC;
background-image: url(images/box_content.jpg);
width : 400px;
}
</style>
</head>
<body>
<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>
<div id="infobulle-1" class="infobulle"><b>Message de l'infobulle 1</b></div>
<div id="infobulle-2" class="infobulle"><i>Message de l'infobulle 2</i></div>
<div id="infobulle-3" class="infobulle"><u>Message de l'infobulle 3</u></div>
<a href="#" onmouseover="montre(1);" onmouseout="cache(1);">Vers l'infobulle 1</a>
<a href="#" onmouseover="montre(2);" onmouseout="cache(2);">Vers l'infobulle 2</a>
<a href="#" onmouseover="montre(3);" onmouseout="cache(3);">Vers l'infobulle 3</a>
</body>
</html>
Voila, je vous aient exposé ma facon de faire les choses, donnez moi votre avis
RE: Création d'une Info Bulle 100% paramétrable. IE / Mozilla - orditeck - 01-09-2006
L'aide pour ce tutoriel ce trouve à cette adresse :
http://www.jeuweb.org/board/showthread.php?tid=235
RE: Création d'une Info Bulle 100% paramétrable. IE / Mozilla - golradir - 06-08-2009
Bonjour, j'ai essayé ce code et j'ai eu un petit soucis.
L'info bulle fonctionne, mais il a des espaces comme ceci
![[Image: gdfga.jpg]](http://img43.imageshack.us/img43/7830/gdfga.jpg)
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>
RE: Création d'une Info Bulle 100% paramétrable. IE / Mozilla - keke - 06-08-2009
![[Image: deterr22.jpg]](http://www.jyrousseau.com/deterr22.jpg)
Beau déterrage de topic ! 3 ans...
RE: Création d'une Info Bulle 100% paramétrable. IE / Mozilla - golradir - 06-08-2009
Je sais ... mais comme j'ai eu le code la ..
RE: Création d'une Info Bulle 100% paramétrable. IE / Mozilla - Anthor - 06-08-2009
background-position?
RE: Création d'une Info Bulle 100% paramétrable. IE / Mozilla - Argorate - 06-08-2009
(06-08-2009, 04:26 PM)keke a écrit : 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!