Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez également contribuer en rejoignant la communauté francophone sur MDN Web Docs.

-moz-image-rect

Non standard: Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

La propriété -moz-image-rect permet d'utiliser une seule partie d'une image pour un arrière-plan (contrairement à 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.

Syntaxe

-moz-image-rect(url(), top, right, bottom, left);

Valeurs

url()

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 (<integer>) ou un pourcentage (<percentage>) à partir du coin supérieur gauche.

La coordonnée du bord droit de l'image, définie comme un entier (<integer>) ou un pourcentage (<percentage>) à partir du coin supérieur gauche.

bottom

La coordonnée du bord inférieur de l'image, définie comme un entier (<integer>) ou un pourcentage (<percentage>) à partir du coin supérieur gauche.

left

La coordonnée du bord gauche de l'image, définie comme un entier (<integer>) ou un pourcentage (<percentage>) à partir du coin supérieur gauche.

Description

Cette propriété fonctionne de façon analogue à -moz-image-region qui peut être utilisée pour déterminer la partie d'une image utilisée pour 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 <shape>. Les quatre valeurs indiquées font chacune référence au coin supérieur gauche de l'image.

Exemples

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

HTML

<div id="container" onclick="rotate()">
  <div id="box1" style="left:0px; top:0px;">En haut à gauche</div>
  <div id="box2" style="left:133px; top:0px;">En haut à droite</div>
  <div id="box3" style="left:0px; top:136px;">En bas à gauche</div>
  <div id="box4" style="left:133px; top:136px;">En bas à droite</div>
</div>

CSS

#container {
  width: 267px;
  height: 272px;
  top: 100px;
  left: 100px;
  position: absolute;
  font-size: 16px;
  text-shadow: white 0px 0px 6px;
  text-align: center;
}

#box1 {
  background-image: -moz-image-rect(url(firefox.png), 0%, 50%, 50%, 0%);
  width: 133px;
  height: 136px;
  position: absolute;
}

#box2 {
  background-image: -moz-image-rect(url(firefox.png), 0%, 100%, 50%, 50%);
  width: 133px;
  height: 136px;
  position: absolute;
}

#box3 {
  background-image: -moz-image-rect(url(firefox.png), 50%, 50%, 100%, 0%);
  width: 133px;
  height: 136px;
  position: absolute;
}

#box4 {
  background-image: -moz-image-rect(url(firefox.png), 50%, 100%, 100%, 50%);
  width: 133px;
  height: 136px;
  position: absolute;
}

JavaScript

function rotate() {
  var prevStyle = window.getComputedStyle(document.getElementById("box4"), null).getPropertyValue("background-image");

  // Récupérer le style du dernier élément, puis faire tourner les images

  for (var i=1; i<=4; i++) {
    var curId = "box" + i;

    // Décaler les images d'arrière-plan
    var curStyle = window.getComputedStyle(document.getElementById(curId), null).getPropertyValue("background-image");
    document.getElementById(curId).style.backgroundImage = prevStyle;
    prevStyle = curStyle;
  }
}

Dans ce script, on utilise la méthode 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 background-image d'un élément à l'autre lors du clic, on obtient l'effet souhaité.

Résultat

Specifications

Cette propriété ne fait partie d'aucun standard.

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi