-moz-image-rect
===============

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`-moz-image-rect`** は CSS の `background-image` に対する値で、大きな画像の一部を背景として使用することができます。

構文
--


```css
-moz-image-rect(url(), top, right, bottom, left);
```

### 値

`url()`

部分画像を取得する画像の URI です。

`top`

指定された画像内の部分画像の上端の辺を、 `<integer>` または `<percentage>` で指定します。

`right`

指定された画像内の部分画像の右端の辺を、 `<integer>` または `<percentage>` で指定します。

`bottom`

指定された画像内の部分画像の下端の辺を、 `<integer>` または `<percentage>` で指定します。

`left`

指定された画像内の部分画像の左端の辺を、 `<integer>` または `<percentage>` で指定します。

解説
--

このプロパティを使用すると、例えば、1 つの大きな画像の異なる部分を、コンテンツの異なる部分の背景として使用することができます。

これは、`-moz-image-region` プロパティとよく似た働きをします。このプロパティは、`list-style-image` プロパティと一緒に使用され、画像の一部をリストの箇条書きとして使用します。ただし、これはどのような CSS 背景にも使用できます。

長方形の構文は、`<shape>` を生成する `rect()` 関数に似ています。CSS タイプを生成する関数です。4 つの値はすべて、画像の左上隅に対する相対値です。

例
-

この例では、画像をロードし、それを 4 分割して 4 つの `<div>` ブロックに Firefox ロゴを描画しています。コンテナーをクリックすると、4 つの `background-image` プロパティの値が 4 つの `<div>` ブロック間で入れ替わることで、4 つの区域が回転します。

### CSS

CSS では、1 つのコンテナーのスタイルを定義した後、画像全体を構成する 4 つのボックスのスタイルを定義しています。

コンテナーは次のようになります。


```css
#container {
  width: 267px;
  height: 272px;
  top: 100px;
  left: 100px;
  position: absolute;
  font-size: 16px;
  text-shadow: white 0px 0px 6px;
  text-align: center;
}
```


次に、画像の区域を定義する 4 つのボックスを定義します。1 つずつ見ていきましょう。


```css
#box1 {
  background-image: -moz-image-rect(url(firefox.png), 0%, 50%, 50%, 0%);
  width: 133px;
  height: 136px;
  position: absolute;
}
```


これは画像の左上隅です。ファイル `firefox.jpg` に含まれる画像の左上 1/4 を含む長方形を定義します。


```css
#box2 {
  background-image: -moz-image-rect(url(firefox.png), 0%, 100%, 50%, 50%);
  width: 133px;
  height: 136px;
  position: absolute;
}
```


これは、画像の右上隅を定義します。

他の隅も同様のパターンです。


```css
#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;
}
```

### HTML

HTML はとてもシンプルです。


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


これにより、画像の 4 つの区域が 2 × 2 のボックスグリッドに配置されます。これらの 4 つの区域は、大きな `<div>` ブロックの中に含まれており、クリックイベントを受信して JavaScript コードに配信することを主な目的としています。

### JavaScript コード

このコードは、コンテナーがマウスでクリックされたときのクリックイベントを処理します。


```js
function rotate() {
  var prevStyle = window
    .getComputedStyle(document.getElementById("box4"), null)
    .getPropertyValue("background-image");

  // 最後の 1 枚を保存したところで、回転を開始します。

  for (var i = 1; i <= 4; i++) {
    var curId = "box" + i;

    // 背景画像のをずらす

    var curStyle = window
      .getComputedStyle(document.getElementById(curId), null)
      .getPropertyValue("background-image");
    document.getElementById(curId).style.backgroundImage = prevStyle;
    prevStyle = curStyle;
  }
}
```


これは `window.getComputedStyle()` を使って各要素のスタイルを取得し、それを次の要素にシフトしています。この処理を開始する前に、最後のボックスのスタイルのコピーを保存していることに注目してください。3 つ目の要素のスタイルによって上書きされるからです。`background-image` プロパティの値を、マウスをクリックするたびに 1 つの要素から次の要素にコピーすることで、目的の効果を得ることができます。

### どのように見えるか

仕様書
---

どの標準にも含まれていません。

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* Mozilla CSS 拡張
* CSS 背景と境界モジュール