prototypeでFisheyeメニューを作成するjavascript「Fisheye」

アイコンを用いたメニューを収縮させて省スペースでインパクトを与えるフィッシュアイメニュー。
今回はjavascriptライブラリのprototypeで作成するFisheyeを紹介します。

使用方法
FisheyeからFishEye.js、EventDispatcher.jsをprototypeからprototype.jsを、さらにscript.aculo.usからeffect.jsをダウンロードします。
<script src="http://yourdomain/prototype.js" type="text/javascript"></script>
<script src="http://yourdomain/effects.js" type="text/javascript"></script>
<script src="http://yourdomain/EventDispatcher.js" type="text/javascript"></script>
<script src="http://yourdomain/FishEye.js" type="text/javascript"></script>
<style type="text/css">
#fishEye{height:175px;padding:10px;text-align:center;position:absolute;}
#fishEye img{margin-top:100px;width:50px;height:50px;height:auto;margin-top:0px;margin-bottom:100px;}
</style>
上記を記述したらメニューに使用したい画像を書き込み、それらをid="fishEye"で囲みます。
さらにscriptを以下のように記入します。
<script type="text/javascript">
var linkRelay = function(e){ //リンク用
var ele = Event.element(e);
window.location = ele.getAttribute("href");
}
var myFishEye = new FishEyeToolBar("fishEye", { createSub : function(ele, options){ //ここからFishEye
return new FishEyeItemDown(ele, options);
}});
myFishEye.addEventListener("itemClick", linkRelay); //リンク用
</script>
なお、画像にリンクを付ける時は、上記のリンク用を書いた上で、imgにhref属性を付ける必要があります。
<img src="画像パス" href="リンク先URL">
prototypeでFisheyeメニューを作成するjavascript「Fisheye」サンプル

2008年01月18日

前の記事：テーブルの表を伸縮させるjavascript「ElasticTable」
次の記事：Ajaxにコンテンツを読み込むjavascript「jQuery ajaxContent」

関連記事

• [prototype]Tree.js
• [prototype]Control.Tabs
• [prototype]Simple tabs
• [prototype]prototabs
• [prototype]simple accordion

• ファイルサイズをJavaScriptライブラリ「jQuery」で自動表示する「addSizes.js」
• JavaScriptライブラリ「jQuery」を使用してフォームを華麗に彩る「jqTransform」
• Webカラーに関するサイト21
• 英字新聞ぽいコラムをJavaScriptライブラリ「jQuery」で作る「Columnizer」
• 心地よく要素を切り替えるJavaScript「jFlip」
• CoverFlowを実現するJavaScript「JS Coverflow」
• 画像を丸く輝かせるJavaScript「sphere.js」
• セクシーなLightBoxを実現するJavaScript「Sexy LightBox」
• JavaScriptライブラリ「jQuery」を使ってカレンダーを作る「jCal.js」
• カバーフローぽい画像ギャラリーJavaScript「ProtoFlow」