igwebcap ウェブページのサムネイルをスクロールでプレビューできるパーツを作成「igwebcap」。 次のようにページの全画面をスクロールしながら表示できる 結構前からあるようなのですが、これは面白い仕組みですね。 関連エントリ webshot - サムネイルでブックマーク

CSSplayのエントリーから、透過PNG画像を使用した大胆なドロップダウン型のナビゲーションを実装するスタイルシートの紹介です。 Professional drop-down #13 with png transparency デザイン的に面白いだけでなく、通常のドロップダウンに比べ領域が広いため、マウス操作を誤ってドロップダウンが非表示になってしまうということも少ないと思います。 対応ブラウザは、IE6, IE7, Firefox, Opera, Safari(PC) and Google Chrome Betaとなっています。 IE6対策には、ドロップダウンの箇所にtable、背景画像にfilter(AlphaImageLoader)が使用されています。

CVIから、画像に水晶玉のような透明度のある球体の効果を与えるスクリプト「sphere.js」を紹介します。 sphere.js (javascript spherical image effect) sphere.jsの対応ブラウザは、IE6+, Fx1.5+, Op9+, Safariとなっており、それ以外では画像がそのまま表示される仕様になっています。 使用方法は外部スクリプトとして記述し、画像のクラスに指定することでさまざまな水晶玉の効果を与えることができます。 sphere 基本のクラス isize サイズを指定するクラス izoom 画像のズーム（％） ialpha 画像の不透明度 ishade 水晶玉のシャドウ ishine 水晶玉の輝き icolor 水晶玉の背景色 igradient 背景のグラデーション

複数個の選択肢の中から順不同で複数を選択させる場合の入力方式としては、チェックボックスを利用する事が多いと思います。チェックボックスは一覧性があり、全体を把握できる点では分かりやすいですが、表示領域を広く取ってしまうため、使いづらい場合もあります。 今回紹介するSelectMultipleは、LIVEPIPE UIというライブラリの中の1つの機能なのですが、セレクトボックスで複数選択を可能にする入力インターフェースを提供しています。 初期状態では、通常のセレクトボックスとなんら変わりないのですが、横の"Select Multiple"をクリックすると、複数選択用のメニューが表示されます。 ここで、例えば上記のような３つを選ぶと、セレクトボックスの選択肢として、３つがセットになった選択肢が表示されるという仕組みです。 この方法であれば、省スペースで複数選択を実現できるので、インターフェースの

Proto Form フォームのバリデートとAjax送信をスマートに実装できるJSライブラリ「Proto Form」 なかなかいいのは、idの値に、_Req　とか _Email とかしておくと勝手にバリデートしてくれる点。 title にエラーメッセージを入れるみたい。 <input type="text" id="name_Req" name="name" title="Required! Please enter your name" /> <input type="text" id="email_Req_Email" name="email" title="Required! Please enter a valid your email address" /> <input type="text" id="telephone_Tel" name="telephone" title=

JS Coverflow クオリティの高いカバーフロー実装用ＪＳ「JS Coverflow」 iTunesにそっくりな感じのクオリティの高いカバーフローを実装できます。 ブラウザによってはちょっと動作が鈍いかも。 カバーフロー風ＵＩ実装の際の１つの選択肢として。 関連 iTunesのカバーフロー風ＵＩをJavaScriptで実現「ProtoFlow」 ＵＩがクールでサクサク使えるMacウェブギャラリー風画像ギャラリー「qGallery」

The Sea of Ideas Blog Archive Bringing CSS Transforms to Internet Explorer So I hope I got you a bit excited with my little teaser, and yes, the second tab was opened on purpose to give you a hint.IEでボックス要素を45度傾けることが出来る「Transformie」。 ボックス要素を次のように表示できるみたいです。 Web-Kitの場合は「-webkit-transform: rotate(45deg);」のような指定が出来るみたいなのですが、これをIEで実現したもの。 rotate以外に、scale,scaleX/Y、skwer,skewX/Y、matrix などの指定が可能みたいです。 応用

Creating a Slick Auto-Playing Featured Content Slider - CSS-Tricks 自動再生されるコンテンツスライダー実装のサンプルが公開されており、ソースのダウンロードが出来ます。 次のようなUIで、ページ下部のサムネイルが自動で切り替わるウィジェットが実装できます。 デモページを見る ページのサイドバーなんかにおいてもよさそうですね。 HTMLも綺麗に作られているのが特徴 関連エントリ 壁に画像を貼ったようなUIの画像ギャラリー「PostcardViewer」 JavaScript製の画像スライダー・ギャラリーいろいろ

右クリックなどで画像を保存するのを禁止したい。 そんなあなたにおすすめなのが、『dwProtector』。画像を保存するのを防ぐJavascriptだ。 このエントリーでは、↓のように画像を保存するのを禁止するJavascriptが紹介されている。 ・右クリックで「別名で画像を保存」 ・デスクトップに画像をドラッグ ・右クリックで「背景として画像を保存」 ・右クリックで「デスクトップの背景に設定」 Javascriptクラスを用意して、それを「window.addEvent」で呼び出す。 あとは<img src="imagepath" class="protect">のように画像にprotectクラスを指定すればOKだ。 保存できたとしても、「blank.gif」という空ファイルになる仕組みとなっている。 画像を保存するのを防ぐJavascript、チェックしてぜひ使ってみてはいかがだろう

MooTools 1.2 Image Protector: dwProtector Image protection is a hot topic on the net these days, and why shouldn't it be? 自サイトの画像の保存をプロテクションする仕組み サイトの画像は、次の方法で保存できますが、それを全部禁止する方法です。 ・右クリック→名前をつけて保存 ・デスクトップにドラッグ＆ドロップで保存 ・右クリックで名前をつけて背景を保存 ・背景画像を表示 dwProtect.js をダウンロードして、JavaScriptで以下のように書くだけです。 window.addEvent('domready', function() { var protector = new dwProtector({ image: '/blank.gif', elements:

ブログのエントリーに対してlivedoor clip・はてなブックマークのブックマーク数やコメントを簡単に表示できるlivedoor-clip-anywhere.jsとhatena-bookmark-anywhere.js（改造版）のスクリプトを公開いたしました。 公開を許可していただいた増井様に感謝いたします。 使い方は、まずこちらからJavaScriptを圧縮したZIPファイルをダウンロードしてください。 展開して出てきたlivedoor-clip-anywhere.jsとhatena-bookmark-anywhere.jsをサーバーにアップロードした後、挿入したい場所に以下のHTMLを記載するだけです。 < !-- どこでもはてなブックマーク ここから --> <script type= "text/javascript">/*<![CDATA[*/ // var hatena_b

YUI AccordionView widgetは、複数のパネルを省スペースに表示できるアコーディオンのスクリプトです。 YUI powered javascript Accordion widget デモ アコーディオンの各パネルはリスト要素で実装されており、オプションではサイズ・アニメーションのスピード・エフェクト・トリガーなどをカスタマイズすることができます。 デザインを変更する場合は、添付されている「skin」フォルダ内の「sprite.png」を変更すると背景やアイコンなどを変更することができます。

Dynamic Layoutは、ユーザーのブラウザの幅を認識し、それに適したスタイルシートでページのレイアウトを最適化するスクリプトです。 Dynamic Layout デモ Dynamic Holy Grail 1～3カラムのシンプルなレイアウト、ブラウザ幅600, 800, 1000に設定 Fortes ブラウザ幅600, 800, 1000, 1200, 1400に設定 fil-ter ブラウザ幅600, 1000に設定 Dynamic Layoutの設置方法は、body直下に外部ファイルとして指定します。 <textarea name="code" class="html" cols="60" rows="5"> <body> <script src="http://static.fortes.com/projects/dynamiclayout/dynamiclayout-1.0

imagefx.jsは、画像に反転・回転・ブラー・シャープ・エッジ・エンボス・ノイズなどのエフェクトをかけることができるスクリプトです。 Javascript Image Effects 対応ブラウザは、Fx2, Op, Safariの最新版となっており、IEは一部のエフェクトが対応していません。 fliphorizontal flipvertical invert desaturate blur blurfast blurmore sharpen sharpenmore edges emboss laplace noise lighten brightness sepia histogram

Unit Interactiveのエントリーから、透過PNG画像をIE6で表示する、超軽量(2KB)の設置も簡単なスクリプトを紹介します。