From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/-moz-image-rect/index.md | 86 ++++++++++++++++--------------- 1 file changed, 44 insertions(+), 42 deletions(-) (limited to 'files/fr/web/css/-moz-image-rect') diff --git a/files/fr/web/css/-moz-image-rect/index.md b/files/fr/web/css/-moz-image-rect/index.md index 45b4ec33bf..0a0123b4e3 100644 --- a/files/fr/web/css/-moz-image-rect/index.md +++ b/files/fr/web/css/-moz-image-rect/index.md @@ -8,44 +8,43 @@ tags: - Reference translation_of: Web/CSS/-moz-image-rect --- -
{{Non-standard_header}}{{CSSRef}}
+{{Non-standard_header}}{{CSSRef}} -

La propriété -moz-image-rect permet d'utiliser une seule partie d'une image pour un arrière-plan (contrairement à {{cssxref("background-image")}}). On peut ainsi utiliser une image qui regroupe plusieurs sprites à différentes fins, ce qui permet de diminuer le nombre de transfert réseau.

+La propriété **`-moz-image-rect`** permet d'utiliser une seule partie d'une image pour un arrière-plan (contrairement à {{cssxref("background-image")}}). On peut ainsi utiliser une image qui regroupe plusieurs _sprites_ à différentes fins, ce qui permet de diminuer le nombre de transfert réseau. -

Cette propriété fonctionne de façon analogue à {{cssxref("-moz-image-region")}} qui peut être utilisée pour déterminer la partie d'une image utilisée pour {{cssxref("list-style-image")}} qui met en forme les puces d'une liste. Grâce à -moz-image-rect, on peut avoir le même fonctionnement pour n'importe quel arrière-plan CSS.

+Cette propriété fonctionne de façon analogue à {{cssxref("-moz-image-region")}} qui peut être utilisée pour déterminer la partie d'une image utilisée pour {{cssxref("list-style-image")}} qui met en forme les puces d'une liste. Grâce à `-moz-image-rect`, on peut avoir le même fonctionnement pour n'importe quel arrière-plan CSS. -

La syntaxe de cette propriété est similaire à la fonction rect() qui génère une valeur de type {{cssxref("<shape>")}}. Les quatre valeurs indiquées font chacune référence au coin supérieur gauche de l'image.

+La syntaxe de cette propriété est similaire à la fonction [`rect()`]() qui génère une valeur de type {{cssxref("<shape>")}}. Les quatre valeurs indiquées font chacune référence au coin supérieur gauche de l'image. -

Syntaxe

+## Syntaxe -
-moz-image-rect({{cssxref("<uri>")}}, top, right, bottom, left);
+ -moz-image-rect({{cssxref("<uri>")}}, top, right, bottom, left); -

Valeurs

+### Valeurs -
-
{{cssxref("<uri>")}}
-
L'URI de l'image dont on veut obtenir une portion.
-
top
-
La coordonnée du bord haut de l'image, définie comme un entier ({{cssxref("<integer>")}}) ou un pourcentage ({{cssxref("<percentage>")}}) à partir du coin supérieur gauche.
-
right
-
La coordonnée du bord droit de l'image, définie comme un entier ({{cssxref("<integer>")}}) ou un pourcentage ({{cssxref("<percentage>")}}) à partir du coin supérieur gauche.
-
bottom
-
La coordonnée du bord inférieur de l'image, définie comme un entier ({{cssxref("<integer>")}}) ou un pourcentage ({{cssxref("<percentage>")}}) à partir du coin supérieur gauche.
-
left
-
La coordonnée du bord gauche de l'image, définie comme un entier ({{cssxref("<integer>")}}) ou un pourcentage ({{cssxref("<percentage>")}}) à partir du coin supérieur gauche.
-
+- {{cssxref("<uri>")}} + - : L'URI de l'image dont on veut obtenir une portion. +- `top` + - : La coordonnée du bord haut de l'image, définie comme un entier ({{cssxref("<integer>")}}) ou un pourcentage ({{cssxref("<percentage>")}}) à partir du coin supérieur gauche. +- `right` + - : La coordonnée du bord droit de l'image, définie comme un entier ({{cssxref("<integer>")}}) ou un pourcentage ({{cssxref("<percentage>")}}) à partir du coin supérieur gauche. +- `bottom` + - : La coordonnée du bord inférieur de l'image, définie comme un entier ({{cssxref("<integer>")}}) ou un pourcentage ({{cssxref("<percentage>")}}) à partir du coin supérieur gauche. +- `left` + - : La coordonnée du bord gauche de l'image, définie comme un entier ({{cssxref("<integer>")}}) ou un pourcentage ({{cssxref("<percentage>")}}) à partir du coin supérieur gauche. -

Syntaxe formelle

+### Syntaxe formelle {{CSSSyntax}} -

Exemples

+## Exemples -

Dans cet exemple, on charge une image qu'on découpe en quatre zones pour dessiner le logo Firefox dans quatre éléments {{HTMLElement("div")}}. Lorsqu'on clique sur le conteneur, cela fait tourner les images entre les blocs.

+Dans cet exemple, on charge une image qu'on découpe en quatre zones pour dessiner le logo Firefox dans quatre éléments {{HTMLElement("div")}}. Lorsqu'on clique sur le conteneur, cela fait tourner les images entre les blocs. -

CSS

+### CSS -
#container {
+```css
+#container {
   width:267px;
   height:272px;
   top:100px;
@@ -83,26 +82,28 @@ translation_of: Web/CSS/-moz-image-rect
   height:136px;
   position:absolute;
 }
-
+``` -

HTML

+### HTML -
<div id="container" onclick="rotate()">
-  <div id="box1" style="left:0px;top:0px;">Top left</div>
-  <div id="box2" style="left:133px;top:0px;">Top right</div>
-  <div id="box3" style="left:0px;top:136px;">Bottom left</div>
-  <div id="box4" style="left:133px;top:136px;">Bottom right</div>
-</div>
-
+```html +
+
Top left
+
Top right
+
Bottom left
+
Bottom right
+
+``` -

JavaScript

+### JavaScript -
function rotate() {
+```js
+function rotate() {
   var prevStyle = window.getComputedStyle(document.getElementById("box4"), null).getPropertyValue("background-image");
 
   // Now that we've saved the last one, start rotating
 
-  for (var i=1; i<=4; i++) {
+  for (var i=1; i<=4; i++) {
     var curId = "box" + i;
 
     // Shift the background images
@@ -111,14 +112,15 @@ translation_of: Web/CSS/-moz-image-rect
     document.getElementById(curId).style.backgroundImage = prevStyle;
     prevStyle = curStyle;
   }
-}
+} +``` -

Dans ce script, on utilise la méthode {{domxref("window.getComputedStyle()")}} afin de récupérer le style de chaque élément et on le décale à l'élément suivant. On notera qu'avant de commencer ce « défilement », on sauvegarde une version du style de la dernière boîte. En copiant simplement les valeurs de {{cssxref("background-image")}} d'un élément à l'autre lors du clic, on obtient l'effet souhaité.

+Dans ce script, on utilise la méthode {{domxref("window.getComputedStyle()")}} afin de récupérer le style de chaque élément et on le décale à l'élément suivant. On notera qu'avant de commencer ce « défilement », on sauvegarde une version du style de la dernière boîte. En copiant simplement les valeurs de {{cssxref("background-image")}} d'un élément à l'autre lors du clic, on obtient l'effet souhaité. -

Résultat

+### Résultat -

{{EmbedLiveSample("Exemples","400","400")}}

+{{EmbedLiveSample("Exemples","400","400")}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("css.types.-moz-image-rect")}}

+{{Compat("css.types.-moz-image-rect")}} -- cgit v1.2.3-54-g00ecf