11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Infobulle compatible tout nav et plateforme

Bonjour,

Je ch à pouvoir faire apparaître sur un mot ou texte ou lien une infoBulles qui soit compatible tout navigateur et ce sous Mac et Windows.
Je souhaite quelle apparaîsse à gauche du curseur facilitant ainsi ca lecture.
J'ai trouvé se script qui à l'avantage de pouvoir s'afficher sur les différents nav (pas eu le temps de le tester sur les plus connu), mais qui à l'incovéniant de s'afficher à droite.



<head>

<!-- Modifier cette feuille de style pour modifier l'apparence de la bulle //-->
<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;
}
</style>
</head>
		
<body style="width:2000px;">
<script language="javascript" type="text/javascript">
<!--
function GetId(id)
{
return document.getElementById(id);
}
var i=false; // La variable i nous dit si la bulle est visible ou non
function move(e) {
if(i) {  // Si la bulle est visible, on calcul en temps reel sa position ideale
if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE
GetId("curseur").style.left=e.pageX + 5+"px";
GetId("curseur").style.top=e.pageY + 10+"px";
}
else { // Modif proposé par TeDeum, merci à lui
if(document.documentElement.clientWidth>0) {			        GetId("curseur").style.left=20+event.x+document.documentElement.scrollLeft+"px";	GetId("curseur").style.top=10+event.y+document.documentElement.scrollTop+"px";
}
else {		        GetId("curseur").style.left=20+event.x+document.body.scrollLeft+"px";        GetId("curseur").style.top=10+event.y+document.body.scrollTop+"px";
}
}
}
}
function montre(text) {
if(i==false) {
GetId("curseur").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securité) on le rend visible.
GetId("curseur").innerHTML = text; // Cette fonction est a améliorer, il parait qu'elle n'est pas valide (mais elle marche)
 i=true;
}
}
function cache() {
if(i==true) {
GetId("curseur").style.visibility="hidden"; // Si la bulle etais visible on la cache
i=false;
}
}
document.onmousemove=move; // des que la souris bouge, on appelle la fonction move pour mettre a jour la position de la bulle.
//-->
</script>
<div id="curseur" class="infobulle"></div>  <!-- Vous pouvez mettre ce div n'importe ou dans le body ! //-->
<p>Pour vous montrer que même avec un scroll, la bulle a toujours sa position !</p>
<p>Saut de ligne Blablatage</p>
<p>Saut de ligne Blablatage</p>
<p>Saut de ligne Blablatage</p>
<p>Saut de ligne Blablatage</p>
<p>Saut de ligne Blablatage</p>
<p>Saut de ligne Blablatage</p>

<p>Saut de ligne Blablatage</p>

<p onmouseover="montre('Ici je met tout le texte que je veut, <b>meme de l\'html</b> !');" onmouseout="cache();">Un paragraphe avec une info bulle !</p>
<!-- Aide: Penser a bien echapé tous les ' avec des \ !! (comme ca: \' ) //-->

<p><a href="http://mobman02.free.fr/blog/" onmouseover="montre('Blog du createur de cette source');" onmouseout="cache();">Un lien avec une info bulle</a></p>

<p>Saut de ligne Blablatage</p>
<p>Saut de ligne Blablatage</p>
<p>Saut de ligne Blablatage</p>
<p>Saut de ligne Blablatage</p>

<p>Saut de ligne Blablatage</p>
<p>Saut de ligne Blablatage</p>
<p>Saut de ligne Blablatage</p>
<p>Saut de ligne Blablatage</p>
<p>Saut de ligne Blablatage</p>
<p><b>Explication rapide</b><br/>
Pour mettre une info-bulle au passage de la souris sur un element, il faut lui donner les deux attribus suivant :<br />
onmouseover="montre('VOTRE TEXTE');" onmouseout="cache();"<br />
Voila, c'est tout !<br />

Pour l'installation, vous devez recopier le code CSS et le code javascript contenue sur cette page, et mettre cette ligne de code &lt;div id="curseur" class="infobulle"&gt;&lt;/div&gt; dans le body de votre page (N'importe ou !).<br />


Merci de votre aide !!
Modifié par Gobelin (14 Mar 2007 - 10:52)
Salut,

Cette attribut ne conviens pas, car mes infos viens d'une BDD et donc dynamique, et de plus sont sur certain éléments avec ou sans liens présenté dans un tableau dynamique.

@++
Gobelin a écrit :
Cette attribut ne conviens pas, car mes infos viens d'une BDD et donc dynamique
Et qu'est-ce qui t'empêche exactement d'utiliser des données dynamiques pour tes attributs title ?
Gobelin a écrit :
et de plus sont sur certain éléments avec ou sans liens présenté dans un tableau dynamique.
L'attribut title n'est pas du tout réservé aux liens. Smiley smile
J'ai utilisé le script si dessus et cela fonctionne correctement sur tout les nav ainsi que sur Mac et windows.
Gobelin a écrit :
J'ai utilisé le script si dessus et cela fonctionne correctement sur tout les nav ainsi que sur Mac et windows.
Comme tu veux... Smiley rolleyes
Administrateur
Gobelin a écrit :

<body style="width:2000px;">


Hmm je crois que ce simple extrait démontre la bancalité de ce code Smiley decu
Je trouve qu'il y quand même quelque situation ou une infobulle ce justifie.
- Quand on veut faire apparaitre une image
- Quand le texte est long car dans ce cas, l'attribut title l'affiche sur une seule ligne, et donc en coupe une partie.

Bien sur ça ce discute...

Par contre c'est difficile de faire une bonne infobulle, propre, accesible, inobstrusive, et a ma connaissance je ne croit pas qu'il en existe de toute faite de bonne qualitée. L'idée d'une bonne infobulle ce n'est pas qu'elle se place ni a droite, ni a gauche mais au bonne endroit en fonction de la position du lien de la taille de la fenêtre et de la taille de l'infobulle. Il faut eviter les "sauts" que peuvent génerer l'infobulle si par exemple elle sort de la page.
<remarque hors sujet >

matmat a écrit :
inobstrusive


Est ce que c'est du langage des îles Kerguelen ca aussi ? Smiley biggrin

Si oui peut tu le traduire pour les néophytes ?

</remarque hors sujet>
ça veut dire:"planche servant a surfer vers les iles Java" Smiley lol

Non plus serieusement, je sait pas trop comment on dit en français, c'est un mot anglais mal écrit qui veut dire que le script n'est pas mélangé au html.

Par exemple il n'y a pas de "a onmouseover = "infoBulle()". Dans l'ideal il n'y pas dutout de javascript dans le html mais un script a part qui agit sur le html via des selecteurs (par exemple getElementById).
en fait je pensais a javascript non intrusif, ou script non intrusif, parceque l'infobulle elle, elle incruste méchament dans la page... mais je chipote...
Sujet clos
Aller à