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>

Recherche Infobulle multitexte coins arrondis en javascript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager