Kein Standard
Diese Funktion entspricht nicht dem Standard und ist nicht Teil der Standardisierung. Diese Funktion darf nicht in Webseiten, die via das Internet zugänglich sind, benutzt werden: Sie wird nicht für alle Nutzer funktionieren. Es kann zu umfangreichen Inkompatibilitäten zwischen verschiedenen Implementierungen kommen und die Funktionsweise oder Eigenschaften könnten in der Zukunft verändert werden.
Übersicht
Dieser Wert für CSS background-image ermöglicht es, einen Bereich eines größeren Bildes als Hintergrund zu verwenden. Dies erlaubt es beispielsweise, verschiedene Teile eines größeren Bildes als Hintergründe in verschiedenen Teilen des Inhalts zu verwenden.
Dies funktioniert ähnlich der -moz-image-region Eigenschaft, welche zusammen mit der list-style-image verwendet wird, um Teile eines Bildes als Aufzählungszeichen in einer Liste zu verwenden. Diese Eigenschaft wird jedoch für CSS Hintergründe verwendet.
Die Syntax für ein Rechteck ist ähnlich der der rect() Funktion, die einen <shape> CSS Typ generiert. Alle vier Werte sind relativ zur linken oberen Ecke des Bildes.
Syntax
-moz-image-rect(<uri>, top, right, bottom, left);
Werte
<uri>- Der URI des Bildes, von dem das Teilbild verwendet werden soll.
top- Der obere Rand, definiert als
<length>des Teilbilds innerhalb des angegebenen Bildes. right- Der rechte Rand, definiert als
<length>des Teilbilds innerhalb des angegebenen Bildes. bottom- Der untere Rand, definiert als
<length>des Teilbilds innerhalb des angegebenen Bildes. left- Der linke Rand, definiert als
<length>des Teilbilds innerhalb des angegebenen Bildes.
Beispiel
Dieses Beispiel lädt ein Bild und verwendet es in vier Segmenten, um das Firefox Logo in vier <div> Blöcken darzustellen. Wenn auf deren Container geklickt wird, werden die vier Segmente rotiert, indem die background-image Eigenschaftswerte zwischen den vier <div> Blöcken getauscht werden.
CSS
Das CSS definiert einen Containerstil, dann die Stile für die vier Boxen, die das gesamte Bild ausmachen.
Der Container sieht folgendermaßen aus:
#container {
width: 267px;
height: 272px;
top: 100px;
left: 100px;
position: absolute;
font-size: 16px;
text-shadow: white 0px 0px 6px;
text-align: center;
}
Dann werden die vier Boxen definiert, die die Segmente des Bildes beschreiben. Hier wird eines nach dem anderen dargestellt.
#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;
}
Dies ist die linke obere Ecke des Bildes. Sie beschreibt ein Rechteck, das das linke obere Viertel des Bildes der Datei firefox.jpg beinhaltet.
#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;
}
Dies beschreibt die rechte obere Ecke des Bildes.
Die anderen Ecken folgen einem ähnlichen Schema:
#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
Das HTML ist recht einfach:
<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>
Dies platziert die vier Segmente des Bildes in einem 2x2 Raster. Diese vier Segmente sind alle innerhalb eines größeren <div> Blocks, dessen primärer Zweck das Erhalten von Klickereignissen und deren Senden an den JavaScript Code ist.
Der JavaScript Code
Dieser Code verarbeitet das Klickereignis, wenn auf den Container geklickt wird.
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;
}
}
Dies verwendet window.getComputedStyle(), um den Stil jedes Elements auszulesen und dem nächsten Element zuzuweisen. Beachte, dass es zuvor eine Kopie des letzten Boxstils speichert, da dieser durch den Stil des dritten Elements überschrieben wird. Durch das simple Kopieren der Werte der background-image Eigenschaft von einem zum nächsten Element durch jeden Mausklick, wird dieser erwünschte Effekt erreicht.