path: root/files/de/web/css/-moz-image-rect/index.html

---
title: '-moz-image-rect'
slug: Web/CSS/-moz-image-rect
tags:
  - CSS
  - CSS Eigenschaft
  - CSS Referenz
  - NeedsCompatTable
  - NeedsUpdate
  - Non-standard
translation_of: Web/CSS/-moz-image-rect
---
<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("2.0")}}</div>

<h2 id="Übersicht">Übersicht</h2>

<p>Dieser Wert für <a href="/de/docs/Web/CSS">CSS</a> {{cssxref("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.</p>

<p>Dies funktioniert ähnlich der {{cssxref("-moz-image-region")}} Eigenschaft, welche zusammen mit der {{cssxref("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.</p>

<p>Die Syntax für ein Rechteck ist ähnlich der der <a href="/de/docs/Web/CSS/shape#Syntax"><code>rect()</code></a> Funktion, die einen {{cssxref("&lt;shape&gt;")}} CSS Typ generiert. Alle vier Werte sind relativ zur linken oberen Ecke des Bildes.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox">-moz-image-rect({{cssxref("&lt;uri&gt;")}}, <em>top</em>, <em>right</em>, <em>bottom</em>, <em>left</em>);</pre>

<h3 id="Werte">Werte</h3>

<dl>
 <dt>{{cssxref("&lt;uri&gt;")}}</dt>
 <dd>Der URI des Bildes, von dem das Teilbild verwendet werden soll.</dd>
 <dt><code>top</code></dt>
 <dd>Der obere Rand, definiert als {{cssxref("&lt;length&gt;")}} des Teilbilds innerhalb des angegebenen Bildes.</dd>
 <dt><code>right</code></dt>
 <dd>Der rechte Rand, definiert als {{cssxref("&lt;length&gt;")}} des Teilbilds innerhalb des angegebenen Bildes.</dd>
 <dt><code>bottom</code></dt>
 <dd>Der untere Rand, definiert als {{cssxref("&lt;length&gt;")}} des Teilbilds innerhalb des angegebenen Bildes.</dd>
 <dt><code>left</code></dt>
 <dd>Der linke Rand, definiert als {{cssxref("&lt;length&gt;")}} des Teilbilds innerhalb des angegebenen Bildes.</dd>
</dl>

<h2 id="Beispiel">Beispiel</h2>

<p>Dieses Beispiel lädt ein Bild und verwendet es in vier Segmenten, um das Firefox Logo in vier {{HTMLElement("div")}} Blöcken darzustellen. Wenn auf deren Container geklickt wird, werden die vier Segmente rotiert, indem die {{cssxref("background-image")}} Eigenschaftswerte zwischen den vier {{HTMLElement("div")}} Blöcken getauscht werden.</p>

<h3 id="CSS">CSS</h3>

<p>Das CSS definiert einen Containerstil, dann die Stile für die vier Boxen, die das gesamte Bild ausmachen.</p>

<p>Der Container sieht folgendermaßen aus:</p>

<pre class="brush: css">#container {
  width: 267px;
  height: 272px;
  top: 100px;
  left: 100px;
  position: absolute;
  font-size: 16px;
  text-shadow: white 0px 0px 6px;
  text-align: center;
}</pre>

<p>Dann werden die vier Boxen definiert, die die Segmente des Bildes beschreiben. Hier wird eines nach dem anderen dargestellt.</p>

<pre class="brush: css">#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;
}
</pre>

<p>Dies ist die linke obere Ecke des Bildes. Sie beschreibt ein Rechteck, das das linke obere Viertel des Bildes der Datei <code>firefox.jpg</code> beinhaltet.</p>

<pre class="brush: css">#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;
}
</pre>

<p>Dies beschreibt die rechte obere Ecke des Bildes.</p>

<p>Die anderen Ecken folgen einem ähnlichen Schema:</p>

<pre class="brush: css">#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;
}
</pre>

<h3 id="HTML">HTML</h3>

<p>Das HTML ist recht einfach:</p>

<pre class="brush: html">&lt;div id="container" onclick="rotate()"&gt;
  &lt;div id="box1" style="left:0px;top:0px;"&gt;Top left&lt;/div&gt;
  &lt;div id="box2" style="left:133px;top:0px;"&gt;Top right&lt;/div&gt;
  &lt;div id="box3" style="left:0px;top:136px;"&gt;Bottom left&lt;/div&gt;
  &lt;div id="box4" style="left:133px;top:136px;"&gt;Bottom right&lt;/div&gt;
&lt;/div&gt;
</pre>

<p>Dies platziert die vier Segmente des Bildes in einem 2x2 Raster. Diese vier Segmente sind alle innerhalb eines größeren {{HTMLElement("div")}} Blocks, dessen primärer Zweck das Erhalten von Klickereignissen und deren Senden an den JavaScript Code ist.</p>

<h3 id="Der_JavaScript_Code">Der JavaScript Code</h3>

<p>Dieser Code verarbeitet das Klickereignis, wenn auf den Container geklickt wird.</p>

<pre class="brush:js">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&lt;=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;
  }
}</pre>

<p>Dies verwendet {{domxref("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 {{cssxref("background-image")}} Eigenschaft von einem zum nächsten Element durch jeden Mausklick, wird dieser erwünschte Effekt erreicht.</p>

<h3 id="Wie_es_aussieht">Wie es aussieht</h3>

<p>{{EmbedLiveSample("Beispiel","400","400")}}</p>

<h2 id="Bugs">Bugs</h2>

<ul>
 <li>{{WebkitBug(32177)}}</li>
</ul>