Flashを使用せずに、液体が流れるように画像を少しずつ表示するスクリプトをWeb Reflectionから紹介します。 JavaScript Liquid Image FX demo 上記のデモでは、Firefoxのロゴが左から順に上下左右から液体が流れるように画像を少しずつ表示します。 また、動きを組み合わせたデモもあります。

リッチなウィジェット実装などが可能な超多機能JavaScriptフレームワーク「UIZE JavaScript Framework」が凄い件 2009年08月12日- リッチなウィジェット実装などが可能な超多機能JavaScriptフレームワーク「UIZE JavaScript Framework」 これまたなかなか凄いフレームワークが現れました。 「またフレームワークか」と思った方も、必見の機能があるので以下を参照してみてください。 以下にそのフィーチャーをピックアップしてみます。好きな機能だけを使うっていうのもありかもしれません。 カーソルを合わせるとアニメーションしながら切り替わるリンク 画像切り替えの様々なエフェクト集。これだけでも使いたい 色々なエフェクトで画像が切り替わるスライドショー機能 ソートできるカラーテーブル。こちらもユニーク カラーブレンダー 近似色をソートできるウィ

クリックで画像がかわる、軽快な画像ギャラリーを実装するスタイルシートをdevirtuosoから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <div id="wrapper"> <ul> <li><a href="#image1" id="tab1"><img src="tab1.jpg" alt="" title="" /></a></li> <li><a href="#image2" id="tab2"><img src="tab2.jpg" alt="" title="" /></a></li> <li><a href="#image3" id="tab3"><img src="tab3.jpg" alt="" title="" /></a></li> <li><a href="#image4" id="t

Opera で DOM Mutation Event を使用するコードを追記しました。 まとめを追加しました。 Opera パート2に取得できないケースが見つかったため、パート3 を追加しました。 rhino.jpg(幅:300px, 高さ:227px) を、 <img id="rhino" src="rhino.jpg" width="100" height="75" /> と、100 x 75 で表示している場合を例に、画像本来のサイズを取得する方法をご紹介します。 Firefox, Safari, Google Chrome なら image.naturalWidth と image.naturalHeight を利用します。 image.naturalWidth と image.naturalHeight の初期値は 0 です。画像の読み込みが完了した時点で適切な値に更新されます。

高解像度画像は、サイトが扱っている内容によっては、ユーザーからの強い閲覧ニーズがあることを、コラム記事「高解像度画像を閲覧できるようにする」で述べました。これを受けて、高解像度画像を閲覧するためのアプリケーション（ビューワー）、特に無料で気軽に使えるものをご紹介したいと思います。今回採り上げるのは、「TJPzoom」です。 TJPzoomは、JavaScriptを使用したビューワーです。Webページに貼り付けられた元画像の上にマウスポインターを当てると、その部分が虫眼鏡のように拡大表示されます。操作子などの細かなUI（ユーザーインターフェース）が一切無く、ただマウスポインターを重ねるだけなので、シンプルでわかりやすく、非常に直感的と言えます。下記にサンプルを用意してみました。 なおTJPzoomでは、高解像度画像を閲覧中に、マウスボタンを押した状態で上下左右にマウスを滑らせる（ドラッグの要

「DESIGN LABEL」で、JSでモーダルウィンドウやダイアログボックスを実装する方法がたくさん紹介されています。 ざっといくつかご紹介。 » Prototype Window prototypeフレームワークをベースにしたjavascript » Simple Modal いろいろなタイプのモーダルダイアログボックスを作るjQueryベースのプラグイン » Moodalbox Ajaxで外部コンテンツを表示する。mootoolsを使用 » jqModal マルチモーダルダイアログ（モーダルの中にモーダル）が可能なjQueryプラグイン » Lightwindow pdf、flash、QuickTimeなどのファイルをJSダイアログボックスで開ける » Facebox 画像やdiv、ページ全体を表示するためのFacebookスタイルのlightbox クールなインターフェースが揃ってい

twitter facebook hatena google pocket (mb)ImgNavigator 1.0大きな画像を表示したいし、その画像のどこを見ているか表示させたいという、あなたにお勧めです。 地図とか、商品画像に使用すると便利かもしれません。 sponsors 使用方法 (mb)ImgNavigator 1.0からファイル一式をダウロードします。 <link href="/test/css/mbImgNav.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="jquery-1.3.js"></script> <script type="text/javascript" src="ui.core.min.js"></script> <script type="text/java

久しぶりのJavaScriptネタです。最近は、マック（MBP）で作業することも多いのですが、アップルの提供する.Mac というサービスを使うと簡単に見栄えのよいホームページ（HP）を作成することが出来ます。このサービスはマックを使ってこそ活きるものですが。 で、何種類ものHP向けのテンプレートが予め用意してあるんですが、多くのテンプレには、デジカメで撮った写真を単に貼り付けるだけでなくて、それらをちょこっと斜めにしたり切手風に縁取りしたり出来て、お洒落に演出できるわけです。自分も以前からこういうことをppBlogでしたいなぁとは思っていて、現状、写真っぽく見せたりドロップシャドウを付けたりというのはスタイルシートを使って出来るようにしています。後は、切手風とか写真を少し傾けて貼り付けるとかですが、これらはサーバーサイドのPHPプログラムで画像を加工すれば可能なんだけど、写真をアップする際

概要 MJL (MITSUE-LINKS JavaScript Library)は、ミツエーリンクスで標準利用されるJavaScriptライブラリです。 MJLは弊社内における業務効率を改善するために、統一された設計思想、利便性の向上を念頭においた上で設計・開発されました。 MJLは他のJavaScriptライブラリ群とは異なる設計思想により、独特の特徴を持ちながらも他のライブラリと補完しあえるものを目指しました。 MJLはコピーレフトライセンスであるGNU GPLに基づく自由ソフトウェア（フリーソフトウェア）です。弊社は GNU GPLに則り、本ページにてMJLの全ソースコードを公開します。 ライセンス MJLはGNU GPL Version 3（参考邦訳）のもとに提供されます。 詳細はMJL本体ファイル内のライセンス告知をご覧ください。 ダウンロード MJL本体（圧縮版） mjl.js

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

UvumiTools Crop 画像をクロップする際に使える範囲指定JSライブラリ「UvumiTools Crop」。 次のようなＵＩで、画像の上の点線はドラッグ＆ドロップ＆リサイズ可能。切り取った場合のプレビューも出ます。 範囲部分の色だけ変えることもできるみたい。 関連エントリ PHPでの画像のリサイズ、切り抜きが自由自在「class.image.php」 DHTMLな画像キリトリスクリプト

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

右クリックなどで画像を保存するのを禁止したい。 そんなあなたにおすすめなのが、『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:

画像の一部のみを拡大表示するスクリプトの紹介です。 TJPzoom jqzoom requires jquery.js loupe.js shiftzoom.js MojoMagnify mooZoo

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