SOURCE CODE: Basic Mask
VIEW EXAMPLE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Basic Mask | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="animation widget Uize.Widget.Mask Uize.Fade.Factory"/>
  <meta name="description" content="See a mask widget being used to highlight an image in a layout. Switching to highlighting a different image is accompanied by a JavaScript animation."/>
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
  <link rel="stylesheet" href="../css/page.css"/>
  <link rel="stylesheet" href="../css/page.example.css"/>
  <style type="text/css">
    .photoPodGroup {
      position:relative;
      width:700px;
      height:370px;
      border:1px solid #888;
      background:#ccc;
      margin:10px auto 0 auto;
      overflow:hidden;
    }
    .photoPod {
      position:absolute;
      background:#8ac;
      border:solid 1px #fff;
      font-size:11px;
      font-family:Arial;
      color:#000;
      width:250px;
      text-align:left;
    }
    .photoPod > div {
      margin:4px;
    }
    .photoPod h1 {
      font-size:15px;
      font-weight:bold;
      text-align:center;
      background:#000;
      color:#fff;
      margin:0px;
    }
    .photoPod img {
      width:105px;
      height:75px;
      float:left;
      margin-right:4px;
      margin-bottom:4px;
    }
  </style>
</head>

<body>

<script type="text/javascript" src="../js/Uize.js"></script>

<h1 class="header">
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
  <a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>
</h1>

<div class="main">
  <h1 class="document-title">
    <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
    Basic Mask
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/mask.html" class="buttonLink">SOURCE</a></div>
    </div>
  </h1>

  <!-- explanation copy -->

  <div class="explanation">
    <p>In this example, an instance of <a href="../reference/Uize.Widget.Mask.html"><code>Uize.Widget.Mask</code></a> has been created and positioned over the layout of images below. When you move the mouse over the buttons above the layout, the mask's coordinates are set so that the highlight area is positioned over the corresponding image and everything outside the image is masked out. The <a href="../reference/Uize.Fade.Factory.html"><code>Uize.Fade.Factory</code></a> module is used to create a JavaScript animation for a smooth transition to the new coordinates.</p>
  </div>

  <center>
    <div>
      <a id="page-sunSetsSoonAtSweeneyLink" class="buttonLink" href="javascript://">Pink Pacifica Sunset</a>
      <a id="page-flockOfCloudsLink" class="buttonLink" href="javascript://">Flock of Clouds</a>
      <a id="page-drivingThroughTheRainLink" class="buttonLink" href="javascript://">Driving Through the Rain</a>
      <a id="page-heavensOpenOverPedroLink" class="buttonLink" href="javascript://">Heavens Open Over Pedro</a>
      <a id="page-photoPodGroupLink" class="buttonLink" href="javascript://">Show All</a>
    </div>
  </center>

  <div id="page-photoPodGroup" class="photoPodGroup">
    <img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228483162492178759&max_dim=500" style="position:absolute; width:700px; height:500px; left:0px; top:0px;" alt=""/>
    <div id="page-sunSetsSoonAtSweeney" class="photoPod" style="left:10px; top:10px;">
      <h1>Sun Sets Soon at Sweeney</h1>
      <div>
        <img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228888824201666423&max_dim=105" alt=""/>The sun bursts out beneath a bank of clouds in this sunset, seen from Sweeney Ridge in San Bruno, California. It casts a path of shimmering orange on the ocean and lights up the air between two hills.
      </div>
    </div>

    <div id="page-heavensOpenOverPedro" class="photoPod" style="right:10px; bottom:10px;">
      <h1>Heavens Open Over Pedro</h1>
      <div>
        <img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228483162492178759&max_dim=105" alt=""/>On a stormy winter day in Pacifica, shafts of light burst through the blackened sky to warm the sands of Pedro Point beach.
      </div>
    </div>

    <div id="page-flockOfClouds" class="photoPod" style="left:30px; bottom:10px;">
      <h1>Flock of Clouds</h1>
      <div>
        <img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228267745724726415&max_dim=105" alt=""/>It was on a trip to the U.S. Virgin Islands in the Caribbean that this majestic flock of fluffy clouds was spotted grazing across the clear turquoise waters hugging the shallow sandbanks of a nearby island. It seemed like I was witnessing a great migration from the high altitudes of my plane window seat.
      </div>
    </div>

    <div id="page-drivingThroughTheRain" class="photoPod" style="right:90px; top:20px;">
      <h1>Driving Through the Rain</h1>
      <div>
        <img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228507796122097730&max_dim=105" alt=""/>I captured this evocative picture one day driving through a torrential downpour in San Bruno, California - towards Pacifica. I was, of course, in the passenger seat at the time (and not steering the car from it, either, for that matter). There's just something intensely moody about the colors and the motion blur effect in the picture that evokes those braving-the-storm feelings. It feels stark and looks blistering cold.
      </div>
    </div>

    <div id="page_mask" style="position:absolute; left:0px; top:0px; width:700px; height:400px; background:#022; opacity:.5; filter:alpha(opacity=50);"></div>
  </div>
</div>

<!-- JavaScript code to make the static HTML "come alive" -->

<script type="text/javascript">

Uize.require (
  [
    'UizeSite.Page.Example.library',
    'UizeSite.Page.Example',
    'Uize.Dom.Basics',
    'Uize.Fade',
    'Uize.Fade.Factory',
    'Uize.Widget.Mask'
  ],
  function () {
    'use strict';

    /*** create the example page widget ***/
      var page = window.page = UizeSite.Page.Example ();

    function getNodeOffsetCoords (node) {
      node = Uize.Dom.Basics.getById (node);
      return {left:node.offsetLeft,top:node.offsetTop,width:node.offsetWidth + 1,height:node.offsetHeight + 1};
    }

    /*** create the Uize.Widget.Mask instance ***/
      var mask = page.addChild ('mask',Uize.Widget.Mask);
      mask.set (getNodeOffsetCoords (mask.getNode ()));

    /*** wire up the page widget ***/
      page.wireUi ();

    /*** wire up link mouseovers for moving mask position ***/
      function wireLinkMouseover (linkId) {
        var coords = getNodeOffsetCoords (linkId == 'photoPodGroup' ? mask.getNode () : page.getNode (linkId));
        page.wireNode (
          linkId + 'Link',
          'mouseover',
          function () {
            Uize.Fade.Factory.fadeProperties (
              mask,null,coords,750,{curve:Uize.Fade.celeration (0,1),quantization:1}
            );
          }
        );
      }
      wireLinkMouseover ('sunSetsSoonAtSweeney');
      wireLinkMouseover ('flockOfClouds');
      wireLinkMouseover ('drivingThroughTheRain');
      wireLinkMouseover ('heavensOpenOverPedro');
      wireLinkMouseover ('photoPodGroup');
  }
);

</script>

</body>
</html>