Accueil > weblog
- Lire le billet précédent - Lire le billet suivant -
Par Laurent Denis, le 12 août 2004.
Utile ? Inutile ? Je l'ignore, mais voici une petite combinaison de styles CSS permettant de rogner les bords d'une image, notée pour mémoire, et qui permet sans doute de nombreuses variantes :
.rogne img {
position: relative;
left: -10px;
top: -10px;
}
.rogne p {
position: relative;
width: 80px;
height: 80px;
overflow: hidden;
}
<div class="rogne">
<p>
<img src="..." width="100" height="100" alt="..." />
</p>
</div>
L'image faisant 100 pixels de côté est rognée de 10 pixels sur chaque bord :
.rogne p {... ;.rogne img {..., de manière à ne faire apparaître que la zone d'image voulue ;Quant au second position: relative; portant sur le p... c'est juste une amabilité pour Internet Explorer.
[edit] Ainsi que les commentaires ci-dessous l'ont fait apparaître, cette petite astuce supplée aux lacunes de la propriété CSS clip qui ne s'applique qu'à un élément en position absolue (ou fixe).
Les trackbacks pour ce billet sont temporairement fermés en raison d'une série d'attaques de spam.
Commentaires
Raphael Goetter, le 12 août 2004
Je ne sais pas si c'est utile dans l'état, mais le principe doit certainement pouvoir mener à des choses sympatiques, au survol par exemple : détail d'un plan par exemple (cf les images survolées sur Mammouthland et Openweb)
Fabrice Bonny, le 12 août 2004
C'est volontaire, le réinventage de roue?
www.w3.org/TR/REC-CSS2/vi...
mebon, le 12 août 2004
La réinvention plutôt ^^ mis à part ça, c'est aussi la question que je me pose...
J'ai essayé de regarder des tableaux sur le support des propriétés css pour voir si clip était mal supporté, mais j'ai pas l'impression...
Laurent Denis, le 12 août 2004
J'ai abouti à cette solution justement en constatant que clip n'était apparemment pas supporté par les navigateurs actuels... Me serais-je trompé ?
Laurent Denis, le 12 août 2004
En fait, après avoir découvert l'un peu ancien "Internet Explorer 4+ The 'position' property must be set to "absolute" for this property to have any effect." ( www.free-scripts.net/html... )... j'obtiens pour l'instant un support de "clip" apparemment totalement bugué dans Opera 7.x et FifeFox, nul dans IE Win...
Fabrice Bonny, le 12 août 2004
Sauf erreur, c'est supporté depuis NC 4 et MSIE 4.
Laurent Denis, le 12 août 2004
Auquel cas, il y a soit une erreur sur le supposé support, soit un erreur de syntaxe de ma part :
img {
clip:rect(10px, 10px, 10px, 10px);
}
devrait aboutir au même résultat que le réinventage de roue ci-dessus. Testez
Laurent Denis, le 12 août 2004
Vous aurez lu, bien-sûr, tout aussi bien :
p {
clip:rect(10px, 10px, 10px, 10px);
}
puisque clip est une propriété des éléments bloc...
Fabrice Bonny, le 12 août 2004
Pourquoi est-ce que ça marche via JS?
www.4umi.com/web/css/clip...
Par contre rien en CSS, avec ou sans virgule, avec ou sans unités, sous Mozilla, Konqueror, NC ou Opera.
Laurent Denis, le 12 août 2004
J'ai plus rigolo encore :
p.clip {
clip: rect(10px, 10px, 10px, 10px);
position: absolute;
}
<p class="clip">
<img src="test.jpg" width="100" height="100" />
</p>
est inopérant dans IE5à 6, mais fait disparaître entièrement l'image dans Opera et Mozilla
Il y a également une ambigüité sur la détermination de top-right-bottom-left :
"...specify offsets from the respective sides of the box." selon CSS2
"as measured from the top left corner of the element" selon la page que tu cites...
Laurent Denis, le 12 août 2004
Ah ! Rien à faire dans IE pour l'instant, mais CSS2.1 apporte la précision qui manquait :
- left et right sont mesurés depuis le bord gauche
- top et bottom sont mesurés depuis le bord supérieur
Il est donc tout à fait normal que rect(10px, 10px, 10px, 10px); fasse disparaître l'image.
En revanche, clip: rect(10px, 90px, 90px, 10px); aboutit au résultat souhaité dans Opera et Mozilla... mais avec le position:absolute.
Laurent Denis, le 12 août 2004
D'ailleurs, c'est ce position:absolute appliqué à l'élément objet du rognage et qu'on retrouve dans ton exemple http://www.4umi.com/web/css/clip.htm qui donnait l'impression que ça marchait via JS et non via CSS
Gloom, le 12 août 2004
Si ce n'est que pour rogner une image, je ne vois pas trop l'utilité, les logiciel de traitement d'image sont fait pour ça.
Pascale, le 13 août 2004
Tu pourrais mettre ton fichier en ligne ? Histoire que ce soit rapide et facile de tester
Laurent Denis, le 13 août 2004
C'est bien parce que c'est toi qui le demandes, Pascale
test.blog-and-blues.org/c...
Pascale, le 13 août 2004
Merci Laurent
Effectivement, ça marche bien avec moz 1.6, mais pas du tout avec win MSIE 6...
Arf, si c'était sa seule lacune !
goetsu, le 13 août 2004
c est ok sur ie 5 mac os9
Laurent Denis, le 13 août 2004
Merci goetsu
Quelqu'un aurait le résultat Safari ?
Laurent Denis, le 13 août 2004
Désolé, il semble que j'ai malencontreusement supprimé l'image utilisée dans la page de test durant quelques heures.
C'est rectifié.
Laurent Denis, le 14 août 2004
Finalement, IE supporte
clip, mais avec une syntaxe défectueuse. En effet, selon la spécification CSS2.1 :Mais IEWin n'accepte que le passage des valeurs sans virgules...
Bill-Gudule, le 16 août 2004
Oui, sous MacOSX, c'est ok dans safari (1.2.2), dans IE 5.2 et dans opera 7.5x, etc...
voilà voilà.
keusta, le 23 janvier 2006
Moi j'ai juste une petite remarque à faire... si toutefois on trouve une utilité à cette propriété, il ne faut pas que le poids des images rognées soit trop gros sinon autant travailler à partir d'images déjà rognées sous photoshop..
Imaginons dans une même page, une dizaine d'images utilisant la propriété "clip", le poids total des images pourraient considérablement ralentir l'affichage de la page et cela n'est pas très confortable pour l'utilisateur qui au final n'y voit aucune différence..
Laurent Denis, le 23 janvier 2006
L'utilisation de clip va en fait beaucoup plus loin que le rognage des seules images. Voir par exemple pour la substitution de texte HTML par une image : Mettre un titre en image et rester accessible et Utiliser Clip pour masquer du contenu de manière accessible ?.
Cela dit, la remarque sur le poids des images clippées est tout à fait justifiée. Dans la lignée de cette bonne pratique qualité Web Opquast :
Les commentaires pour ce billet sont temporairement fermés en raison d'une série d'attaques de spam.