In the previous two articles, we covered the basics of image crawls, and how to avoid some of their weaknesses and design them without major glitches or problems. For this final article, we'll discuss a few extra options for these crawls. As a reminder (or to bring you up to speed if you are not reading the series sequentially), an image crawl is a form of code that causes thumbnails to slowly move across the screen. As we've discussed, image crawls are great for websites where you want people to get a good view of a wide variety of product images, such as with jewelry, photography, and graphic design.



One of the weaknesses we had discussed earlier was the speed at which the image crawl moves. This makes them poor choices for general shopping navigation; they're great for browsing your photographs, not so much for finding the perfect piece of jewelry to buy as an anniversary gift. This can be exasperated if the crawl only moves in one direction at a fixed rate. If something catches a user's eye and they don't click it in time, they would have to wait for the entire crawl to loop around before they see it again. User-friendly that ain't.

It can be a useful idea, thus, to allow users to control the crawl. The first way to do this is a simple "onmouseover" function that causes the crawl to stop, generally by clearing the timer. When the mouse moves off, another function restarts the timer, continuing the crawl.

In some cases, though, you might have other animations or functions that are going off that same timer (it's easier on the computer to track everything on one timer rather than having to keep multiple timed functions going simultaneously). In this case, you can use a Speed variable to determine how many pixels the crawl moves with each instance of its function being called. On mouse over, the Speed is set to 0, causing it to stop. It returns to 1 (or whatever) on mouse out.

Even if you stop and start the crawl with timeouts, though, a Speed variable can be useful. People have different preferences, and having buttons or a control that lets them change the speed can easily make the site a bit more dynamic and convenient. It's also not hard to set the crawl up to go forward or backward, so if someone sees a photo or piece of jewelry they like and just miss hitting it, they can just reverse the crawl's direction. In fact, the code snippet from the previous article is designed for calculating the loop in both directions.

A speed and direction control is the last piece of a good image crawl. All told, it's a fairly simple piece of functionality, easily doable with less than a hundred lines of code, and probably less than fifty. It adds a nice touch to photography, graphic design, jewelry, and other sites where visual appeal and an aethetic product presentation are critical.