[POO] shape + couleur fond

Version imprimable

bonjour,

j'ai créer un bouton, j'ai changer la couleur du texte mais je n'arrive pas à changer la couleur de fond!!!

voici mon code :

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
 
boutoncolor.prototype.init = function(svgId, objectName)
{
    boutoncolor.parent.init.call(this, svgId, objectName, false);
 
 
    // Retreive boutoncolorOn shape    
    this.m_shapeboutoncolorOn = getVisiogroup(this.m_SvgNode, "boutoncolorOn");
    this.m_shapeboutoncolorOnStyle = this.m_shapeboutoncolorOn.getStyle();
 
    // Retreive boutoncolorOff shape
    this.m_shapeboutoncolorOff = getVisiogroup(this.m_SvgNode, "boutoncolorOff");
    this.m_shapeboutoncolorOffStyle = this.m_shapeboutoncolorOff.getStyle();
 
    // Retreive BBox of text
    this.m_groupElemText = getVisiogroup(this.m_SvgNode, "boutoncolorText");
    this.m_bboxElem = getChildNodeFromName(this.m_groupElemText, "rect")
    this.m_bbox = this.m_bboxElem.getBBox();
 
    // Retreive focus shape
    this.m_shapeFocus = getVisiogroup(this.m_SvgNode, "ShapeFocus");
    this.m_shapeFocusStyle = this.m_shapeFocus.getStyle();
    this.m_shapeFocusStyle.setProperty("visibility","hidden");   
 
    // Add text node
    this.m_textElemBase = createChild(this.m_groupElemText, "text");
}
 
/*********************************************************
* Callback for refresh event
*********************************************************/
boutoncolor.prototype.OnRefresh = function()
{	
 
var value = this.m_arrayValueDefinition[0].getValue();
 
    var coltext = texte_couleur;
    var red = Math.round((coltext & 0x000000FF) >> 0);
    var green = Math.round((coltext & 0x0000FF00) >> 8);
    var blue = Math.round((coltext & 0x00FF0000) >> 16);
    var fill = "fill:rgb("+ red +","+ green+","+blue+")";
 
    var fontSize;
    fontSize = GetVisioPropAsInt(this.m_SvgNode, "boutoncolorSize");
    var size = "font-size:" + fontSize;
    var baseline = "baseline-shift:0%"
    var fontType = "font-family:Arial Unicode MS"
    this.m_textElemBase.setAttribute("style", fill + ";" + size + ";" + baseline+ ";" + fontType);
 
    var colback = rect_couleur;
    red = Math.round((colback & 0x000000FF) >> 0);
    green = Math.round((colback & 0x0000FF00) >> 8);
    blue = Math.round((colback & 0x00FF0000) >> 16);
    var back = "fill:rgb("+ red +","+ green+","+blue+")";
 
 this.m_shapeboutoncolorOn.setAttribute("style", back);
 
}

je pensé que la couleur de fond se changer pour la shape OK grace à :

Code:

this.m_shapeboutoncolorOn.setAttribute("style", back);

merci

07/04/2008, 11h11
jojodu31

http://www.developpez.net/forums/sho...bouton+couleur

peut etre cela t aidera un peu ....

:recherch:
07/04/2008, 11h47
cortex59

bonjour,

merci pour le lien. j'ai essayer ceci :

Code:

this.m_shapeboutoncolorOn.style.backgroundColor='red';

a la place de :
[CODE] this.m_shapeboutoncolorOn.setAttribute("style", back);CODE]

cela me fai la même chose c'est a dire aucune erreur mais pas la couleur de fond ne s'affiche pas.
est ce que this.m_shapeboutoncolorOn est le bon objet d'aprés vous??

merci
07/04/2008, 14h13
cortex59

bonjour,

est ce que quelqu'un a developer un bouton du meme type que :
Envoyer la reponse lorsque je clique dessus on voit le Bp faire une action mais avec le fond gris qui peu être changer ainsi que la couleur du texte

merci d'avance
07/04/2008, 14h22
madevilts

Pour pouvoir faire tout ce que tu veux, je te conseille d'utiliser un lien.

De ce fait, tu pourrais y intégrer une icone et tu peux tout faire dessus. Gérer les couleurs, l'image de fond si tu le souhaites et tout ceci indépendamment lors du hover ou du click.
07/04/2008, 14h29
cortex59
je me suis mal exprimer je voudrai créer un Bouton 3D mais pas gris

le bouton est créer (en plus il fonctionne comme je veu), la couleur du texte change grace a :

Code:

this.m_textElemBase.setAttribute("style", fill + ";" + size + ";" + baseline+ ";" + fontType);

Mais je n'arrive pas a changer la couleur du bouton. j'ai essayé :
Code:

1 2 3 4 5 this.m_shapeboutoncolorOn.setAttribute("style", back); //OU this.m_shapeboutoncolorOnStyle.setProperty("style", back); //OU this.m_shapeboutoncolorOn.style.backgroundColor='red';
pas d'erreur mais pas de changement de couleur il reste gris!!!

merci

Un petit bout de code CSS a mettre dans HEAD, STYLE

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
 
a.bouton
{
	border-top:1px solid E88;
	border-left:1px solid E88;
	border-bottom:1px solid B44;
	border-right:1px solid B44;
	background-color:D55;
	color:black;
	text-decoration:none;
	padding:2 2 2 2;
	margin:1px;
	height:18px;
	font-size:12px;
	vertical-align:middle;
}
 
a:hover.bouton 
{
	border-top:1px solid B44;
	border-left:1px solid B44;
	border-bottom:1px solid E88;
	border-right:1px solid E88;
	background-color:C33;
}
 
.bouton img
{
	vertical-align:middle;
}

Plus qu'à faire ton bouton

Code:

<a href="#" class="bouton" onclick="alert('tada');"> TextDuBouton </a>

07/04/2008, 16h45
cortex59

OK mais j'utilise pas de CSS et j(ai pas de balise.

c pour faire du SGV

merci
07/04/2008, 16h47
SpaceFrog

oui donc encore une fois SVG n'a pas grand chose à voir avec javascript ...

c'est toujours la même syntaxe avec le fill ...
08/04/2008, 10h48
madevilts

Citation:

Envoyé par cortex59

OK mais j'utilise pas de CSS et j(ai pas de balise.

c pour faire du SGV

merci

Ah... ben je peux rien pour toi, je ne connais pas SVG.