消费者将主要根据你所使用的图片的尺寸、质量和互动性来评判你的网站。添加一个简单的互动功能——比如 JavaScript 图像翻转——可以为你的商店增添可信度并提高转化率。
根据斯坦福大学2003年对2440人进行的联合研究，消费者在46.2%的情况下依赖电子商务网站的视觉效果来评估其可信度——这一比例高于任何其他因素。此外，为了将购物者转化为顾客，虚拟商店必须提供其所售产品的非常具体的印象。
JavaScript 图像翻转
有几种方法可以提升网站的视觉吸引力和互动性。但在今期的 《网页设计技巧》（Practical eCommerce 的常规实用栏目）中，我将向你展示一个简单的脚本，以丰富你商店的产品图片，并为购物者提供一种查看多张产品图片的方式。
让我们假设我们有三张很棒的产品图片。我们希望客户能看到每张图像的清晰大图版本，但不希望用这三张巨大的照片使产品页面显得杂乱无章。相反，我们选择一张默认图片，并在页面上将其旁边放置缩略图。当购物者的鼠标悬停在缩略图上时，我们将使用 JavaScript 来切换主图像。
这种图像翻转技术被广泛使用，已经存在十多年了，因此浏览器兼容性问题无需担心。我还制作了一个视频教程，您可以看到脚本的实际运行效果，并跟随我实时编写脚本的过程。
图像翻转教程视频
优质图片、JavaScript 和鼠标事件
要实现图像翻转功能，你需要三样东西：(1) 几张优质的产品展示图片；(2) 一段简短的 JavaScript 代码；(3) 几个简单的 HTML 内置事件处理程序。在接下来的几段中，我将详细介绍第 (2) 和第 (3) 项，但第 (1) 项——优质的产品展示图片——需要由你自行提供。
JavaScript 代码
<script type="text/javascript" language="javascript"> 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; } </script>
指定你的产品图片
fimgUNUS = new Image(383,383) fimgUNUS.src = "red-knight-mounted.png"
每张图片需要两行代码。在第一行中，为图片命名，例如“fimgUNUS”，并定义其尺寸（宽度和高度）。第二行代码指定图片的“src”或位置。
一个简短的函数
function unusOut() { document.fimg.src = fimgUNUS.src; return true; }
接下来，编写一个简短的函数并给它一个唯一的名称，比如 unusOut()。在 JavaScript 中，函数是一组在执行或被调用时执行特定任务的语句。在你的图像翻转应用中，unusOut() 会重置位于“document”中的“fimg”的“src”或文件位置——注意 document.fimg.src 的语法。
放置主图像
<img name="fimg" src="red-knight-mounted.png" alt="Image of the Red Knight STIKFAS" />
在产品页面上放置主图像的 HTML 代码，并使用你在函数中使用的相同名称，在本例中为“fimg”。
调用脚本
通过内联事件处理程序“onmouseover”调用脚本来实现动作，你的图片翻转效果就完成了。毫无疑问，好运将随之而来。
<img src="red-knight-mounted.png" alt="red knight mounted" onmouseover="unusOut()" />
示例代码
<head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>Image Flip</title> <link href="style.css" rel="stylesheet" /> <script type="text/javascript" language="javascript"> 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; } </script> </head> <body> <div id="wrapper"> <div id="left"> <img src="red-knight-mounted.png" alt="red knight mounted" onmouseover="unusOut()" /> <img src="red-knight-standing.png" alt="red knight standing" onmouseover="duoOut()" /> <img src="horse-kicking.png" alt="horse kicking" onmouseover="tresOut()" /> </div> <div id="right"><img name="fimg" src="red- knight-mounted.png" alt="Image of the Red Knight STIKFAS" /></div> </div> </body> </html>
总结
在很大程度上，消费者会根据你店铺的视觉吸引力来判断其可信度。加入如你所读到的那种图片翻转效果，会给人留下积极的印象。
资源
- B.J. Fogg 等人，《人们如何评估网站的可信度？一项大型研究的结果》
- Syahrul N. Junaini 和 Jonathan Sidi，《通过美学、吸引力和互动性提升电子商务网站的产品展示》