Discussion :

[Seth77]

Slu

est ce possible ? si oui comment fait on ?

thx @+

[franculo_caoulene]

Ssalut,

Le CSS n'est pas dynamique (à part quelques pseudo-classes), pour ce genre de chose il faut voir du coté de javascript.

[Seth77]

Ssalut,

Le CSS n'est pas dynamique (à part quelques pseudo-classes), pour ce genre de chose il faut voir du coté de javascript.

et si mon element a remplace est dans un div avec class ?

[franculo_caoulene]

Je ne comprends pas bien ce que tu veux faire à la base.

[Seth77]

Je ne comprends pas bien ce que tu veux faire à la base.

ben on m a dit que l on pouvais remplacer du texte par une image ...par exemple j ai le texte N1 dans un div ... et par css il remplace automatique le N1 par l image IMG1.jpg ... et pour N2 il remplacepar IMG2.jpg .... etc ...

[marsupix]

c'est tout à fait possible!

par exemple tu veu remplacer les caractères par un smiley dans ton texte (un exemple quelqconque hein...)

dans ton html tu met:

Code :

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

1
2
 
tu texte comme tu veux avec ici ton smiley <span class="smiley"><span>:)</span></span> et le tour est joué.

Dans ton css:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
// pour mettre l'image en fond du span "smiley"
.smiley{
width:...;  // la largeur de ton image
height:...;  // la hauteur de ton image
background:url('le/chemin/de/ton/image.gif') no-repeat;
}
// pour ne pas afficher le texte du span qui est dans le span "smiley"
.smiley span{
display:none;
}

[Seth77]

c'est tout à fait possible!

par exemple tu veu remplacer les caractères par un smiley dans ton texte (un exemple quelqconque hein...)

dans ton html tu met:

Code :

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

1
2
 
tu texte comme tu veux avec ici ton smiley <span class="smiley"><span>:)</span></span> et le tour est joué.

Dans ton css:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
// pour mettre l'image en fond du span "smiley"
.smiley{
width:...;  // la largeur de ton image
height:...;  // la hauteur de ton image
background:url('le/chemin/de/ton/image.gif') no-repeat;
}
// pour ne pas afficher le texte du span qui est dans le span "smiley"
.smiley span{
display:none;
}

merci je vais essaye !

Mais je ne comprend pas pourquoi tu mets deux span ?! 1 avec class et l autre sans rien !

[marsupix]

pour fixer l'image dans le premier et préciser que le texte qui est dedans (dans le 2e span) ne doit pas etre afiché car si tu met le display none sur celui qui a la class, il ne s'affichera pas et donc le résultat sera que tu as masqué le texte, mais sans afficher d'image...

Après ça dépend de ta page...

[Seth77]

ah ok ... merci !

[Seth77]

Marche pas ...j ai dans le html :

Code :

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

1
2
 
<SPAN CLASS="c_{VAL}"><SPAN>{VAL}</SPAN></SPAN>

dans le css

Code :

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

1
2
3
4
5
6
7
8
9
10
 
.c_1{
		width:116px;
		height:25px;
		background:url(pics/1.gif) no-repeat;
	}
 
	.c_0 span, .c_1 span, .c_2 span, .c_3 span, .c_4 span, .c_5 span{
		display:none;
	}

[Seth77]

Slu

etrangement cela marche sous IE mais pas sous FF .. est ce que qqn a une soluce ?

[marsupix]

ok je te donne un exemple concret de ce que j'ai pour afficher des images de boutons suivant et précédent à la place du texte:
html

Code :

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

1
2
3
4
<div id="nav">
<a class="prec"><span>[ photo précédente ]</span></a>
<a class="suiv"><span>[ photo suivante ]</span></a>
</div>

css

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
#nav a{
display:block;
float:left;
width:57px;
height:22px;
margin:20px;
}
 
#nav a.prec{
background:url('img/precedent.gif') no-repeat;
}
 
#nav a.suiv{
background:url('img/suivant.gif') no-repeat;
}
 
#nav a span{
display:none;
}

[Seth77]

merci ...

j ai trouve c le display:block qui me manquais ....