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.
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.
Syntaxe
-moz-image-rect(<uri>, top, right, bottom, left);
Valeurs
<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 une longueur (
<length>) mesurée à partir du coin supérieur gauche. right- La coordonnée du bord droit de l'image, définie comme une longueur (
<length>) mesurée à partir du coin supérieur gauche. bottom- La coordonnée du bord inférieur de l'image, définie comme une longueur (
<length>) mesurée à partir du coin supérieur gauche. left- La coordonnée du bord gauche de l'image, définie comme une longueur (
<length>) mesurée à partir du coin supérieur gauche.
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.
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(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 50%, 50%, 0%);
width:133px;
height:136px;
position:absolute;
}
#box2 {
background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 100%, 50%, 50%);
width:133px;
height:136px;
position:absolute;
}
#box3 {
background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 50%, 100%, 0%);
width:133px;
height:136px;
position:absolute;
}
#box4 {
background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 100%, 100%, 50%);
width:133px;
height:136px;
position:absolute;
}
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>
JavaScript
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++) {
var curId = "box" + i;
// Shift the background images
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é.