topical media & game development

talk show tell print

graphic-canvas-util-reflection-reflectomatic-index.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>
  <title>Reflect-o-matic</title>
  <style type="text/css">
  @import url(reflectomatic.css);
  </style>
  
  <script type="text/javascript" src="../reflection.js"></script>
  <script type="text/javascript" src="moo.js"></script>
  </head>
  <body id="b">
  
  <div id="header">
  <h1>Reflect-o-matic</h1>
  <p>Add reflections to images on your webpage using Javascript.</p>
  </div>
  
  <h2 class="tab">Enter URL:</h2>
  <div class="content">
  <p><strong>This is a downloaded version of Reflect-o-matic. The latest version can always be found at the <a href="http://cow.neondragon.net/stuff/reflection/reflectomatic/">Reflect-o-matic homepage</a>.</strong></p>
  
  <p>Enter the address to the image you wish to add a reflection to:</p>
  <form action="#" onsubmit="javascript:reflectFromURL(document.getElementById('imageurl').value);return false;">
  <p><input type="text" name="image" id="imageurl" size="40" /> <input type="submit" value="Go!" /></p>
  </form>
  
  <p>If you prefer, <a href="#" onclick="javascript:a.display(1);return false;">search for an image</a> or <a href="#" onclick="javascript:a.display(2);return false;">try using a demo image</a>.</p>
  </div>
  
  <h2 class="tab">Search: To find an image on the internet...</h2>
  <div id="searchc" class="content">
  
  <form action="#" onsubmit="javascript:searchImages(document.getElementById('imagesearch').value);return false;">
  <p><input type="text" id="imagesearch" name="imagesearch" /> <input type="submit"  value="Search" /></p>
  </form>
  
  <script type="text/javascript" src="jsr_class.js"> </script>
  <script type="text/javascript" src="reflectomatic.js"></script>
  
  <div id="searchresults"><p>Please enter a search term; we'll retrieve images for your term and allow you to add reflections to them!</p><p>Ideas: <a href="javascript:searchImages('yosemite')">Yosemite</a>, <a href="javascript:searchImages('penguin')">Penguin</a>, <a href="javascript:searchImages('eiffel tower')">Eiffel Tower</a>, <a href="javascript:searchImages('big ben')">Big Ben</a>, <a href="javascript:searchImages('oxford')">Oxford</a></p></div>
  <script type="text/javascript">var search = new Fx.Slide('searchresults', {duration: 500});</script>
  </div>
  
  <h2 class="tab">Examples: Show me with a few of your photos</h2>
  <div class="content">
  <table><tr>
  <td><a href="#" onclick="javascript:return reflectImage('http://cow.neondragon.net/stuff/reflection/photos/slurp.jpg');"><img src="http://cow.neondragon.net/stuff/reflection/photos/slurp_small.jpg" class="reflect" alt="Slurp" /></a></td>
  <td><a href="#" onclick="javascript:return reflectImage('http://cow.neondragon.net/stuff/reflection/photos/giraffe.jpg')"><img src="http://cow.neondragon.net/stuff/reflection/photos/giraffe_small.jpg" class="reflect" alt="Giraffe" /></a></td>
  <td><a href="#" onclick="javascript:return reflectImage('http://cow.neondragon.net/stuff/reflection/photos/flower.jpg')"><img src="http://cow.neondragon.net/stuff/reflection/photos/flower_small.jpg" class="reflect" alt="Flower" /></a></td>
  <td><a href="#" onclick="javascript:return reflectImage('http://cow.neondragon.net/stuff/reflection/photos/storm.jpg')"><img src="http://cow.neondragon.net/stuff/reflection/photos/storm_small.jpg" class="reflect" alt="Run from the Storm" /></a></td>
  <td><a href="#" onclick="javascript:return reflectImage('http://cow.neondragon.net/stuff/reflection/photos/clearwater2.jpg')"><img src="http://cow.neondragon.net/stuff/reflection/photos/clearwater2_small.jpg" class="reflect" alt="Sunset at Clearwater Beach II" /></a></td>
  </tr></table>
  </div>
  
  <h2 class="tab">Results</h2>
  <div class="content">
  
  <form action="#" onsubmit="javascript:adjustReflection();return false;">
  <table id="reflectproperties">
  <tr><td colspan="2"><b>Properties</b></th></tr>
  <tr><td>Height:</td><td><input type="text" id="pheight" size="2" value="50" />%</td></tr>
  <tr><td>Opacity:</td><td><input type="text" id="popacity" size="2" value="50" />%</td></tr>
  <tr><td>Width:</td><td><input type="text" id="pwidth" size="4" value="" /> pixels</td></tr>
  <tr><td colspan="2"><input type="submit" value="Update Reflection" /></td></tr>
  </table>
  </form>
  
  <p id="imageresult">
  Please select an image to reflect. You can either <a href="#" onclick="javascript:a.display(0);return false;">enter the address of an image</a>, <a href="#" onclick="javascript:a.display(1);return false;">search for an image</a> or <a href="#" onclick="javascript:a.display(2);return false;">try using a demo image</a>.
  </p>
  
  <p id="imagehtml"></p>
  
  </div>
  
  <script type="text/javascript">
  a = new Accordion(document.getElementsByClassName('tab'), document.getElementsByClassName('content'), {opacity: false, height: true, duration: 600});
  </script>
  
  <div id="footer">
  <p><strong><a href="http://cow.neondragon.net/stuff/reflection/reflectomatic/">Reflect-o-matic</a> v2.0d:</strong> <a href="bookmarklet.html">Bookmarklet</a> | <a href="http://cow.neondragon.net/">cow.neondragon.net</a></p>
  </div>
  
  </body>
  </html>


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