[Résolu]Bulles d'info

Bonjour

Sauriez-vous comment faire des petites bulles d'information comme ce site-là
http://www.celeonet.fr/_comparatif

C'est du javascript, là, je pense
mais s'il était possible de faire des petites bulles comme ça en choisissant la couleur du fond, du contour,... en []CSS, ça m'intéresserait davantage.
J'ai regardé du côté des <abbr>, mais ceux-ci ne semblent pas pouvoir être designé

Donc, connaissez-vous un moyen de faire ça ?
même en javascript, je serai content


Merci d'avance
Cordialement,
Lours

( PS : j'ai posté dans javascript, car à l'origine c'en est,... mais si vous pensez que ce post à plus sa place dans CSS, changez-le de place )
Modifié par Lours (22 Jan 2006 - 16:31)

Bonjour Lours,

Voici un article alsacreations qui pourrait être un début de solution ?

Bonjour,
Utilise l'attribut title, il est certes moins beau, mais plus accessible et tout spécialement conçu pour cet usage.

papillon41 a écrit :
Bonjour Lours,

Voici un article alsacreations qui pourrait être un début de solution ?

Merci ça répond en gros à mes attentes
Je vais essayer de modifier un peu pour voir comment affichier juste au dessus du lien en question.

a écrit :

Bonjour,
Utilise l'attribut title, il est certes moins beau, mais plus accessible et tout spécialement conçu pour cet usage.

Je cherchais quelque chose de modifiable, si je ne trouve pas de solutions, je me rabeterais sur cette solution

Cordialement,
Lours

Salut,

ben comme par hasard j'étais en train de m'amuser à essayer d'obtenir ce genre d'effet à partir du contenu de l'attribut title des liens.


Voici ce que celà donne :

function beautifulTitle() {
var referent=document.body;
var new_title=document.createElement("p");
referent.insertBefore(new_title,referent.firstChild);
new_title.id="new_title";


document.getElementById('new_title').style.display="none";

var liens=document.getElementsByTagName('a');
for(var i=0 ; i<liens.length; ++i)

{
liens[i].onfocus=liens[i].onmouseover=function() {

var comment=this.title;
if (comment) {
document.getElementById('new_title').innerHTML=comment;
document.getElementById('new_title').style.display="block";
this.title="";
}
}
liens[i].onblur=liens[i].onmouseout=function() {
this.title=document.getElementById('new_title').innerHTML;
document.getElementById('new_title').style.display="none";
document.getElementById('new_title').innerHTML="";
}

}

}
window.onload=beautifulTitle;

il resterait à styler p#new_title pour qu'il apparaisse comme on le souhaite.

si le javascript n'est pas activé alors on se retrouve avec des title "normaux".

Le petit plus c'est que du coup on a accès au contenu des title même en navigation clavier.

ps :
sympa ce petit effet d'italique

du coup il faut penser à modifier liens.onfocus en liens"crochet" i "crochet".focus[/i][/i][/i][/i]
Modifié par clb56 (15 Dec 2005 - 13:57)

un petit lien pour voir ce que ça donne en ligne :

page test

à l'arrache pour le stylage.

Ah oui ! le script sans italique
Modifié par clb56 (15 Dec 2005 - 15:40)

Bonjour clb56
Merci pour la réponse

Je vais essayer cette solution.

Par contre je ne sais pas s'il y a le même problème, mais comme je voudrais que la bulle soit afficher par exemple à 20px en haut et 20px à droite du lien. pour la solution uniquement en CSS, j'ai essayé en mettant des coordonnées négatives, la "bulle" se trouvait bien en haut à droite, mais elle ne mesurait plus les 150px*200px, elle devenait minimale en taille.

Je vais tester ta solution

Merci
Modifié par Lours (15 Dec 2005 - 15:54)

Bonsoir,
Ne serait-ce pas quelque chose comme ce qui est en application sur le site de Doc Demo (ce n'est pas une référence, mais bon).

Cela fonctionne (paru dans Point net n°92 de janvier 2005). Si vous ne pouvez pas vous le procurer j'ai fait un petit topo ici.
Mis en application dans une base de données protégée avec un mot de passe : il suffit de modifier le code. Vous n'aurez pas de mal à comprendre sinon je veux bien développer...
Dans une page avec un doctype transitionnel cela devrait être valide.

Pour voir le test dans le contenu de la page cliquer sur le 2 liens suivant dans la phrase : "Depuis janvier 2000..."

Coté code, il me semble "sécure" et il est valide en Xhtml 1.0 ...
A la "va vite" : j'ai juste séparé la feuille de style et le fichier.js que j'ai renommé sans les modifier.

Il est possible de personaliser la présentation.
Si cela peut vous aider.

Vous pouvez toujours voir sur "Alexandria" (ce n'est pas non plus une référence ) une solution toute faite.

Amicalement

ps: fonctionne sur Opéra, Firefox et IE si active scrpiting est activé
Modifié par ivision18000 (19 Feb 2006 - 23:09)

Bonjour !
Désolé pour le temps de réponse...

Merci pour ces liens.
Je pense que je me débrouillerai avec tout ça !
Merci beaucoup !

Lours

Si le sujet est considéré comme résolu, n'oublie pas de l'indiquer dans le titre.