最近の記事
(02/02)ブログ更新の終了について
(01/22)Picasaでテンプレートを使う 〜 操作方法を動画で解説
(01/13)ShoutMix と Skypeボタンを組み合わせた足跡帳 & チャットボックスの設置
(01/07)画像を使ったクールなスライド・メニュー 〜 imageMenu
(01/03)iPhone/iPodのカバーフロー表示をサイトやブログでも 続きその2
(01/03)イメージスライドスクリプト”noobSlide” 〜サンプル切り出しとボタン画像の利用
(12/31)iPhone/iPodのカバーフロー表示をサイトやブログでも 続き
(12/30)iPhone/iPodのカバーフロー表示をブログでも 〜 ImageFlowをブログで使うには
(07/03)たった1行のスクリプトでできること 〜 IEのJavascript高速化 / IE判定
(07/02)Seesaaブログカスタマイズ 記事ページング機能 / ソーシャルブックマーク機能
(07/02)ブログ記事でHTML/CSS/Javascriptなどのソースコードを綺麗に表示したい 〜 dpSyntaxHighlighter
(06/25)Javascript onloadが複数ある場合の対処法 〜FancyZoomとCubeブログシールを共存させる
(06/25)クールなズームアップを手軽に実現 〜 FancyZoom 1.1
(06/21)Webサイト/ブログのCSSを直感的に理解できるFireFoxアドオン 〜 EditCSS
(06/15)記事の中でHTMLタグを表示したい
(06/15)パンくずリストをつける
(06/12)Slimbox / Lightbox のキャプションにリンクを貼るには
(06/10)slimbox1.52 reflection1.3 バージョンアップへ対応
(05/31)mooSlideBox3.2 が動かない 〜 mooSlide2.jsの修正で解決
(05/28)Mootoolsパノラマ・スクリプト "Pamoorama" VS "Mediabox"+村上スクリプト
2009年01月07日

画像を使ったクールなスライド・メニュー 〜 imageMenu この記事をはてなブックマークする |

Evernoteにクリップする

 こちらのSONYのサイトのトップには画像を使ったスライド・メニューが設置してあって各製品のページへジャンプできるようになっていますがなかなかクールです。 ただこれFlashで作成されているので、自作するには敷居が高そうです。

  Mootoolsライブラリを利用した画像メニュースクリプト ”imageMenu”を使えば、スライドメニューを簡単に作成できてしまいます。
オプションのパラメータを組み合わせればいろいろできそうです。

  こちらは私の試作品

imagemeu_sample.jpg 

 公式サイトでは現在Mootools 1.1にしか対応していませんが、ググッてみるとこちらにはMootools 1.2対応版がありました。 

でもこうなると画像作成のセンスが問われますね(汗)



posted by 飛梅 at 07:08 | Comment(6) | TrackBack(0) | mootools | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
またまたお邪魔致します。
ホント毎日お邪魔しています。
毎回細かく拝見させていただいていますが、私がこんなものをホームページに取り込みたいな〜と思うものが飛梅 さんのサイトにはいっぱい詰まっていてとても楽しいですし勉強になります。

とてもセンスがいいですね^^

まだ他にも、画像のズーム最高です。

カバーフローだけでなく、イロイロ教えて下さい。
よろしくお願いします。

Posted by とっし〜 at 2009年01月22日 01:06
とっし〜さん>

お褒めいただいて恐縮です。
各サイトではクールなツールがたくさん紹介されていますが、それらを見るとすぐに試してみたくなります。ただ、なかなかうまくいかないこともあって苦労しています(笑)
ソース表示していただくとわかりますが、あれこれとやっているのでとかくこのブログの動作が重いですが今後ともご愛顧ください♪
Posted by 飛梅 at 2009年01月22日 10:10
動画拝見いたしました^^
すごく分かりやすく私にもではました〜^^

本当に有難う御座いましたm(_ _)m

次は画像のスライドメニューとズームに挑戦しています^^

ですが全く分かりませんでした、どうしても深く考えてしまう為変になってしまいます^^;

またリンクされているページは全て英語ですので『ちんぷんかんぷん』です。

またまた教えて頂きたいと思っています。

毎度毎度すみません

よろしくお願いします。
Posted by とっし〜 at 2009年01月22日 11:16
MooTools 1.2.1 YUI Compressor 63 kb
MooTools 1.2.1 JSMin 75 kb
MooTools 1.2.1 Uncompressed 95 kb
どれを保存すればよいのでしょうか?

作り方教えて下さい。
Posted by とっし〜^^ at 2009年01月22日 13:16
自分で何とか頑張ってやってます^^

何とかできました。

しかし
http://www.aaronbirchphotography.com/
↑みたいに幅を広げることに悩んでます。

どうしたら広がるのか(^^;)

あと一つ質問して良いですか?

メニューをクリックしましたら、ポンッと音が鳴りビックリマークの付いた別の窓が開きリンクしているURLが出てくるのですが、確認画面なのでしょうか?
そのままリンク先に行くようにする事は無理なのでしょうか?



Posted by とっし〜 at 2009年01月23日 23:34
僕もimageMenuはデモ作成まではして動作確認していますがリンクは空欄で作成していません。確認画面の表示はプログラム側の問題ではなく、ブラウザ側でセキュリティ設定の問題ではないでしょうか。
”幅を広げる”については、これがimageMenuのウリですから(笑)実は僕もデモでは調整を失敗していて途中で右端のメニュー幅が変わってしまっています。CSS;スタイルシートでうまく設定してやる必要があるかと思います。ここは自力でやるしかなく大変かと思いますがいろいろ試してください。
Posted by 飛梅 at 2009年01月24日 14:35
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。