-moz-image-rect

Non standard: Cette fonctionnalité n'est pas standardisée. Nous déconseillons d'utiliser des fonctionnalités non standard en production, car leur prise en charge par les navigateurs est limitée, et elles peuvent être modifiées ou supprimées. Toutefois, elles peuvent constituer une alternative appropriée dans certains cas où aucune option standard n'existe.

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

css
-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

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

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

js
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

Voir aussi