CSS - -moz-image-rect

This example loads an image and uses it in four segments to draw the Firefox logo in four <div> blocks. Clicking on their container causes the four segments to rotate around by swapping the background-image property values among the four <div> blocks.

CSS

The CSS defines one container style, then the styles for the four boxes that comprise the complete image.

The container looks like this:

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

Then the four boxes defining the segments of the image are defined. Let's look at them one at a time.

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

This is the top-left corner of the image. It defines a rectangle containing the top-left quarter of the image in the file firefox.jpg.

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

This defines the top-right corner of the image.

The other corners follow a similar pattern:

#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

The HTML is quite simple:

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

This places the four segments of our image in a two-by-two box grid. These four segments are all contained within a larger <div> block whose primary purpose is to receive click events and dispatch them to our JavaScript code.

The JavaScript code

This code handles the click event when the container receives a mouse click.

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;
  }    
}

This uses window.getComputedStyle() to fetch the style of each element, shifting it to the following element. Notice that before it begins doing so it saves a copy of the last box's style since it will be overwritten by the third element's style. By simply copying the values of the background-image property from one element to the next with each mouse click, we achieve the desired effect.

What it looks like

Bugs

• WebKit bug 32177