|
Forum |
|
Réagissez
dans les forums de JDN Développeurs
|
Avec le support croissant des feuilles de style par les navigateurs, on peut partir
du principe qu'un navigateur qui peut afficher une image peut tout aussi bien
utiliser CSS. Cette connaissance nous permet d'appliquer une petite astuce pour
afficher plusieurs images stockées dans un même fichier.
Le fichier peut comprendre au plus 9 images, réparties sur une grille 3*3, comme
ceci :
Rien n'empêche
d'avoir une image plus haute ou plus large que les autres, mais il faudra alors
travailler le conteneur. C'est en effet celui-ci, par sa taille, qui déterminer
quelle part de l'image sera affichée. Cela permet aux développeurs, à partir
de l'image ci-dessus, de composer un tableau du genre :
ou encore, d'isoler une image dans une balise DIV :
texte
L'intérêt est par exemple de donner de la profondeur aux tableaux de données
à partir d'une simple image GIF, les images étant réparties selon ce que contient
la cellule (un lien, une classe particulière...). Les images étant affichées
par CSS, le tout se dégrade de manière toute à fait lisible pour les navigateurs
ne pouvant pas prendre en charge cette fonctionnalité...
Le code :
<html>
<body>
<style>
.i1 { background: url(img/laMer2.jpg) no-repeat right top; }
.i2 { background: url(img/laMer2.jpg) no-repeat right bottom; }
.i3 { background: url(img/laMer2.jpg) no-repeat right center; }
.i4 { background: url(img/laMer2.jpg) no-repeat left center; }
.i5 { background: url(img/laMer2.jpg) no-repeat left top; }
.i6 { background: url(img/laMer2.jpg) no-repeat left bottom; }
.i7 { background: url(img/laMer2.jpg) no-repeat center bottom; }
.i8 { background: url(img/laMer2.jpg) no-repeat center center; }
.i9 { background: url(img/laMer2.jpg) no-repeat center top; }
.divimg { width: 50px; height: 50px; }
</style>
<table width="150" border="0" cellspacing="0" cellpadding="0" height="150">
<tr>
<td class="i1">1</td>
<td class="i2">2</td>
<td class="i3">3</td>
</tr>
<tr>
<td class="i4">4</td>
<td class="i5">5</td>
<td class="i6">6</td>
</tr>
<tr>
<td class="i7">7</td>
<td class="i8">8</td>
<td class="i9">9</td>
</tr>
</table>
<div class="divimg i1">texte</div>
</body>
</html>
Les meilleures astuces CSS sur le JDN :
- Comment
appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment
centrer horizontalement une DIV dans une autre en CSS ?
- Comment
créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment
définir les cellpadding et cellspacing en CSS ?
- Comment
modifier l'image d'un bouton input en CSS ?
- Comment
rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de
cet élément opaque en CSS ?
- Internet
Explorer supporte-t-il l'attribut CSS border-radius
|