JavaScript help please

hargi · 22 Aug 2007 at 12:30

Hi been looking at thehttp://demos.mootools.net/Fx.Scroll demo as it does what i want i tried to modify it on my computer and it doesnt work. I cant get the picture to move from one location to another, can any one see what im doing wrong
the 1st.jpg is my image that i want to move, I have no idear what the bubble.jpg is.
My 1st.jpg is 2112x1660 if this make any difference. and can be downloaded here http://img489.imageshack.us/img489/69/1stzc9.jpg

Obviously i will change the link names when i get it working.
Thanks in advance

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  
	 <style type="text/css">
	#demo-bar {
	margin: 5px auto;
	padding: 5px 0;
	width: 600px;
	border-bottom: 1px solid #B3D4EF;
	background: #EFF8FF;
	text-align: center;
}
 
#demo-wrapper {
	margin: 5px auto;
	overflow: hidden; 
	height: 400px; 
	width: 600px;
	border: 1px solid #ddd;
	position: relative;
}
 
#demo-inner {
	width: 2270px;
	height: 1704px;
	background-image: url(1st.jpg);
	position: relative;
}
 
.scrolling-content {
	background: transparent url(bubble.png) top left no-repeat;
	width: 139px;
	height: 173px;
	text-align: center;
	position: absolute;
}
 
.scrolling-content h1 { 
	color: #fff;
	padding: 25px 0;
	font-size: 12px;
}
 
#content1 {
	left: 5000px; 
	top: 100px;
}
 
#content2 {
	left: 800px; 
	top: 1350px;
}
 
#content3 {
	left: 1200px; 
	top: 550px;
}
 
#content4 {
	left: 1700px; 
	top: 1300px;
}
</style>
	
	<link rel="shortcut icon" href="/icon.png?v=1" type="image/x-icon" />
	<script type="text/javascript">
		window.addEvent('domready', function(){
			var scroll = new Fx.Scroll('demo-wrapper', {
				wait: false,
				duration: 2500,
				offset: {'x': -200, 'y': -50},
				transition: Fx.Transitions.Quad.easeInOut
			});
			
			$('link1').addEvent('click', function(event) {
				event = new Event(event).stop();
				scroll.toElement('content1');
			});
			
			$('link2').addEvent('click', function(event) {
				event = new Event(event).stop();
				scroll.toElement('content2');
			});
			
			$('link3').addEvent('click', function(event) {
				event = new Event(event).stop();
				scroll.toElement('content3');
			});
			
			$('link4').addEvent('click', function(event) {
				event = new Event(event).stop();
				scroll.toElement('content4');
			});
		}); 
	</script>
  </head>
  <body>
  <h3>
	Fx.Scroll
</h3>


<div id="demo-bar">
	<a id="link1" href="#" name="link1">The Blue Sky</a> | <a id="link2" href="#" name="link2">Last
	Grass</a> | <a id="link3" href="#" name="link3">The Naked Tree</a> | <a id="link4" href="#" name=
	"link4">The Lonesome Tree</a>
</div>
<div id="demo-wrapper">
	<div id="demo-inner">
		<div id="content1" class="scrolling-content">
			<h1>
				The Blue Sky
			</h1>
		</div>
		<div id="content2" class="scrolling-content">
			<h1>
				Last Grass
			</h1>
		</div>
		<div id="content3" class="scrolling-content">
			<h1>
				The Naked Tree
			</h1>
		</div>
		<div id="content4" class="scrolling-content">
			<h1>
				The Lonesome Tree
			</h1>
		</div>
	</div>
</div>

  </body>
</html>

JavaScript help please

hargi

hargi