PRATIQUE CLIENTS WEB 
Découper une image à l'aide de CSS
 
La propriété background-image autorise quelques stratagèmes d'affichage. Exemple. (10/03/2005)
  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 :

1 2 3
4 5 6
7 8 9

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

 
Xavier Borderie, JDN Développeurs
 
 
Accueil | Haut de page