Une jolie infobulle

[Gandalf]

Bonjour tout le monde;

Voilà, dans le cadre d'un projet de création de site j'ai cherché à faire une jolie infobulle (=popup) en javascript, parce que j'en trouvais pas des simples et propres (je parle au niveau du code source) sur google.

Voilà ce que je voulais, une infobulle qui suit la souris quand celle-ci se trouve sur le lien et qui contienne un texte variable pouvant contenir du html.

Cependant, cette infobulle ne doit pas géner la navigation de ce qui n'ont pas javascriptactif et doit être valide xhtml + css et tourné sur tous les navigateurs.

Voilà ce que je propose :


javascript

<script type="text/javascript">
<!--/*--><![CDATA[//><!--

window.onload = document.write("<span id='infobulle' style='position:absolute;visibility:hidden;padding:3px;'>&nbsp;</span>");

function infobulle(corps,event){
var couleur_fond = 'black';
var couleur_texte = 'white';
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>




Le lien

<a href="ok.htm" onmousemove="javascript:infobulle('ok',event);" onmouseout="javascript:infobulle_cache();">ok</a>


Démonstration (http://www.la-tribus.info/infobulle.php)

J'attend tous vos avis

[damieno45]

pas mal

[Progi1984]

Ce n'est pas valide XHTML 1.0 Strict.
J'ai une erreur :

line 10 column 125 - Warning: '<' + '/' + letter not allowed here

"<" + "/" + letter not allowed here

Cause:

The 2 characters "</" have been detected in a wrong place.
Solution:

In most case, this is due to wrong javascript:
BAD <document.write("</h1>");
GOOD <document.write("<\/h1>");
References:

W3C faq: http://validator.w3.org/docs/help.html#faq-javascript
HtmlHelp: http://www.htmlhelp.com/tools/validator/problems.html#script

[teto]

Très sympa,j'avais lgtps cherché un petit code propre comme ca.
C'est compatible opéra / Firefox ?

[Gandalf]

damieno45 : Merci :)

Progi1984 : C'est mieux? (j'ai mit à jour la page d'exemple)

teto : J'ai tester sous Internet Explorer et firefox, j'atend de voir si quelqu'un peut tester sous d'autres navigateurs...

[jeje78]

Sous opéra, (que je conseille :p) ca marche niquel

[Aranoth]

Idem sous Firefox 1.5, bon boulot.