Design & Dev Tools

Web Design Tips: Add An Image Flip for More Sales

Screen capture of the image flip example

Consumers will judge your website mainly by the size, quality, and interactivity of the images you use. Adding a simple interactive feature—like a JavaScript image flip—may lend your store credibility and improve your conversion rates.

Consumers rely on an ecommerce site’s aesthetics to gauge its credibility 46.2 percent of the time—more than any other factor—according to a joint Stanford University study of 2,440 people from 2003. Furthermore, to convert shoppers into customers, a virtual store must provide a very concrete impression of the products it sells.

A JavaScript Image Flip

There are several ways to improve your site’s visual appeal and interactively. But for this edition of Web Design Tips, a recurring Practical eCommerce feature, I’ll show you a simple script to spice up your store’s product images and give shoppers a way to view several product pictures.

Let’s imagine that we have three great product images. We want our customers to see large and clear versions of each image, but we don’t want to clutter the product page with all three massive photographs. Instead, we choose one default picture, and place thumbnail images next to it on page. We’ll use a JavaScript to flip the main image when a shopper hovers her mouse over a thumbnail.

This kind of image flip is widely used and has been around for more than a decade, so browser compatibility is not a concern. I’ve also produced a video tutorial, so you can see the script in action and follow along as I write the script in real time.

Image Flip Tutorial Video

Great Images, JavaScript, and a Mouse Event

To get an image flip up and running, you’re going to need three things: (1) several great product images, (2) a short JavaScript, and (3) a couple of simple HTML intrinsic event handlers. In the next few paragraphs, I’ll show you items (2) and (3) in some detail, but item (1), great product images, you need to provide.

The JavaScript

<code>&lt;script type="text/javascript"
language="javascript"&gt;
fimgUNUS = new Image(383,383)
fimgUNUS.src = "red-knight-mounted.png"
fimgDUO = new Image(383,383)
fimgDUO.src = "red-knight-standing.png"
fimgTRES = new Image(383,383)
fimgTRES.src = "horse-kicking.png"

function unusOut() {
document.fimg.src = fimgUNUS.src; return true;
}

function duoOut() {
document.fimg.src = fimgDUO.src; return true;
}

function tresOut() {
document.fimg.src = fimgTRES.src; return true;
}

&lt;/script&gt;
</code>

Designate Your Product Images

The initial portion of the script is used to designate the images you’ll be flipping around.

<code>fimgUNUS = new Image(383,383)
fimgUNUS.src = "red-knight-mounted.png"
</code>

Each image gets two lines of code. In the first line, give the image a name, for example “fimgUNUS,” and define its dimensions (width, height). The second line of code designates the image’s “src” or location.

A Short Function

<code>function unusOut() {
document.fimg.src = fimgUNUS.src; return true;
}
</code>

Next, write a short function and give it a unique name like unusOut(). In JavaScript, a function is a set of statements that perform a task when called or invoked. In your image flip, unusOut() resets the “src” or file location for “fimg” which resides in the “document”—note the document.fimg.src syntax.

Place the Main Image

<code>&lt;img name="fimg" src="red-knight-mounted.png"
alt="Image of the Red Knight STIKFAS" /&gt;
</code>

Place the HTML for the main image on your product page, giving it the same name you used in your function, “fimg” in this case.

Invoke the Script

Call the script to action with an intrinsic event handler, “onmouseover,” and your image flip is complete. Fortune will, no doubt, follow.

<code>&lt;img src="red-knight-mounted.png" alt="red knight
mounted" onmouseover="unusOut()"  /&gt;
</code>

Example Code

<code>&lt;head&gt;
    &lt;meta http-equiv="content-type"
            content="text/html;charset=utf-8" /&gt;

    &lt;title&gt;Image Flip&lt;/title&gt;
            &lt;link href="style.css" rel="stylesheet" /&gt;

    &lt;script type="text/javascript"
    language="javascript"&gt;
    fimgUNUS = new Image(383,383)
    fimgUNUS.src = "red-knight-mounted.png"
    fimgDUO = new Image(383,383)
    fimgDUO.src = "red-knight-standing.png"
    fimgTRES = new Image(383,383)
    fimgTRES.src = "horse-kicking.png"

    function unusOut() {
    document.fimg.src = fimgUNUS.src; return true;
    }

    function duoOut() {
    document.fimg.src = fimgDUO.src; return true;
    }

    function tresOut() {
    document.fimg.src = fimgTRES.src; return true;
    }



    &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div id="wrapper"&gt;
    &lt;div id="left"&gt;
    &lt;img src="red-knight-mounted.png" alt="red
            knight mounted" onmouseover="unusOut()"  /&gt;
    &lt;img src="red-knight-standing.png"
            alt="red knight standing"
            onmouseover="duoOut()" /&gt;
    &lt;img src="horse-kicking.png" alt="horse
            kicking" onmouseover="tresOut()" /&gt;
    &lt;/div&gt;
    &lt;div id="right"&gt;&lt;img name="fimg" src="red-
            knight-mounted.png" alt="Image of the Red
            Knight STIKFAS" /&gt;&lt;/div&gt;

    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;
</code>

Summing Up

To a large extent, consumers will judge your store’s trust worthiness by how visually appealing it is. Including an image flip like the one you’ve just read about will make a positive impression.

Editor’s Note: Do you have a suggestion for a future edition of Practical eCommerce’s Web Design Tips? Please email it to armando@practicalecommerce.com.

Resources

Armando Roggio
Armando Roggio
Bio   •   RSS Feed


x