topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

graphic-canvas-util-reflection-testsuite.htm / htm



  <!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>
  <script type="text/javascript" src="reflection.js"></script>
  <title>Reflection.js Testsuite</title>
  <style type="text/css">
  body { background-color: #E6E6E6; font-family: Georgia; line-height: 1.5; }
  a { color: black; font-style: italic; }
  h2 { line-height: 1; font-family: Arial, Helvetica, sans-serif; }
  img { border: 0; }
  </style>
  </head>
  <body>
  
  <h1><img src="reflection.png" class="reflect" alt="reflection.js" style="float:left;" /></h1>
  
  <p style="clear: left">This file demonstrates some of the things reflection.js does.</p>
  
  <h2>Coloured Backgrounds</h2>
  
  <p>The reflections should fade into the background colour.</p>
  
  <div style="float: left; background-color: red; padding: 10px;"><img src="example.jpg" class="reflect" alt="" /></div>
  <div style="float: left; background-color: green; padding: 10px;"><img src="example.jpg" class="reflect" alt="" /></div>
  <div style="float: left; background-color: blue; padding: 10px;"><img src="example.jpg" class="reflect" alt="" /></div>
  <div style="float: left; background-color: yellow; padding: 10px;"><img src="example.jpg" class="reflect" alt="" /></div>
  
  <p style="clear: left;"></p>
  
  <h2>Varying Heights</h2>
  
  <p>Using the class attribute, the height of the reflection can be varied. The first image uses the class "rheight20" which shows a reflection 20% the height of the image. The next one uses rheight40, then rheight60, and so on.</p>
  
  <div style="float: left; padding: 10px;"><img src="example.jpg" class="reflect rheight20" alt="" /></div>
  <div style="float: left; padding: 10px;"><img src="example.jpg" class="reflect rheight40" alt="" /></div>
  <div style="float: left; padding: 10px;"><img src="example.jpg" class="reflect rheight60" alt="" /></div>
  <div style="float: left; padding: 10px;"><img src="example.jpg" class="reflect rheight80" alt="" /></div>
  
  <p style="clear: left;"></p>
  
  <h2>Varying Opacities</h2>
  
  <p>This time each reflection has a varying opacity starting from 20% going up to 80%.</p>
  
  <div style="float: left; padding: 10px;"><img src="example.jpg" class="reflect ropacity20" alt="" /></div>
  <div style="float: left; padding: 10px;"><img src="example.jpg" class="reflect ropacity40" alt="" /></div>
  <div style="float: left; padding: 10px;"><img src="example.jpg" class="reflect ropacity60" alt="" /></div>
  <div style="float: left; padding: 10px;"><img src="example.jpg" class="reflect ropacity80" alt="" /></div>
  
  <p style="clear: left;"></p>
  
  <h2>Floated Image with Border</h2>
  
  <p>The image and the reflection should be aligned to the right of the page. The border should display around both the image and reflection.</p>
  
  <p><img src="example.jpg" class="reflect" alt="" style="float: right;  border: solid 5px red;" /></p>
  
  <p style="clear: right;"></p>
  
  <h2>Scripted Reflection</h2>
  
  <p>These reflections do not have the class="reflect" attribute. They uses the Reflection.add() function.</p>
  
  <p>The reflection should become brighter when the mouse is placed over the image.<br /><img src="example.jpg" alt="" onmouseover="Reflection.add(this, { opacity: 2/3 });" onmouseout="Reflection.add(this, { opacity: 1/3 });" class="reflect ropacity33" /></p>
  
  <p>Click the image to add a reflection.<br /><img src="example.jpg" id="sorbohax" alt="" onclick="Reflection.add(this, { height: 1/3, opacity: 2/3 });" /></p>
  
  <p><a href="javascript:Reflection.remove(document.getElementById('sorbohax'))">Remove Reflection</a></p>
  
  <p>Using Reflection.add(), you can vary the amount of reflection.</p>
  
  <img src="example.jpg" id="indeed" alt="" class="reflect ropacity10" />
  
  <script>
  var cool = 2;
  function varyReflect() {
          if (cool == 10) {
                  cool = 1;
          }
          Reflection.add(document.getElementById('indeed'), { opacity: cool/10 });
          
          document.getElementById('indeeda').innerHTML = cool*10;
          cool++;
  }
  
  </script>
  
  <p><a href="javascript:varyReflect();">Vary the reflection opacity</a> (<strong id="indeeda">10</strong>% opacity)</p>
  
  <h2>Scaled Images</h2>
  
  <p>This may look strange in Internet Explorer.</p>
  
  <p><img src="example.jpg" width="200" alt="" class="reflect" /></p>
  
  <p><img src="example.jpg" width="150" alt="" class="reflect" /></p>
  
  <h2>Clickable Images</h2>
  
  <p><a href="http://cow.neondragon.net/stuff/reflection/"><img src="example.jpg" alt="" class="reflect" /></a></p>
  
  <p>If everything looks as it should, Reflection.js is working correctly!</p>
  
  </body>
  </html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.