タイムライン作成javascript「Timeline」

年表などを作成するとき時系列で並べると便利ですが、長くなりすぎるとページに収まりません。
そこでTimelineを使用すると、ある一部分のみを表示することができます。

sponsors

使用方法

Timelineからtimeline.jsをmootoolsからmootools(v1.2)をダウンロードします。
<script src="http://yourdomain/mootools.js" type="text/javascript"></script>
<script src="http://yourdomain/timeline.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://yourdomain/timeline.css" style="text/css">
*CSSの中で画像をしてしていますので、適宜変更してください。
18.pngscale.gif 最後にタイムラインを表示する場所に以下を記述します。
<script type="text/javascript">
var timeline;
	window.addEvent('domready', function(){
	timeline = new TimeLine('timeline');
});
</script>
<div id="timeline"></div>
またタイムラインに表示するにはtimeline.jsの88行目以下を変更します。
this.addTimeEvent('タイトル' , '内容' ,X ,Y );
*まだ開発途中なのかラベルなどをつけられません。

サンプル

sponsors

Javascriptサンプルページ一覧
skuare.net