Home arrow JavaScript arrow Zooming in on Images with JavaScript
JAVASCRIPT

Zooming in on Images with JavaScript


Assuming that zooming-in bitmapped images with JavaScript may be interesting and useful to you, in this series of tutorials, I’ll develop a highly-expansible client side application, which will be tasked with enlarging (and decreasing when applicable) the dimensions of a specific image.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
March 04, 2008
TABLE OF CONTENTS:
  1. · Zooming in on Images with JavaScript
  2. · Developing a basic front-end
  3. · Defining a couple of handy JavaScript functions
  4. · Attaching the JavaScript functions to the zooming controls

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Zooming in on Images with JavaScript
(Page 1 of 4 )

As you may have noticed, more and more modern web sites are incorporating different client and server-side mechanisms aimed at providing visitors with a highly-customized surfing experience. This fact is particularly evident with web sites that deliver their respective contents in diverse formats (the prestigious Developer Shed network is a good example), such as (X)HTML, printer-friendly versions, PDF, etc.

This level of customization is achieved by using a server-side scripting language, which certainly can be useful for delivering database contents in a variety of formats. There are many other approaches that can be implemented via client-side programming to allow users of a given web site to personalize some of its elements.

With reference to the previous concept, it’s common nowadays to see certain web sites that include small controls for decreasing and enlarging the size of their text-based contents, or even panels that allow you to change the complete appearance of different sections of the web site via the direct manipulation of its style sheets.

Of course, as you might guess, the concept surrounding the implementation of diverse mechanisms focused on customizing the surfing experience of users can also be extended to other elements of a web site, such as bitmapped images. In truth, it’s relatively easy to develop a JavaScript application that lets users modify certain aspects of different images on a web page, such as enlarging proportionally their respective width and height values.

Logically, the purpose of doing this is to provide visually impaired visitors with a simple mechanism that allows them to enlarge determined bitmapped images that belong to a particular web site. In addition, the mentioned mechanism can be developed, but all of the JavaScript applications that run on that web site should have a graceful degradation, if scripting has been disabled on the browser, which implies that users will still be able to view the images.

Speaking more specifically, I’m going to start this educational journey by building an introductory zooming script, but in the upcoming parts of the series, I’ll add more complex features to it. So, are you ready to learn how to zoom images in and out with JavaScript? Great, let’s get started now!


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 1 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials