-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. right
-
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