Flash menu builder and components. Free web menus download. Flash製のドロップダウンメニューを作成するWEBツール。 階層的なドロップダウンメニューをWEB上で作れます。以下がその例 作成したものは swf ファイルでダウンロードして利用できます。 挙動の設定はXMLで設定できるみたいです。

pChart | a PHP Charting library pChart is a PHP class oriented framework designed to create aliased charts.PHPでクールなグラフを描画できるクラスライブラリ「pChart」。 次のようなグラフが描画できます。（円、棒グラフなど） 色々と、グラフ描画ライブラリは存在しますが、こうした描画スタイルもいいですね。 関連エントリ GoogleChartsAPIをPHPから簡単に使える「GoogChart」 jQueryベースの滑らかなグラフ描画ライブラリ「Flot」 CSSだけで円グラフを表示するサンプル

フォームのフリガナを自動入力させるAutoRuby.js | ホームページ制作・運営のヒント フォームのフリガナを自動入力させる「AutoRuby.js」 日本語入力をすると自動でカタカナフィールドで補完されます。 （↓は「日本語」とだけしか入力していません） こんなフォームが増えるとますますフォームが使いやすくなりますね。 関連エントリ Ajax＆PHPでアニメーションするコンタクトフォームを作成するサンプル CSSでユニークなコンタクトフォームを作るチュートリアル

CSSでアニメーションする馬をパカパカ走らせるイリュージョン。 まずは以下のムービーを参照 この原理をCSSで応用してみたのが、このページ(モダンブラウザで確認)。 ブラウザの幅を変えると馬がパカパカ走ります。 上記ムービーのように、内容を変えてみて面白いものが作れるかもしれませんね。 利用者が、ブラウザの幅を変えるようなシチュエーションを作っておいて、変えた途端「おぉー」という状況を作れます。

Q - なぜ、全国地図にしないのですか? 4つほど理由があります。 ポップアップが場所をとりすぎるから 現在、地図部分は185x120pxにおさめていますが、標準的なモニタ解像度ではこの辺が限界です。 キーボード操作時の押下回数を減らすため jsmapがフォーカスするのはSugarCRMなどのWEBアプリです。使い切りのWEBフォームと違い、慣れによるスピードアップが望めるUIである必要があります。 多言語対応のため 日本は47都道府県なので、かろうじて可能だと思う方もいるかもしれませんが、これがイギリス(現在製作中)とかでは100を超えます。 認知的限界のため これも重要。ぱっと見て探せる数というのは、15や20がせいぜいです。 ただ、上記の話とは別に、地方選択用の全国図はあってもいいと考えていますので、それは将来のバージョンで。 Q - 地図はもっと詳細化/単純化しないのですか? 詳細

Fantastic, Free Calendar and Datepicker Scripts - Six Revisions Web applications often require a calendar or datepicker functionality. 日付入力を便利にするカレンダー/日付ピッカー集。 日付だけのものから、Googleカレンダーみたいなカレンダーウィジェットまで、いろいろとあるようです。 Calendar: a Javascript class for Mootools MooMonth Monket Calendar Datejs Vista-like Ajax Calendar 全部見る これだけあれば、日付入力には困らなさそうですね。

How To: Resizeable Background Image - CSS-Tricks Is there a way to make a background image resizeable? CSSで背景画像をリサイズするテクニック デモサイトを見ると、驚くべきことに、背景画像のサイズがビローンと伸びて表示されます。 記事中では３種類の手法について書かれていますが、JavaScriptなしで、CSSだけで実現する３つ目の方法がスマートです。 background-image ではなく、画像に次のようなCSSを宛てることで実現しているみたい。 #img.source-image { width: 100%; position: absolute; top: 0; left: 0; } body { overflow: hidden; } 背景が伸びるというと、ちょっと珍しいので

NETTUTS - Web development tutorials and links - Create a Cool Animated Navigation with CSS and jQuery Animation and visual feedback are great ways to assist a user in navigating and interacting with a website. jQueryでクールにアニメーションするメニューを実装するチュートリアルがｌ公開。 単なるサンプルではなく、チュートリアルなので、その動作原理についての理解も深められます。 デモページを見てみる ＩＥ６で動かないということで注意が必要ですが、Flashを使っていないにも関わらず、なかなか秀逸な出来なので一見の価値ありです。

バナーのローテーション表示を JavaScript で！ - codess - builder by ZDNet Japan バナーのローテーション表示を JavaScript で行うサンプルが公開されてます。 同じセッション内で広告を切り替えられるので、なかなかよいですね。 やってそうであまりやってないというこの機能、今後普及しそうな気がしないでもないです。

アフィリエイトなどで利用するバナー広告は、通常、１つの広告枠（広告表示領域）に１つの広告しか表示できません。 （Flashバナーでは、この枠にとらわれないものもありますが） 「複数の商品のバナー広告を掲載したいんだけど、広告枠はこれ以上広げたくない！」 こんなときに役立つテクニックが、バナーのローテーション表示です。 簡単に説明すると、１つの広告枠に次々と色々な広告を表示していく方法です。 この方法はページスクロールが発生しない（させない構成の）ページにとても有効です。 狭い領域を有効に活用しましょう！ 簡単なサンプルを作成しましたので、参考にどうぞ。 実装は JavaScript (prototype.js利用) で行っています。 詳細についてはサンプルページのソースコードをご覧ください。 サンプルページ ※このエントリは builder メンバーにより投稿されたものです。シーネットネッ

JavaScript Color Fading Script - Web Development Blog This lightweight JavaScript allows for easy color transitions.JavaScriptでクールにカラーフェードアニメーションを実現。 divの要素なんかを、灰色から緑にアニメーションしながら変化させるライブラリが公開されてます。 colorFade('divid','background','ece7b4','f9bcbc',25,30) のように呼び出せばOKみたい。 背景色（background-color ）だけでなく、フォント色(color)や、線の色(border-color)を変化させることも出来るみたい サンプルが多数のデモページはこちら 単に色を変えるよりもインパクトがあって、分かりやすいＵＩを実装するのに役立

jContext 1.0 - The ultra-lightweight right click context menu for jQuery | Keansphere 右クリックメニュー等コンテキストメニューをカンタン作成ＪＳ「jContext」。 次のような独自右クリックメニューをカンタンに実装できるようです。 初期化は以下のようにＪＳでシンプルに。 $(obj).showMenu({ opacity:0.8, query: "#myMenu2", zindex: 2000 }); マークアップも次のように直にＨＴＭＬが記述できて便利。 <div id="myMenu2"> <ul> <li><a href="#">Create New Class</a></li> <li><a href="#">Delete Class</a></li> <li><a href="#">Get a

Hello. My name is Michael and I’m a digital strategist and engineer building LandSearch where you can find millions of acres of land for sale.

StoreSprite PHP＆MySQLなショッピングカートシステム。 デモページにてデモが利用できますが、デザインも使用感もなかなかいい感じです。 OpenCart こちらもPHPベース。 デモページを見るとこちらもなかなかいい感じ。 osCommerse こちらはおなじみPHP製のショッピングカートシステム。 ショッピングサイト構築に使えるので、それぞれ評価してみるのもよいかもしれませんね。 参考エントリ：8 Best Open Source Shopping Carts | WebTecker the latest Web Tech, Resources and News.

Timeframe ドラッグ＆ドロップで範囲指定できる日付選択UI実装ライブラリ「Timeframe」 次のようなＵＩで、日付をＤ＆Ｄ選択できるJSウィジェットが公開されました。 次のような感じに初期化するようです。 <script type="text/javascript" charset="utf-8"> //<![CDATA[ new Timeframe('calendars', { startfield: 'start', endfield: 'end', previousbutton: 'previous', todaybutton: 'today', nextbutton: 'next', resetbutton: 'reset' }); //]]> </script> 範囲指定の入力に便利そうですね。 関連エントリ 日付の範囲を指定できるJavaScriptデートピッカー「

busy.js (loading indicators) busy.js 1.0 allows you to add/remove loading indicators to html elements on your webpages 指定したHTMLエレメントをローディング中にする際に便利な「busy.js」。 例えば、div 要素全体に次のようにローディング中にすることが出来ます。 デモはこちら - 要素をクリックでローディング状態にすることが可能 オーバーレイで要素自体の色も変わるため、ローディング中であることがよく分かるようになっています。 関連エントリ グレーアウト表示ライブラリ:glayer.js 様々なLightBox風ダイアログを超簡単に作れるJavaScriptライブラリ「Control.Modal」

prettyPhoto - jQuery lightbox clone - by Stephane Caron Here's my jQuery lightbox clone, I did it because those available are either not close enough to the real lightbox (lacking animations, not supporting galleries, etc ,etc) or were just not suiting my need.jQueryベースのLightBoxクローン「prettyPhoto」。 特に真新しいというわけではありませんが、jQueryベースで動作します。 LightBox同様、複数画像でページ送りができるモードと、単体に対して設定することもできます。 最初から角丸になっているので角丸

Easy Scroll v1.0 - Unobtrusive content scroller This is a demonstration of an unobtrusive content scroller.コンテンツをブロック内でスクロールさせられる「Easy Scroll」 先日、横スクロールのものを紹介しましたが、たてスクロールのものもありましたね。 狭い範囲に情報を入れたい場合に活用できそうなので覚えておきましょう。 関連エントリ カーソル位置によって自動スクロールする小窓実装ライブラリ

SEOに便利なFirefoxエクステンション色々 SEO用のエクステンションもいろいろあるようですね。 SeoQuake :: Firefox Add-ons SEOに便利なFirefoxエクステンション「SeoQuake」。 インストールすると、Googleのページランク、リンク数、関連リンク、Yahooのリンク数、関連リンク数などの情報が得られます。 SEO for Firefox Ｇｏｏｇｌｅの検索結果にページランクなどのSEO情報を表示。 その他便利な機能いろいろ RankQuest SEO Toolbar ３０以上のSEOツールに簡単アクセス Live PageRank ページランクをステータスバーに表示 Alexa Sparky Ａｌｅｘａ情報をステータスバーに表示 SEOHAND ページランク、バックリンクなどを元にグラフを作成 実に様々な拡張がありますね。IEもこんな感じに

Pure CSS Animated Progress Bar | Css Globe Here's a simple demonstration of how you can create animated progress bar using pure css. JSレスでピュアCSSの超カッコいいプログレスバーのサンプル →デモを見る - ズイズイアニメーションしていきます。 何とこれ、ＪａｖａＳｃｒｉｐｔを使っていません。 CSSとHTMLオンリーです。 仕組みは、GIFアニメーションで100%までプログレスする画像を作成しておき、進捗部分までを画像で塗りつぶすというもののようです。 CSSだけじゃ無理だと思うようなところもCSSのみでやっちゃうのは感動してしまいますね。 関連エントリ JavaScriptでの進捗表示に便利な「jsProgressBarHandler」がアップデート