Recherche Infobulle multitexte coins arrondis en javascript

**fabiofabio** · 15/02/2008, 07h38

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.

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

**le_chomeur** · 15/02/2008, 09h04

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 ...

**SpaceFrog** · 15/02/2008, 09h09

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

Sinon il y a l'excellente librairie prototype window ...

**le_chomeur** · 15/02/2008, 09h15

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

**SpaceFrog** · 15/02/2008, 09h17

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

**le_chomeur** · 15/02/2008, 11h22

Allez pour me faire pardonner de mon ignorance

voila une infobulle comme tu le souhaitais je pense :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**fabiofabio** · 16/02/2008, 19h35

héy,

hey,

le_chomeur,

t'es

terrible

comme

type !!!

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

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)

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:

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

**le_chomeur** · 18/02/2008, 09h33

* 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 ...

**fabiofabio** · 18/02/2008, 12h38

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

qu'en penses-tu?

**le_chomeur** · 18/02/2008, 13h31

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

**fabiofabio** · 18/02/2008, 13h38

Question bete mais en CSS ou en JAVASCRIPT?

**Bisûnûrs** · 18/02/2008, 13h55

En cherchant "infobulle css" sur Google on trouve ce genre d'article :
http://www.peutetreunereponse.net/article-6614978.html

**le_chomeur** · 18/02/2008, 14h12

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 ...

**Bisûnûrs** · 18/02/2008, 14h33

Envoyé par le_chomeur

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

C'est dans le code CSS. ^^

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.

**le_chomeur** · 18/02/2008, 14h49

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**fabiofabio** · 19/02/2008, 08h44

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.

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

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

)

Recherche Infobulle multitexte coins arrondis en javascript

JavaScript

Discussions similaires

Partager

Partager