Discussion :

[sunshine33]

Bonjour,

Dans une page html je charge dans des block p des images en fond, ces images sont redimensionnées et positonnée.
Le problème vient du fait que j'ai plusieur images et que pour chacune des images je duplique du code, seul la ligne indiquant le chemin de l'image source change.

Exemple si j'ai trois images :

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
 
<style type="text/css">
<!--
.vignette1 {
 height: 150px;
 width: 150px;
 background-color: #000000;
 background-image:    url(../../../../images/gal/peinture/science-fiction/ultramar/vgn/ultra_marneus_1.jpg);
 background-repeat: no-repeat;
 background-attachment: scroll;
 background-position: center center;
}
.vignette2 {
 height: 150px;
 width: 150px;
 background-color: #000000;
 background-image:    url(../../../../images/gal/peinture/science-fiction/ultramar/vgn/ultra_marneus_2.jpg);
 background-repeat: no-repeat;
 background-attachment: scroll;
 background-position: center center;
}
.vignette3 {
 height: 150px;
 width: 150px;
 background-color: #000000;
 background-image:    url(../../../../images/gal/peinture/science-fiction/ultramar/vgn/ultra_serviteur1.jpg);
 background-repeat: no-repeat;
 background-attachment: scroll;
 background-position: center center;
}
 
-->
</style>

L'image est insérée dans le code html de la façon suivante :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
...
 
<p class="vignette1"><a href="javascript:PopupImage('../../../../images/gal/peinture/science-fiction/ultramar/
ultra_marneus_1.jpg')"><img src="../../../../pngcomp/
scrolloff.png" border="0" onmouseover="this.src='../../../../pngcomp/scrollon.png'" onmouseout="this.src='../../../../pngcomp/scrolloff.png'" /></a></a></p>
 
... 
 
<p class="vignette2"><a href="javascript:PopupImage('../../../../images/gal/peinture/science-fiction/ultramar/ultra_marneus_2.jpg')"><img src="../../../../pngcomp/scrolloff.png" border="0" onmouseover="this.src='../../../../pngcomp/scrollon.png'" onmouseout="this.src='../../../../pngcomp/scrolloff.png'" /></a></span></a></p>

En fait le principe c'est que la css crée une image de fond. Par defaut un script javascript applique une image par dessus pour donner un effet de cadre, et lorsqu'on survol cette image, le code javascript fait un effet de rollover.Lorsqu'on clique sur l'image, pop up de l'image ;-)

Donc le principe est tout bête, mais je suis sur que le code peut être optimisé. Mais je sais pas trop comment faire pour factoriser du codde css moi :-(

[franculo_caoulene]

Salut,

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
<style type="text/css">
<!--
.vignette {
 background-repeat: no-repeat;
 background-attachment: scroll;
 background-position: center center;
 background-repeat: no-repeat;
 background-attachment: scroll;
 background-position: center center; 
}
.vignette1 {
 background-image:    url(../../../../images/gal/peinture/science-fiction/ultramar/vgn/ultra_marneus_1.jpg);
}
.vignette2 {
 background-image:    url(../../../../images/gal/peinture/science-fiction/ultramar/vgn/ultra_marneus_2.jpg);
}
.vignette3 {
 background-image:    url(../../../../images/gal/peinture/science-fiction/ultramar/vgn/ultra_serviteur1.jpg);
}

Code :

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

<p class="vignette vignette1">

Tu peux aussi éventuellement passer par des ID si les <p> sont uniques.

[sunshine33]

Merci pour cette réponse,

J'en profite pour aller plus loin

Est il possible de passer des variables en code css ?

Je m'explique, dans la partie html on a :

Code :

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

1
2
 
<div style="text-align: left;"><p class="vignette vignette1"></div>

A la place de vignette1, puis-je avoir un bout de code ( php ? javascript ? ...) qui permettrait d'assigner le code css :

Code :

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

1
2
3
.vignette1 {
 background-image:    url(../../../../images/gal/peinture/science-fiction/ultramar/vgn/ultra_marneus_1.jpg);
}

De facon a ce que la varibale soit assignée à background-image ?


Ainsi pas du tout de duplication de code.

[marsupix]

dans ton html/php tu peux faire par exemple

Code :

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

1
2
$n = ...; //numero vignette
<p class="vignette vignette<?php echo $n; ?>">...</p>

oui