Ojambo – JavaScript Flip Images Video 0074

A Video for the Ojambo.com JavaScript Flip Images article.
Part One of One

A flip effect is created by changing the image displayed in a specific page area. Image names will be stored in an array to simplify the JavaScript code. The onload method can be applied to the body HTML tag to start the flip effect when the page is loaded.

The video begins by creating multiple images in Inkscape. Gimp is used to edit the bitmap images into web-friendly smaller file sizes.

The tutorial is broken up into five parts. The first part creates bitmap images using the JessyInk plugin for Inkscape. The second part finds the optimal file size without affecting the image quality using the Save for Web plugin for Gimp.

The third part creates a new Geany project. The four part creates a new HTML file using the HTML5 templates. The fifth part adds JavaScript code for flipping images to the HTML file. The final part consists of viewing the output in a web browser.