mioot: It's working correctly (though for my taste it could be more responsive) because it's not the OP's site. It's what it should look like in the end.
Tink: Googling for this concrete functionality probably won't make you happy; you will probably end up with some script you will have to adapt to your needs, which will be more of a pain than writing it yourself.
Now, I understand you don't feel all that comfortable with Javascript, but, if you don't already have please try to learn the basics of the language -- otherwise the next few things I tell you won't do you any good.
If you already know your basics, what will get you started on your problem very quickly is jQuery. Please have a look at some tutorials here:
http://docs.jquery.com/Tutorials
When you had a read through the basic stuff there, this should get you started:
The HTML setup is the following: You have a wide <div> there containing all the contents right next to each other (I suppose you are feeling comfortable enough with CSS to accomplish that). That div resides within a narrower one, so only the first part of the contents is showing. And you have a few <div>s acting as buttons.
What you want to do now, is add an event listener to the buttons, that checks if the user hovers over them, and if so, move that wide div to another position, so another part of its contents is showing through the "window" created by the outmost container.
Here is a quick working example:
Code:
<html>
<head>
<title>hoverslides</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
#window {
position: relative;
width: 100px;
height: 30px;
border: 1px solid;
overflow: hidden;
}
#container {
position: absolute;
width: 500px;
}
#container div {
float: left;
width: 100px;
border: 1px solid;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#buttons div').hover(function(event) {
var buttonNumber = parseInt(event.target.id.match(/\d/)[0]);
$('#container').animate({
left: - (buttonNumber * 100)
});
});
});
</script>
</head>
<body>
<div id="window">
<div id="container">
<div>first content</div>
<div>second content</div>
<div>third content</div>
</div>
</div>
<div id="buttons">
<div id="button0">button 0</div>
<div id="button1">button 1</div>
<div id="button2">button 2</div>
</div>
</body>
</html>
As you can see, with the magic of jQuery about five lines of code suffice to make it happen.
Please don't just take that example an run though, use it to learn!
Before you post, read our: 
