Duplication code css, comment y remédier ?
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:
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:
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 :-(
