Resizing images in the page - a cool technology tip

Last month I wrote about Cucusoft's iPod Video Converter for converting DVDs to iPod video, and included a screenshot of the app in action.  As usual with screenshots, I had to choose between having the image appear full-size and crystal clear, or having it reduced to fit better on the page but have visble and objectionable artifacts from the resizing.  Looking around for a CSS/Javascript solution, I came upon John Berry's elegant solution on his Agile Partners Weblog - a movable slider to resize the image on the fly.   Drag the slider to see it work!

This script uses the Prototype and script.aculo.us javascript libraries.  Scriptaculous builds upon Prototype and adds some amazing DHTMLeffects, including the slider control used in this demo.  You can view source on this page to see the complete code that does this, but in a nutshell, you:

• download and include the Prototype and Scriptaculous javascript libraries to your page:
  
  <script src="scripts/prototype.js" type="text/javascript" language="javascript"></script>
  <script src="scripts/scriptaculous.js" type="text/javascript" language="javascript"></script>
  
  
• add the html for the slider and the image file.. Note that you may resize a collection of images by adding additional <DIV class='scale-image'> elements within the enclosing <div>
  
  <div style="border: 0px solid #ddd; width: 695px; overflow: auto; float:left;">
    <div class="scale-image" style="width: 695px; padding: 10px; float: left;">
      <img src="http://www.emediacommunications.biz/files/cucusoftdvdtoipod.jpg" width="100%"/>
    </div>
  </div>
  
  
• and the HTML for the slider itself
  <div id="track1" style="border:1px solid #BBCCDD; width: 200px; background-image: url('files/scaler_slider_track.gif'); background-repeat: repeat-x; background-position: center left; height:18px; margin: 4px 0 0 10px;">
    <div id="handle1" style="width: 18px; height: 18px;">
    <img src="files/scaler_slider_gray.gif"/>
    </div><a href="#" style="font-size:small; float:right;" onClick="setSlider(1); return false;">[view full-size]</a>
  </div>
  
• finally, include the custom resize_slider.js script in your page. This must go after the slider HTML in your page.
  
  <script type="text/javascript" src="resize_slider.js" ></script>
  

Here's another great example of this script in action.