Recherche Infobulle multitexte coins arrondis en javascript

Version imprimable

15/02/2008, 07h38
fabiofabio

Recherche Infobulle multitexte coins arrondis en javascript

Voila, je vous fais un appel car j'ai vraiment du mal à trouver une infobulle qui me correspondrait. ;)
Ça fait un moment que je cherche sur internet mais je ne trouve pas ! :(

Je cherche une infobulle jolie, avec les coins arrondis, où je pourrais choisir la couleur.:oops:

Et de préférence en javascript car je vais mettre une variable chaine qui peut-être plus ou moins longue ( car je pense qu'en CSS on ne peut pas le faire)

Voilà, je vous remercie de vos conseils et de poster des liens qui correspondent:D
15/02/2008, 09h04
le_chomeur

Salut :)
as tu regardé la fac ?
celle ci ne te corespondrait-ele pas ?
http://javascript.developpez.com/faq...ript#InfoBulle

Pour les coins avec arrondis ET changement de couleur, désolé mais je ne pense pas que cela sois possible, par contre tu peux créer plusieurs fond avec des couleurs différente en gif ...
15/02/2008, 09h09
SpaceFrog

pourquoi serait-ce impossible ?
fais une recherche sur google avec 'krazy korners' ...

Sinon il y a l'excellente librairie prototype window ...
15/02/2008, 09h15
le_chomeur

modifier la couleur d'un élément a bord arrondis ?????
Edit : ok , autant pour moi , je connaissais cette méthode de div et span imbriqué , mais je la trouve un peu lourde , mais bon pourquoi pas ;)
encore mes excuses :
c'est possible de créer une infobulle a bord arrondis et changeant de couleur
15/02/2008, 09h17
SpaceFrog

ben oui ...
http://www.saftair.com dans le catalogue produit, les cartouches ont des angles arrondis

Allez pour me faire pardonner de mon ignorance ;)
voila une infobulle comme tu le souhaitais je pense :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
.raised {background: transparent; width:300px; margin:0 auto; position:absolute;top:35px; left:10px; display:none;}
.raised h1, .raised p {margin:0 10px;}
.raised h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.raised p {padding-bottom:0.5em;}
 
.raised .top, .raised .bottom {display:block; background:transparent; font-size:1px;}
.raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {display:block; overflow:hidden;}
.raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {height:1px;}
.raised .b2 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #eee;}
.raised .b3 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #ddd;}
.raised .b4 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #aaa;}
.raised .b4b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #999;}
.raised .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #999;}
.raised .b2b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #999;}
 
 
.raised .b1 {margin:0 5px; background:#fff;}
.raised .b2, .raised .b2b {margin:0 3px; border-width:0 2px;}
.raised .b3, .raised .b3b {margin:0 2px;}
.raised .b4, .raised .b4b {height:2px; margin:0 1px;}
.raised .b1b {margin:0 5px; background:#999;}
.raised .boxcontent {display:block;  background:#ccc; border-left:1px solid #fff; border-right:1px solid #999;}
 
.test{
	position:relative;
}
.test:hover .raised{
	display:block;
}
</style>
</head>
 
<body>
 
 
 
<a href="#" class="test">Salut a tous
<div class="raised">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<div class="boxcontent">
 
<h1>3D Raised</h1>
<p>
 
Rounded corners with raised borders <br />
Rounded corners with raised borders <br />
Rounded corners with raised borders <br />
Rounded corners with raised borders <br />
Rounded corners with raised borders <br />
Rounded corners with raised borders <br />
Rounded corners with raised borders <br />
Rounded corners with raised borders <br />
Rounded corners with raised borders <br />
Rounded corners with raised borders <br />
Rounded corners with raised borders <br />
</p>
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div>
</a>
</body>
</html>

16/02/2008, 19h35
fabiofabio
héy, :king: hey, :king: le_chomeur, :king: t'es :king: terrible :king: comme :king: type !!! :yaisse2: :yaisse2: :yaisse2:

En plus, le script fonctionne sur mon tableau ou ma "table". 8-)

Il est vraiment vraiment bien le code l mais pas évident à comprendre et je n'ai pas tout compris (Au passage, si tu as liens ou un cours, ça serait sympa):aie:

J'ai réussi à changer la couleur de l'infobulle => c'est vraiment sympa ;)

Je ne mets pas ce post en "résolu" car j'ai tout de même 2 remarques::oops:
- le code ne fonctionne pas sur IE6 mais bon on ne peut pas tout avoir...:roll:
- lorsque la bulle se trouve sur la droite de la page, la bulle est cachée et il est difficile de la voir, c'est dommage, si on peut faire quelques choses? ça serait vraiment bien :?
18/02/2008, 09h33
le_chomeur

Citation:

* le code ne fonctionne pas sur IE6 mais bon on ne peut pas tout avoir...
* lorsque la bulle se trouve sur la droite de la page, la bulle est cachée et il est difficile de la voir, c'est dommage, si on peut faire quelques choses? ça serait vraiment bien

Pour ie6 désolé , j'ai utilisé la partie css que spaffy avait donné en lien ...
Pour l'autre souçis , concernant la position de l'infobulle, la c'est un peu plus compliqué, il faudrait un petit script pour détecter la position de l'élément qui va afficher l'info-bulle et la repositionner selon le bord droit ou le bas de la page ...
18/02/2008, 12h38
fabiofabio

Je pensais recréer exactement le même CSS avec une position droite et une position gauche

qu'en penses-tu?
18/02/2008, 13h31
le_chomeur

Le problème reste entier , car imagine que tu es un texte a taper , et la fameuse infobulle ...
selon la résolution de l'utilisateur elle pourrait très bien se retrouver a droite ou après un retour a la ligne à gauche :).
Il te faut donc une fonction te permettant de positionner ton info-bulle en fonction de la position de ton élément appelant l'infobulle.

fait une petite recherche sur les positions d'éléments ;)
18/02/2008, 13h38
fabiofabio

Question bete mais en CSS ou en JAVASCRIPT?
18/02/2008, 13h55
Bisûnûrs

En cherchant "infobulle css" sur Google on trouve ce genre d'article :
http://www.peutetreunereponse.net/article-6614978.html
18/02/2008, 14h12
le_chomeur

oui mais l'article ne donne pas d'info concernant le positionnement de l'info-bulle ni comment en créer une avec des bord arrondis...
concernant ton souçis de positionnement fabiofabio , c'est en javascript que cela va se gèrer ...
18/02/2008, 14h33
Bisûnûrs

Citation:

Envoyé par le_chomeur

l'article ne donne pas d'info concernant le positionnement de l'info-bulle

C'est dans le code CSS. ^^

Citation:

Envoyé par le_chomeur

ni comment en créer une avec des bord arrondis...

Il suffit de modifier les images et/ou d'en rajouter dans le code CSS.
18/02/2008, 14h49
le_chomeur
Citation:

Citation:
Envoyé par le_chomeur Voir le message
l'article ne donne pas d'info concernant le positionnement de l'info-bulle
C'est dans le code CSS. ^^

Pas justement en fonction du bord droit ou en bas de page ;)
si le lien est tout a droite de l'écran l'infobulle apparaitra en faisant apparaitre la scrollbar horizontale et si il est tout en bas, celle vertical ;)
Code:

1 2 3 ni comment en créer une avec des bord arrondis... Il suffit de modifier les images et/ou d'en rajouter dans le code CSS.
Par rapport a la demande de l'utilisateur qui souhaite pouvoir changer de couleur, c'était justement trop restrictif avec des images ;)
19/02/2008, 08h44
fabiofabio

Il est vrai que lorsque l'infobulle est tout à droite de l'écran, il y a le scroll bar horizontal qui s'affiche mais dès que l'on quitte l'infobulle, le scroll bar disparait.

Comme prévu, j'ai fait 2 css : le premier pour une bulle à gauche et le 2ème pour une bulle à droite.
En faisant cela, ça fonctionne, c'est un peu redondant mais ça fonctionne.:roll:

Voila, merci merci .. allez c'est parti pour le mettre en résolu 8O

bye bye et merci pour tout (ceci, cela, pou ça pour ceci....;))