Bonjour je cherche à faire des infobulles sur mon site internet ...
Je ne trouve pas d'exemple simple a faire ...
[Note : ce message a été posté de manière anonyme avant d'être réattribué à son auteur]
la communauté d'entraide francophone dédiée au PHP
Info bulles
Si c'est d'une infobulle toute simple dont tu as besoin, l'attribut title des balises html peut peut être répondre à ton besoin.
Si tu veux y mettre un peu d'html, il existe des solutions assez simple en css ou en javascript... après tout dépend de ton besoin
Si tu veux y mettre un peu d'html, il existe des solutions assez simple en css ou en javascript... après tout dépend de ton besoin
Ce n'est pas en améliorant la bougie que l'on a inventé l'ampoule...
Alors si maintenant une fois dirigé sur le js j'ai trouvé des exemples avec des span qui sont parfait .
[Note : ce message a été posté de manière anonyme avant d'être réattribué à son auteur]
Code : Tout sélectionner
<script type="text/javascript">
<!--/*--><![CDATA[//><!--
window.onload = document.write("<span id='infobulle' style='position:absolute;visibility:hidden;padding:3px;'> </span>");
function infobulle(corps,event){
var couleur_fond = 'white';
var couleur_texte = 'black';
var couleur_bordure = 'gray';
var type_bordure = 'solid'; //(solid dashed dotted double)
var taille_bordure = '1px'; //px
document.getElementById('infobulle').style.color = couleur_texte;
document.getElementById('infobulle').style.backgroundColor = couleur_fond;
document.getElementById('infobulle').style.borderColor = couleur_bordure;
document.getElementById('infobulle').style.borderStyle = type_bordure;
document.getElementById('infobulle').style.borderWidth = taille_bordure;
document.getElementById('infobulle').innerHTML = corps;
document.getElementById('infobulle').style.visibility = 'visible';
document.getElementById('infobulle').style.left = event.clientX+10+"px";
document.getElementById('infobulle').style.top = event.clientY+20+"px";
}
function infobulle_cache(){
document.getElementById('infobulle').style.visibility = 'hidden';
}
//--><!]]>
</script><a href="#" onmousemove="javascript:infobulle('Mon aide',event);" onmouseout="javascript:infobulle_cache();">Bidule</a>
[Note : ce message a été posté de manière anonyme avant d'être réattribué à son auteur]
On peux reprendre le même principe en respectant le DOM - innerHtml ne fait pas partie des spécifications du DOM - et sans utiliser document.write() inutile dans ce contexte. Ce qui pourrait donner :
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script type="text/javascript">
<!--/*--><![CDATA[//><!--
function infobulle(texte,event){
if (this.conteneur = document.getElementById('infobulle'))
{
var texte = document.createTextNode(texte);
if (this.noeud) this.conteneur.removeChild(this.noeud);
this.noeud = this.conteneur.appendChild(texte);
this.conteneur.style.visibility = 'visible';
this.conteneur.style.left = event.clientX+10+"px";
this.conteneur.style.top = event.clientY+20+"px";
}
}
function infobulle_cache(){
if (this.conteneur = document.getElementById('infobulle'))
this.conteneur.style.visibility = 'hidden';
}
//--><!]]>
</script>
<style type="text/css">
#infobulle {
position: absolute;
visibility: hidden;
padding: 3px;
color: black;
background: white;
border: 1px solid gray;
}
</style>
</head>
<body>
<div>
<span id = "infobulle"></span>
<a href="#" onmousemove="infobulle('Aide Bidule',event);" onmouseout="infobulle_cache();">Bidule</a>
<a href="#" onmousemove="infobulle('Aide Bobole',event);" onmouseout="infobulle_cache();">Bobole</a>
</div>
</body>
</html>Oui j'ai jeter un coup d'oeuil ça l'air pas mal du tout ...Tu as un script tout fait, personnalisable (en css ou js) qui s'appelle Boxover.
Autre petite question quelqu'un à une idée pour mettre une image dans mes infobulles ? (du genre mini capture d'écran etc ...)
En reprenant le principe du code que j'ai donné plus haut, et pour continuer à te montrer la création d'éléments avec le DOM, on peut faire par exemple :
mais il y a plus simple :
Dans les deux cas il te faudra une fonction pour préloader tes images :
http://www.phpfrance.com/forums/voir_re ... php#243592
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script type="text/javascript">
<!--/*--><![CDATA[//><!--
function infobulle_img(image,event){
if (this.conteneur = document.getElementById('infobulle_image'))
{
this.s_content = document.createElement("img");
this.s_content.setAttribute("src", image);
this.s_content.setAttribute("alt", '');
if (this.noeud_img) this.conteneur.removeChild(this.noeud_img);
this.noeud_img = this.conteneur.appendChild(this.s_content);
this.conteneur.style.visibility = 'visible';
this.conteneur.style.left = event.clientX+10+"px";
this.conteneur.style.top = event.clientY+20+"px";
}
}
function infobulle_img_cache(){
if (this.conteneur = document.getElementById('infobulle_image'))
this.conteneur.style.visibility = 'hidden';
}
</script>
<style type="text/css">
#infobulle_image {
position: absolute;
visibility: hidden;
}
#infobulle_image img{
border: 1px solid gray;
}
</style>
</head>
<body>
<div>
<span id = "infobulle_image"></span>
<a href="#" onmousemove="infobulle_img('chemin_de_ton_image1',event);" onmouseout="infobulle_img_cache();">Bidule image</a>
<a href="#" onmousemove="infobulle_img('chemin_de_ton_image2',event);" onmouseout="infobulle_img_cache();">Bobole image</a>
</div>
</body>
</html>Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script type="text/javascript">
<!--/*--><![CDATA[//><!--
function infobulle_im(image,event) {
if (this.conteneur = document.getElementById('infobulle_i'))
{
this.conteneur.src = image;
this.conteneur.style.visibility = 'visible';
this.conteneur.style.left = event.clientX+10+"px";
this.conteneur.style.top = event.clientY+20+"px";
}
}
function infobulle_i_cache(){
if (this.conteneur = document.getElementById('infobulle_i'))
this.conteneur.style.visibility = 'hidden';
}
//--><!]]>
</script>
<style type="text/css">
#infobulle_i {
position: absolute;
visibility: hidden;
border: 1px solid gray;
}
</style>
</head>
<body>
<div>
<img id = "infobulle_i" src="" alt="" />
<a href="#" onmousemove="infobulle_im('chemin_de_ton_image1',event);" onmouseout="infobulle_i_cache();">Bidule image</a>
<a href="#" onmousemove="infobulle_im('chemin_de_ton_image2',event);" onmouseout="infobulle_i_cache();">Bobole image</a>
</div>
</body>
</html>http://www.phpfrance.com/forums/voir_re ... php#243592