How To Code Sliding Image Navigation

Lately I have been seeing some nifty "sliding image" navigation on a number of websites.  Probably the best use of it I've seen is on the Huffington Post, where it appears on most sub-pages--just one example here:
It's the horizontal menu of images, showing three images at a time, and a user clicks on an arrow in either direction to move the menu left/right by one image per click.  When I first saw this, I assumed it must have been Flash, but the source code indicates it was actually done in Javascript.  My question is:  is there a web genius out there in Experts Exchange who can help me replicate this functionality?  And I do mean "replicate" in that, if you know how to do it in Javascript, that's great, but if I can essentially do the same thing using DHTML (show-hide layers, whatever) or another technology, I'd be just as happy--it's the end result that's most important to me!  I concede that the JS code below might well show exactly how it's done, but I am clueless enough in JS that I would need someone to hold my hand through it to explain how I could make my own graphic/menu work with this code!
This appears to be the relevant code:
<div class="clear"></div>
			<div id="threeup_top_wrapper">
				<div id="threeup_left_nav" class=""><a href="#" onclick="Y.threeup.right(); if (urchinTracker) urchinTracker('/t/a/threeupnav.v1/left.v2/Living'); return false;"><img src="/images/v/threeup/left_big.gif" border="0"></a></div>
				<div id="threeup_wide_container" style="position:relative">
					<div id="threeup_featured_content"><!-- this content will be replaced --></div>
				<div id="threeup_right_nav" class=""><a href="#" onclick="Y.threeup.left(); if (urchinTracker) urchinTracker('/t/a/threeupnav.v1/right.v2/Living'); return false;"><img src="/images/v/threeup/right_big.gif" border="0"></a></div>
			<div style="clear: both; border-bottom: 1px solid #ddd; padding-bottom: 0px;"></div>
				function threeup_js()
					var callback = {
						success: function(o) { $("threeup_featured_content").innerHTML = o.responseText; Y.threeup.init()},
						failure: function(o) { return; }
					var url = '/threeup.php?threeup=yes&VerticalName=Living&entry_id=142748&v=1';
					var currentTime = new Date();
					var co = YAHOO.util.Connect.asyncRequest('GET', url + '&h=' + currentTime.getHours(), callback);

Open in new window

Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

David BruggeCommented:
Hi tom!

It looks like you are ready to take that step up from html to ajax.

Truth be told, it is not all of the effects called ajax are really and truly AJAX, but the use of javascript to slide images in an out and open and close windows has become know as ajax.

The javascript itself is rather basic, and after you lean the basics, you can usually muddle through. The good news is that you don't have t know much about javascript to get started. Just so that you know what people are referring to when you search for this on the web, know that javascript lets you write your own definitions for functions. This means that someone can take the basic core javascript and add a lot more features to it.

A number of groups have done this and each have their fans. They each write modules and components that work with their extended version of javascript. The some of the most popular are Scriptaculous, Prototype, MooTools, and JQuery (I know that I am going to make someone mad because I left out their favorite framework) Adobe has their own that you can access from inside of Dreamweaver CS3+ called Spry.

The Menu that your are referencing is known generically as a "sideshow" because it is based on the code originally written to be able to navigate back and forth among a group of images.

My own personal opinion is that Scriptaculous is the best place to start for a beginner. It has a very active following and its beginner tutorials and forums are among the easiest to follow.

To get an idea of what I am talking about with ajax, go to a place like or If you are using Dreamweaver, take a look at

Here are some links:

there are also:   and

I know that this isn't the easy answer that you were looking for, but it is where you were going to end up eventually.

Best of luck to you
David B


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
dbruntonQuid, Me Anxius Sum?  Illegitimi non carborundum.Commented:
tomstrawAuthor Commented:
Sorry about delay in responding guys; I was out for the holidays and then some personal things kept me away.  I wasn't thinking in terms of easy or hard, but rather just getting pointed in the right direction, and these answers will do the trick nicely.  Thanks!

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.