Remplacer du texte par une image en css

Version imprimable

31/03/2006, 16h10
Seth77

Remplacer du texte par une image en css

Slu

est ce possible ? si oui comment fait on ?

thx @+
31/03/2006, 16h42
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.
31/03/2006, 16h44
Seth77

Citation:

Envoyé par 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.

et si mon element a remplace est dans un div avec class ?
31/03/2006, 17h23
franculo_caoulene

Je ne comprends pas bien ce que tu veux faire à la base.
31/03/2006, 17h27
Seth77

Citation:

Envoyé par franculo_caoulene

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

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:

1 2 tu texte comme tu veux avec ici ton smiley :) et le tour est joué.
Dans ton css:
Code:

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; }

Citation:
Envoyé par 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:

1 2 tu texte comme tu veux avec ici ton smiley :) et le tour est joué.
Dans ton css:
Code:

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 !

31/03/2006, 18h54
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...
31/03/2006, 19h05
Seth77

ah ok ... merci !

Marche pas ...j ai dans le html :

Code:

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

dans le css

Code:

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;
	}

03/04/2006, 10h38
Seth77

Slu

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

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:

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:

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;
}

03/04/2006, 11h57
Seth77

merci ...

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

:wink: