web design blog.

This tutorial explains step-by-step how to take the existing way of selecting a currency in Magento E-Commerce (an html select box) and convert the process into images allowing you greater customisation potential, without any usability loss.

The easy to follow steps are broken down so that an understanding of the processes involved can be gained and allowing you to easily add this functionality to your Magento E-Commerce installation. No advanced programming knowledge is required, while all code is provided ready to paste in to place! The only part supplied you is the images for your currencies…

This jQuery-powered effect adds a feature to your design that few others can – a unique appearance for every user!

Using only two images and some javascript, the effect takes one image as a background and scrolls it vertically. Then, using another background image, places an overlay on top, creating an opaque window to look through. Using javascript to randomise the position of both images on a page load means that every time the page is loaded, the effect will take on a different look and feel.

This tutorial takes you through exactly how it works, gives examples of the effect in action, provides a download for you to experiment with a working copy, and explains how you can easily incorporate it into one of your own designs.